Paneles en Jitterbit App Builder
Descripción general
Los paneles son los contenedores en las páginas de una aplicación de App Builder que albergan la información que se muestra en su interfaz, como datos, imágenes y controles. Cada página en una aplicación de App Builder está compuesta por uno o más paneles; por ejemplo, una página podría usar un panel Cuadrícula para mostrar múltiples filas de datos a la vez, o un panel Formulario para mostrar los detalles de un solo registro.
El diálogo Crear un panel de App Builder agrupa sus tipos de paneles en tres categorías, cada una descrita en su propia sección a continuación:
-
- Cuadrícula: Múltiples filas de datos con campos que aparecen horizontalmente.
- Mosaico: Datos mostrados como mosaicos, envueltos hacia abajo en la página.
- Formulario: Una sola fila de datos con controles que aparecen verticalmente.
-
- Calendario: Datos mostrados como un calendario, por diferentes vistas.
- Gráfico: Mostrar datos visualmente en una variedad de tipos de gráficos.
- Gantt: Muestra datos como un gráfico de Gantt, para planificación y programación.
- Mapa: Mostrar un mapa para visualizar relaciones geográficas.
- Gráfico de red: Mostrar visualmente las relaciones entre elementos conectados.
- Tabla dinámica: Muestra datos en formato de tabla dinámica.
-
- Chat de agente: Una interfaz de chat para interactuar con los agentes configurados.
- HTML personalizado: Permite mostrar HTML personalizado.
- Panel de diagrama de eventos: Mostrar un flujo de trabajo visual en un panel en tu página.
- Explorador de archivos: Agrega un control de explorador de archivos a tu panel.
- Marco: Reserva espacio en la página para cargar otro contenido.
- Carril: Datos mostrados como mosaicos en una serie de carriles.
Tipos de paneles
Para agregar un panel a una página, ve al App Workbench, abre la pestaña Páginas, luego selecciona una de las páginas de tu aplicación o haz clic para crear una nueva. Esto abre la pantalla de edición de la página, donde el panel Diseño de panel de página te permite configurar todos los paneles de la página. Haz clic en + Agregar panel para abrir el diálogo Crear un panel:

