Editor visuale de las Vistas de Usuario

El editor visual permite compondere una vista arrastrando widgets sobre un canvas. Los cambios se guardan en el borrador y el estado de guardado se muestra en la barra superior.

Barra de herramientas

Las acciones principales son:

• Deshacer y Rehacer;
• Página, para agregar una nueva página;
• Datos, para gestionar las fuentes;
• Widget vista, para encontrar y controlar los widgets ya insertados;
• Vista previa;
• selección y comparación de Versiones;
• Publicar.

Antes de cerrar el editor, esperar que el estado confirme el guardado.

Páginas

Una vista puede contener varias páginas. Las pestañas sobre el canvas permiten:

• seleccionar la página actual;
• agregar una página;
• renombrarla;
• reordenarla;
• eliminarla cuando no es necesaria.

El widget Navegador páginas hace disponible la misma navegación en la vista publicada.

Canvas y cuadrícula

El canvas usa una cuadrícula de 48 columnas, para hacer más preciso el posicionamiento. Las vistas creadas con la anterior cuadrícula de 24 columnas se actualizan automáticamente sin cambiar el ingrado visual de los widgets. Arrastrar un widget de la paleta y soltarlo en la posición deseada.

Cada widget puede ser:

• movido;
• redimensionado;
• duplicado;
• eliminado;
• configurado desde el panel Propiedades.

Los comandos de zoom permiten reducir o agrandar el canvas, restaurar el 100% o usar Adaptar para mostrar todo el área disponible.

Para cada página es posible configurar ancho, alto, adaptación automática al viewport, fondo, visibilidad de la cuadrícula y política de actualización de datos.

La opción Actualización de datos ofrece tres modos:

• Solo al cargamiento inicial de la vista, predeterminado: al abrirse se cargan todas las páginas y los datos se reutilizan durante la navegación;
• También a cada apertura de página: al volver a la página, los widgets ejecutan nuevamente las consultas;
• Automático mientras la página está visualizada: la página activa se actualiza en el intervalo configurado, que no puede ser inferior a 30 segundos.

Filtros, drill, comandos de actualización y actualizaciones requeridas por las acciones Workflow continúan recargando los datos interesados incluso en la modalidad predeterminada.

Paleta de widgets

La paleta está dividida por familias.

Familia	Ejemplos
Datos	Gráficos de barras, líneas, área, torta y donut; KPI; gauge; tabla; detalle de registro; mapas.
Contenido	Texto, título de sección, imagen, HTML seguro y, si está habilitado, widgets custom.
Diseño	Separador, panel, panel plegable, sidebar, pestañas y drawer.
Navegación	Enlace Sybot y navegador páginas.
Controles	Actualización, filtros, filtros activos, reset y visibilidad widget.
Workflow	Inicio, acciones en registro, acciones múltiples, estado, log y consola Workflow.
Diagnóstico	Estado de la vista, de las fuentes y de las operaciones disponibles.

El campo Buscar widget filtra la paleta por nombre.

Catálogos reutilizables

Los botones Widget custom e Imágenes, arriba de la búsqueda, abren los catálogos compartidos. Es posible pasar de la vista a previsualización a la lista detallada, buscar los elementos y seleccionarlos uno o más para importar o exportar. El panel a la derecha muestra propietario, usuarios autorizados y Vistas en donde el elemento ya está usado.

• un Viewer puede usar el elemento en una Vista que puede modificar;
• un Editor puede también sobrescribir el elemento del catálogo con una nueva revisión;
• el Owner gestiona comparticiones y eliminación.

La eliminación resume usuarios y Vistas interesados, pero no elimina las copias ya insertadas: cada Vista resta autonoma. Para el mismo motivo, modificar una copia local no actualiza silenciosamente el catálogo. El owner gestiona los accesos buscando el singolo usuario por nombre, username o email y asignandole el grant Viewer o Editor; el panel no carga la anagrafica completa de usuarios.

Nel relativo editor, Promover al catálogo hace reutilizable un Widget personalizado. Las imágenes locales pueden ser promovidas del Catálogo de Imágenes de la Vista; seleccionando una imagen compartida se crea una copia local. En el catálogo de imágenes se pueden seleccionar o arrastrar varios archivos juntos. La vista previa de un Widget personalizado en el catálogo es estática cuando el componente requiere JavaScript o datos: la ejecución completa ocurre después de la inserción en la Vista.

Propiedades de la vista

La sección Vista controla:

