En el entorno digital actual de ritmo acelerado, actualizar manualmente las pantallas digitales puede ser tedioso y propenso a errores. Esta guía le mostrará cómo integrar datos en vivo en sus pantallas digitales, permitiendo actualizaciones automáticas y sin problemas en todas sus pantallas.
En este artículo:
- ¿Qué es OptiSync?
- Agregar su fuente de datos
- Ingresar su fuente de datos en Designer
- Editar y diseñar su repetidor en Designer
- Enviar a las pantallas
| Nota: OptiSync solo está disponible en planes Pro Plus y superiores. |
¿Qué es OptiSync?
OptiSync es una solución integrada diseñada para conectarse sin problemas con varias fuentes de datos, incluidas hojas de cálculo, APIs y tablas.
Características principales:
- Configuración fácil: Configurar su fuente de datos requiere poco código o ningún código, asegurando un proceso rápido y directo.
- Actualizaciones automáticas: Puede vincular su fuente de datos directamente a nuestra aplicación Designer, que actualizará automáticamente su contenido.
- Datos en tiempo real: Esto garantiza que su pantalla digital siempre refleje los datos más recientes, eliminando la necesidad de entrada manual, reduciendo errores y ahorrando tiempo.
Casos de uso:
OptiSync es ideal para una amplia gama de casos de uso, como:
- Mostrar cumpleaños de empleados
- Menús de restaurantes
- Aniversarios laborales
- Catálogos de productos
- Presentaciones de equipo
- ¡Y muchos más!
Con OptiSync, sus pantallas digitales permanecen precisas y actualizadas, mejorando la comunicación y el compromiso en varios entornos.
Agregar su fuente de datos
Puede agregar su fuente de datos a través de Configuración de cuenta o a través de la aplicación Designer.
Configuración de cuenta
- Haga clic en el nombre de su cuenta en la esquina superior derecha
- Seleccione Más
- Seleccione DataSources
- Seleccione Add DataSource
- Elija su fuente de datos de la lista de opciones y siga las instrucciones sobre cómo importarla
- Si abre completamente la configuración de su cuenta, estará bajo "Advanced" en la columna de la izquierda
Aplicación Designer:
- Abra la aplicación Designer
- Seleccione DataSources de la columna de la izquierda
- Seleccione Add DataSource
- Elija su fuente de datos de la lista de opciones y siga las instrucciones sobre cómo importarla
Siga estas guías para cargar diferentes tipos de DataSources:
- Cómo agregar Google Sheets como DataSource para OptiSync
- Cómo agregar una hoja de cálculo de Microsoft 365 Excel como DataSource para OptiSync
Además, puede integrar y probar solicitudes de API, y ejecutar cualquier código necesario antes o después de la solicitud.
Una vez que su fuente de datos esté configurada, puede ver Where Used, Edit la fuente de datos y/o Duplicate.
- Where Used: Esto mostrará cuáles de sus diseños están usando esta fuente de datos. Esto es útil para rastrear el uso de esta fuente de datos en diferentes recursos.
- Edit Data: Ingrese a su fuente de datos y realice actualizaciones/cambios.
- Duplicate: Esto creará una copia de su fuente de datos.
Ingresar su fuente de datos en Designer
Una vez que su fuente de datos esté configurada, puede conectarla a la aplicación Designer.
Vaya a DataSource en el lado izquierdo del menú lateral.
Como se mencionó anteriormente, puede agregar su DataSource aquí. O, si ya lo ha creado en la sección de fuente de datos de Advanced, entonces debería aparecer bajo Other DataSources.
Seleccione su fuente de datos.
Arrastre y suelte los elementos de la fuente de datos en el lienzo de Designer.
- Puede arrastrar y soltar una fila completa o los aspectos individuales dentro de las filas.
Aparecerá un mensaje emergente preguntando: "Would you like to use this data in a Repeater or on its Own?"
-
Use on its own: Será un elemento por sí solo y se actualizará automáticamente según la fuente de datos.
-
Use in a Repeater: Esto incluirá el elemento de fuente de datos en un componente Repeater.
- Repeater es una herramienta que se puede usar en la aplicación Designer para mostrar y repetir una lista de elementos de forma dinámica.
| IMPORTANTE |
| OptiSync no admite caracteres especiales (es decir, cualquier cosa fuera del alcance de un teclado en inglés). Esto hará que los datos del sistema se lean como en blanco y no se mostrarán. |
Editar y diseñar su repetidor en Designer
¡Puede editar tanto la plantilla como el repetidor en Designer!
El repetidor se puede encontrar en el menú lateral de la aplicación Designer.
Dentro de la sección de repetidores, contendrá varios "Repeater components" y "Repeater Templates" listos para usar.
| ¿Cuál es la diferencia entre los dos? |
|
Repeater Component: diseñado para administrar y mostrar elementos repetitivos junto con algunos elementos de diseño. Puede incorporar este componente repetidor en cualquier diseño de plantilla de su elección; no necesita ser una plantilla de repetidor. Una vez agregado, simplemente lo conecta a su fuente de datos. Piense en él como un widget que se puede implementar y personalizar fácilmente en diferentes diseños para mostrar datos de forma dinámica. |
|
Repeater Template: diseñado específicamente para mostrar elementos repetitivos dentro de una plantilla predefinida o diseño. Como otras plantillas, reemplazará cualquier diseño existente cuando se aplique. Aún puede realizar ediciones y cambios según lo desee. Nuevamente, los usuarios solo necesitarán descargarlo y conectarse a su fuente de datos deseada. |
Cualquiera de estos elementos puede tener un DataSource mapeado a ellos, luego editarse de la misma manera que cualquier otro componente de Designer.
Para obtener más información sobre esto, consulte nuestras guías:
También puede ajustar el formato de un repetidor seleccionándolo y luego seleccionando Settings.
Esto abrirá la sección Data Mapping para el repetidor en el menú lateral:
Luego, se presentarán estas opciones:
- Replace DataSource: Cambie su DataSource
- Manage: Realice cambios en la información de su DataSource.
- Filter: Aplique filtros basados en condiciones en el DataSource. Las condiciones de filtro se pueden aplicar usando valores fijos o atributos del dispositivo.
- Disconnect: Desconecte su DataSource del repetidor
-
Empty Data Handling: Cuando no hay elemento DataSource, el comportamiento predeterminado es usar un valor en blanco. Puede ajustar esto con las siguientes opciones:
- Skip: Omitirlo o deshacerse de elementos repetidores adicionales si no hay suficientes datos para alcanzar el "Total de elementos mostrados por página" establecido.
- Use Default Value: Mostrar contenido predeterminado, que es como se ve su elemento repetidor por sí solo.
- Use Blank: El repetidor no mostrará nada.
- Spacing Between Items: Aumente o disminuya el espacio entre los elementos del repetidor.
-
Item Display Direction: Cambie el posicionamiento de las filas de su DataSource dentro de los elementos del repetidor.
- Left To Right: Mostrará las filas de izquierda a derecha.
- Top To Bottom: Mostrará las filas de arriba hacia abajo.
- Item Display Alignment: Cambie la alineación de los elementos restantes (menos que los elementos configurados) para alinearlos izquierda/centro/derecha o arriba/centro/abajo.
- Total Items Displayed per Page: Aumente o disminuya cuántos elementos del repetidor desea que se muestren.
- Maximum Items in Each Row/Column: Aumente o disminuya cuántos elementos del repetidor desea que se muestren en cada fila/columna.
- Additional Row/Column Spacing: Aumente o disminuya el espaciado entre filas/columnas.
- Duration (seconds): Ajuste la duración del tiempo durante el cual se muestra cada elemento del repetidor antes de cambiar.
- Shuffle: Mezcle aleatoriamente los elementos en su DataSource para mostrarlos en el repetidor.
Si edita un repetidor, replicará sus actualizaciones para cada instancia de datos en el conjunto de datos.
- Esto permite una apariencia consistente en elementos similares sin necesidad de diseñar cada uno individualmente.
Si desea usar una plantilla o componente de repetidor específico y desea actualizar el DataSource de muestra a uno de sus DataSources, siga los pasos que se muestran a continuación:
Cómo usar la función de mapeo de propiedades
Esta función avanzada le permite cambiar la apariencia de datos específicos en su repetidor según las condiciones establecidas por el usuario. Estas condiciones, definidas en la fuente de datos, se asignan a los valores o elementos correspondientes en el repetidor, y luego se aplica el formato especificado.
- En Designer, haga doble clic en el repetidor que desea cambiar. (Esto abrirá el Editor de repetidor.)
- Seleccione el elemento en el repetidor que desea editar, luego haga clic en Settings en la parte superior
- Haga clic en Advanced Options en el menú lateral
- Haga clic en + Property Mapping (Presionará esto para cada nueva instancia de mapeo que desee)
- Al hacer clic en el menú Property, seleccione una de las opciones del menú desplegable que se muestra arriba o escriba manualmente una de las opciones disponibles que se enumeran a continuación.
- Al hacer clic en el menú Value, seleccione el nombre de columna correspondiente (Esta información se extrae de su DataSource).
- Repita esto tantas veces como desee para múltiples elementos dentro de su repetidor.
- Haga clic en Update para asegurarse de que esta información se guarde y aplique a su repetidor.
Aquí están las opciones de mapeo de propiedades listadas en la configuración avanzada:
| Propiedad | Qué hace | Valor |
| Fill Color | Cambia el color de una forma o texto seleccionado en su repetidor | Acepta un valor Hex color válido o nombre de color (p. ej., #CE657E o Red) |
| Font Size | Cambia el tamaño de una fuente de texto y cómo aparece en las pantallas | Acepta valor numérico (p. ej., 20) |
| Font Family | Cambia la fuente de un texto seleccionado, como Arial, Times New Roman o fuentes personalizadas. | Acepta valores de cadena que representan la familia de fuente. (p. ej., Times New Roman) |
| Background Color | Cambia el color de fondo de una forma o texto seleccionado en su repetidor. | Acepta un valor Hex color válido o nombre de color (p. ej., #CE657E o Red) |
| Font Weight | Cambia el peso o grosor de la fuente de texto, haciéndola parecer más clara o más negrita. | Acepta valores específicos: normal, bold, lighter, bolder, unset, o 100, 200, 300, 400, 500, 600, 700, 800, 900 |
| Underline | Especifica si desea que el texto esté subrayado para enfatizarlo. | Valor booleano; acepta true/false o 0/1 |
| Linethrough | Especifica si desea una línea tachando el texto. | Valor booleano; acepta true/false o 0/1 |
| Overline | Especifica si el texto tiene una línea superior. | Valor booleano; acepta true/false o 0/1 |
| Text Align | Cambia la alineación horizontal del texto. | Acepta valores específicos: left, center, right, justify, justify-left, justify-center, justify-right |
| Stroke Color | Cambia el color del trazo/contorno | Acepta un valor Hex color válido o nombre de color (p. ej., #CE657E o Red) |
| Stroke Width | Especifica el ancho del trazo, que determina qué tan grueso o delgado es el contorno. | Acepta un valor numérico. |
| Direction | Establece la dirección del texto: de izquierda a derecha o de derecha a izquierda | Acepta valores específicos: ltr o rtl |
| Visible | Determina si el elemento es visible o no. | Valor booleano; acepta true/false o 0/1 |
| Opacity | Cambia el nivel de transparencia de una forma, texto o foto seleccionada en su repetidor | Acepta un valor numérico de 0-1 (p. ej., 0.2 es 20%) |
Aquí hay un ejemplo de una muestra de DataSource configurada con Fill Color, Background Color, Opacity, Font Weight y Text Align:
Cómo usar las opciones de formato de visualización
Si desea cambiar el formato de ciertos datos de su DataSource en su repetidor, puede hacerlo con la opción Display Format disponible en el Editor de repetidores. Esto le ahorra tiempo de editar su DataSource original y aplicará el formato a todos los elementos repetidos en el repetidor.
Siga los pasos en la sección anterior sobre Property Mapping para acceder a las opciones de Display Format.
| Opción de formato de visualización | Qué hace |
| Text | Esto mostrará el valor sin formato. |
| Date Time | Puede cambiar la zona horaria, el formato de fecha y el formato de hora con las opciones disponibles. |
| Number | Puede formatear números para mostrarlos como porcentajes, decimales, moneda y más. |
Enviar a las pantallas
Una vez que su diseño esté completo, está listo para enviar a la pantalla.
(Aquí hay una guía si necesita más ayuda con esto.)
Su pantalla se actualizará automáticamente según su fuente de datos conectada.
Ya no necesita actualizar manualmente sus datos, lo que consume tiempo y es propenso a errores.