Nota
No todos los tipos de paneles admiten Vincular a página y Destino de vínculo.
Dinámico
Cuadrícula
![]()
Los paneles de Cuadrícula muestran múltiples filas de datos a la vez, mostrando columnas específicas de la tabla u objeto de la fuente de datos seleccionada. Haz clic en el título de una columna para ordenar sus filas en orden ascendente o descendente. El número total de filas aparece en la esquina superior derecha, encima de los títulos de las columnas; dependiendo del número total de registros, App Builder puede cargar solo un subconjunto de las filas a la vez. Haz clic en Cargar más filas, en la parte inferior del panel, para cargar filas adicionales.
Mosaico
![]()
Los paneles de Mosaico combinan el comportamiento de los paneles Cuadrícula y Formulario: como los paneles Cuadrícula, muestran múltiples conjuntos de información a la vez, pero los organizan en bloques de izquierda a derecha en lugar de en columnas. Como con los paneles Formulario, los controles se agrupan con otros controles en la misma posición en la tabla de datos.
Formulario
![]()
Los paneles de Formulario muestran una sola línea de datos de la fuente de datos seleccionada. Este tipo de panel es especialmente útil como ventana emergente o página de detalles en una aplicación. Cuando a un panel de Formulario se le asignan múltiples controles, cada control se muestra individualmente.
Reporte
Calendario
![]()
Los paneles de Calendario rellenan un calendario con información de la fuente de datos seleccionada. Como los paneles de Gráfico, los paneles de Calendario pueden vincularse a otro panel para mostrar mayor detalle sobre un evento en el calendario.
Tipos de control requeridos
- Descripción: Designa qué aparecerá en el calendario; típicamente el nombre de un evento.
- Inicio del evento: Designa qué día comienza el evento; puede incluir marcas de tiempo que se muestren junto a la descripción del evento.
- Fin del evento: Designa qué día termina el evento; puede incluir marcas de tiempo que se muestren junto a la descripción del evento.
Tipos de control opcionales
- Color: Valor de color que utiliza el calendario para indicar eventos.
- Ordenar: Permite aplicar ordenamiento al valor seleccionado.
Para obtener más información sobre paneles de Calendario, consulta Paneles de calendario.
Gráfico
![]()
Los paneles de Gráfico muestran datos en una representación gráfica. App Builder admite muchos tipos de gráficos, incluyendo Barras, Columnas, Línea y Área. Los gráficos pueden vincularse a los datos subyacentes para que un usuario pueda hacer clic y ver los datos de apoyo.
Tipos de control requeridos
- Categoría: Representa el eje X (horizontal) en el gráfico.
- Valor: Representa el eje Y (vertical) en el gráfico.
Tipos de control opcionales
- Color: Valor de color que utiliza el gráfico.
- Ordenar: Permite aplicar ordenamiento al valor seleccionado.
- Bandera: Se utiliza para marcar un evento o punto de interés.
- Objeto JSON de opciones: Objeto JSON que anula las opciones del gráfico.
Para obtener más información sobre paneles de Gráfico, consulta Gráfico.
Gantt
![]()
Los paneles de Gantt muestran diagramas de Gantt, que son útiles para la planificación y programación de proyectos. Ayudan a evaluar cuánto tiempo debe tomar un proyecto, determinar los recursos necesarios y planificar el orden en que se completarán las tareas. Los diagramas de Gantt también son una herramienta útil para gestionar dependencias entre tareas.
Para utilizar un diagrama de Gantt en un panel de Gantt, necesitas un objeto de negocio que contenga información para los controles requeridos. Los diagramas de Gantt también pueden representar dependencias de tareas y grupos de tareas, siempre que esa información esté configurada en el objeto de negocio.
Tipos de control requeridos
- Tarea: Representa una tarea individual del proyecto que se está rastreando.
- Fecha de inicio: Representa la fecha de inicio de la tarea.
- Fecha de fin: Representa la fecha de finalización de la tarea.
Tipos de control opcionales
- Color: Valor de color para la tarea en el gráfico.
- Dependencia: Determina la relación de la tarea con otras tareas de las que depende.
- Tarea principal: Referencia a otra tarea del objeto de negocio, utilizada para la disposición jerárquica.
- Ordenar: Permite aplicar ordenamiento al valor seleccionado.
- Grupo de tareas: Se utiliza para agrupar o colocar múltiples tareas en la misma fila.
Para obtener más información sobre paneles de Gantt, consulta Diagrama de Gantt.
Mapa
![]()
Los paneles de Mapa muestran un mapa donde los controles se pueden visualizar mediante la ubicación geográfica. Se pueden elegir diferentes mapas proporcionados a través de la API de Highmaps según los datos que desees mostrar.
Nota
Los nombres de las regiones del mapa en tu objeto de negocio subyacente deben coincidir con identificadores de los mapas fuente de Highmaps. Por ejemplo, si tienes un objeto de negocio con nombres de condados de EE.UU., los nombres de condados pueden no ser únicos, por lo que debes tener una columna que coincida con la clave de Highmaps.
Tipos de control requeridos
- Categoría: País, estado, etc.
- Valor: Valor asociado con la categoría.
Tipos de control opcionales
- Objeto JSON de opciones: Objeto JSON que anula las opciones del gráfico.
- Color: Valor de color para un evento o tarea.
Para obtener más información sobre paneles de Mapa, consulta Panel de mapa. Para obtener información sobre los mapas fuente proporcionados en el panel de Mapa, consulta la documentación de Highmaps.
Gráfico de Red
![]()
Los paneles de Gráfico de Red muestran las interconexiones entre un conjunto de entidades. Cada entidad se representa mediante un nodo, y las conexiones entre nodos se representan a través de enlaces.
Tipos de control requeridos
- From: Nodo de origen para este enlace.
- Node: Un nodo de Gráfico de Red.
- Node Label: Una etiqueta de nodo de Gráfico de Red. Requerido al usar UUID para relaciones.
Tipos de control opcionales
- JSON Options Object: Objeto JSON que anula las opciones del gráfico.
- Link Color: El color del enlace de Gráfico de Red.
- Color: Valor de color para un evento o tarea.
Para obtener más información sobre los paneles de Gráfico de Red, consulta Gráfico de Red.
Tabla Dinámica
![]()
Los paneles de Tabla Dinámica muestran una tabla dinámica con información de una fuente de datos.
Tipos de control requeridos
- Column: Completa los encabezados de columna.
- Row: Completa los encabezados de fila.
- Value: Muestra los datos relevantes de la fuente.
Para obtener más información sobre los paneles de Tabla Dinámica, consulta Paneles de Tabla Dinámica.
Caso Especial
Chat con Agente
![]()
Los paneles de Chat con Agente proporcionan la interfaz a través de la cual charlas con tus agentes de IA configurados. En estos paneles, los usuarios pueden escribir mensajes y recibir respuestas del agente sin salir de la aplicación.
HTML Personalizado
![]()
Los paneles de HTML Personalizado utilizan plantillas HTML/CSS para mostrar datos e imágenes. Ofrecen un alto grado de control sobre la salida de visualización y se parecen mucho a una página web estándar.
Panel de Diagrama de Eventos
![]()
Los paneles de Panel de Diagrama de Eventos integran un flujo de trabajo visual interactivo en una página, mostrando los eventos configurados en una tabla u objeto empresarial como un diagrama de flujo de proceso BPMN.
Explorador de Archivos
![]()
Los paneles de Explorador de Archivos están vinculados a un sistema de archivos local o de red y se parecen a un directorio de archivos. Permiten a los usuarios cargar archivos en un servidor y descargarlos en un dispositivo. También es posible navegar dentro de subdirectorios, que se indican mediante un icono de carpeta.
Marco
![]()
Los paneles de Marco reservan un espacio en la pantalla en el que se cargarán todos los enlaces de página en los que se haga clic. El tipo de panel Marco no tiene contenido propio: cuando existe un panel Marco en una pantalla, cualquier navegación de página se dirige al marco en lugar de reemplazar toda la pantalla. Este tipo de panel se utiliza con mayor frecuencia para mantener visible un menú lateral persistente mientras el contenedor del panel Marco representa la página de destino dentro de él.
Para obtener más información sobre los paneles de Marco, consulta Panel Marco.
Carril
![]()
Los paneles de Carril muestran información agrupada. Son similares a los paneles de Tile en que muestran datos agrupados en formato de panel de Formulario, pero se pueden configurar ya sea vertical u horizontalmente.
Para obtener más información sobre los paneles de Carril, consulta Panel Carril.