• descripción;
• tema claro, oscuro o de sistema;
• carácter;
• densidad;
• espaciado;
• disponibilidad de los filtros avanzados en el runtime.

Las propiedades del widget seleccionado dependen de su tipo e incluyen contenido, fuente de datos, formatos, estilo, comportamiento y interacciones.

Para Filtro de categorías es posible elegir separadamente la modalidad de entrada y la selección única o múltiple. Para los widgets que inician Workflow, la sección Interacciones muestra los parámetros no archivo del Workflow seleccionado: cada parámetro puede usar el default del Workflow, un default guardado en el widget o una fórmula fx. La opción dedicada establece si el panel de parámetros debe aparecer antes del inicio y en la Vista previa.

Para los gráficos de líneas y de área, Datos y visualización incluye también el grupo dedicado al aspecto de la línea. Es posible elegir espesor, tamaño y forma del indicador de puntos — ninguno, círculo, cuadrado, triángulo, línea vertical o X — y usar una línea Rota o una Curva Suavada. Las configuraciones se aplican a todas las series del widget, mientras que el color resta configurable para serie individual.

Contenedores

Paneles, barra lateral, pestañas y cajones pueden contener otros widgets.

• Panel: agrupa elementos con una cuadrícula interna.
• Panel plegable: puede ser abierto o cerrado por el usuario y usa toda la altura asignada al widget, dejando a los contenidos el espacio disponible debajo de la cabecera.
• Barra lateral: se ancla a la izquierda o a la derecha y puede partir cerrada.
• Pestañas: dividen los widgets en vistas locales al mismo contenedor.
• Cajón: muestra información en un panel superpuesto, a menudo en respuesta a una selección.

El panel Vista Widget ayuda a identificar los widgets anidados y a controlarlos su visibilidad en diseño y en el runtime sin eliminarlos. Cada entrada usa la misma icono con la que el tipo de widget es identificado en la paleta; rellenos y líneas muestran en cambio la relación entre contenedores y hijos.

Estilo y Formateo

Cada widget puede heredar el estilo de la vista o usar configuraciones específicas para:

• colores y tipografía;
• fondo y borde;
• espaciado y alineamiento;
• sombra y radio de esquinas;
• cabecera e icono;
• formato de números, fechas y moneda; el idioma y la moneda se eligen de listas de valores soportados y usan respectivamente it-IT y EUR como valores predeterminados.

La formateo condicional aplica un estilo cuando una regla sobre los datos resulta verdadera. Las condiciones se evalúan en el orden mostrado y prevalece la primera satisfecha.

La visibilidad dinámica muestra un widget solamente cuando la fórmula configurada devuelve verdadero. La regla aplicada a un contenedor involucja también a sus hijos.

HTML y Widgets Personalizados

El widget HTML seguro acepta contenido HTML controlado; los elementos no permitidos se eliminan.

El Widget personalizado, cuando está habilitado por el administrador, usa un editor separado para HTML, CSS, JavaScript, fallback PDF y Vista previa aislada. El código se ejecuta en un área aislada y puede interactuar con la vista solamente a través de las funciones que ponen a disposición el editor.

Cuando el widget usa una Fuente de datos, el contexto inicial pasado al código contiene ya el primer result set tanto en Vista previa como en la Vista publicada. Las variaciones sucesivas se comunican como actualizaciones del contexto.

No inserte credenciales o información reservada en el código: el contenido publicado puede ser consultado por el navegador.

Importación y Exportación de Catálogos

Mejores Prácticas

• Diseñar primero la jerarquía de la información;
• Limitar el número de gráficos simultáneos;
• Usar títulos y mensajes sin datos comprensibles;
• Verificar siempre el tema claro y oscuro;
• Probar diseños, filtros y contenedores en Vista previa;
• Usar el widget Diagnóstico en un área dedicada cuando la vista combina muchas fuentes o Flujos de Trabajo.

Ambos catálogos permiten la selección múltiple y producen paquetes JSON importables. En presencia de un elemento ya existente, la importación propone reutilización, sobrescritura cuando se autoriza, duplicación con un nuevo nombre o exclusión.

También la exportación de una Vista propone widgets personalizados e imágenes como dependencias opcionales. Durante la importación de la Vista, Sybot muestra las dependencias incluidas y permite aplicar la política deseada a cada una. Cuando se crea un duplicado, las referencias se actualizan automáticamente. Las copias ya incorporadas en la Vista permanecen disponibles incluso si la dependencia correspondiente del catálogo se ignora.