Guía del usuario para navegar la interfaz de usuario en Jitterbit App Builder

Descripción general

Esta guía recorre la navegación de la interfaz de usuario de App Builder, cubriendo los siguientes temas:

• Servicio de diseño de paneles: Los bloques de construcción que App Builder utiliza para diseñar una página: paneles, diseños, diapositivas y tamaños de pantalla.
• Navegación en App Builder: Cómo se organizan las páginas y los paneles, y una descripción general de cada tipo de panel.
• Navegación entre páginas: Cómo se vinculan las páginas entre sí, incluidos los menús anidados y las páginas emergentes.
• Edición de paneles: Agregar, editar y eliminar datos de paneles, y rastrear cambios con Audit Lite y Full Audit.
• Solución de problemas: Problemas comunes de navegación y cómo resolverlos.

Para obtener ayuda con la instalación y configuración de App Builder por primera vez, consulta la Guía de instalación. Para preguntas adicionales, contacta a vinylinfo@jitterbit.com.

App Builder es una plataforma de desarrollo basada en navegador que permite que múltiples usuarios creen aplicaciones web contra cualquier número de fuentes de datos, para casos de uso que van desde mostrar información de clientes y listas de inventario hasta automatizar actualizaciones de nómina y crear portales de clientes personalizados. App Builder es agnóstico de plataforma: se ejecuta en cualquier navegador moderno, se conecta a fuentes de datos de prácticamente todos los principales proveedores de bases de datos, y su diseño receptivo se adapta automáticamente a cualquier tamaño de pantalla, incluidos dispositivos móviles.

Servicio de diseño de paneles

El Servicio de diseño de paneles es el sistema de diseño receptivo propietario de App Builder: te permite diseñar una página una sola vez, y App Builder la renderiza apropiadamente sin importar el tamaño de pantalla. Una aplicación de App Builder se construye a partir de los siguientes componentes básicos, que el servicio de diseño de paneles organiza (consulta también Panel, Página, Diseño y Control en el glosario):

• Panel: El bloque de construcción básico de una página. App Builder siempre muestra al menos un panel, incluso en la pantalla más pequeña. Un panel presenta información al usuario, ya sea una colección de filas de datos o un solo registro, formateado de manera estructurada (tabular horizontal o vertical) o desestructurada y personalizada.

• Página: Una colección de paneles. Una página podría tener solo un panel, o varios.

• Diseño: Define cómo se muestran los paneles cuando todos son visibles en la pantalla a la vez. Por ejemplo, los paneles se pueden apilar verticalmente (panel A encima del panel B) u horizontalmente (panel A a la izquierda del panel B). App Builder también admite la agrupación de paneles, de modo que el panel A y el panel B pueden estar uno al lado del otro mientras ambos están arriba del panel C, con A y B formando su propio grupo.

• Diapositiva: Un subconjunto de paneles renderizados en una pantalla a la vez. Cuando no todos los paneles caben en la pantalla, App Builder renderiza el subconjunto apropiado como una diapositiva, y permite al usuario deslizar entre diapositivas para ver el resto.

• Tamaño de pantalla: Medido en altura y ancho de píxeles, y convertido por App Builder en una cantidad de paneles disponibles. Por ejemplo, una pantalla que cabe en un panel es 1x1 (un panel de alto, uno de ancho); una pantalla más ancha que cabe en dos paneles uno al lado del otro pero aún solo un panel de alto es 1x2. El tamaño de pantalla ayuda a App Builder a determinar el mejor diseño para paneles y grupos.

• Control: Lo que un panel muestra: una cuadrícula completa de datos, una sola entrada, un botón, u otras opciones variadas. Los controles permiten a los usuarios elegir qué información muestra la aplicación, y cómo se utiliza.

App Builder utiliza el diseño de una página para determinar qué paneles renderizar y dónde. Dependiendo del tamaño de pantalla, App Builder puede reducir la cantidad de paneles mostrados mientras respeta el diseño; el Servicio de diseño de paneles decide qué paneles omitir y cómo diseñar los que permanecen.

Cuando el servicio de diseño de paneles omite paneles, crea una colección de diapositivas, cada una contiene un subconjunto de paneles diseñados de acuerdo con el diseño de la página. El usuario ve la primera diapositiva inicialmente y puede navegar a cualquier diapositiva adicional para ver el resto.

Navegación en App Builder

El diseño responsivo de App Builder utiliza cuadrículas flexibles basadas en proporciones (porcentajes relativos en lugar de unidades de píxeles fijos) para proporcionar a las aplicaciones una experiencia de visualización consistente en todos los dispositivos. Los paneles se agrupan y se muestran según su orden, un valor que establece el diseñador de la aplicación, siendo los números más bajos los que tienen prioridad. En un dispositivo móvil, App Builder muestra solo los paneles de mayor prioridad en pantalla; se accede a los demás desplazándose con las flechas en la esquina superior derecha o a través del Cajón de acciones. En una pantalla más pequeña en general, puede ser necesario desplazarse adicionalmente para acceder a todos los paneles de la aplicación.

Para comenzar a usar App Builder, ingresa tu nombre de usuario y contraseña en la pantalla de inicio de sesión (contacta a un administrador si no tienes credenciales). La página Menú del sitio muestra entonces todas las aplicaciones a las que tienes acceso, organizadas por prioridad de menú.

Páginas

Una aplicación de App Builder es el conjunto general de paneles y pantallas que cumplen una necesidad específica utilizando los datos disponibles. Cada aplicación contiene al menos una página, donde se muestran los datos en sí. Se accede a cada página desde el menú de navegación o como un enlace en otra página, y las páginas pueden hacer referencia cruzada entre sí usando enlaces de texto y páginas emergentes.

Cada página está compuesta por uno o más paneles, ya sea un único panel grande o varios más pequeños agrupados juntos. Debido al diseño responsivo de App Builder, la cantidad de paneles mostrados a la vez varía según el dispositivo, basándose en el tamaño y la resolución de la pantalla; si una pantalla es demasiado pequeña para mostrar todos los paneles a la vez, App Builder escala y reposiciona automáticamente los paneles de la página para ofrecer la mejor experiencia.

Páginas de asistente

Las páginas de aplicaciones de App Builder admiten tres opciones de diseño:

• Lado a lado: App Builder muestra paneles de izquierda a derecha, según el orden.
• Apilados: App Builder muestra paneles de arriba a abajo, según el orden.
• Asistente: App Builder muestra paneles uno a la vez, con botones para navegar entre ellos.

Lado a lado y Apilados son directos: afectan la forma en que se distribuyen los paneles en la página. Asistente en cambio afecta la forma en que se presenta la página completa, mostrando paneles uno a la vez con botones Anterior, Siguiente y/o Finalizar.

En la mayoría de las páginas de aplicación, haz clic en un botón Editar o en el icono de edición Lápiz para editar los campos de una tabla de datos. En páginas de Asistente, haz clic en cualquier campo para que todos los campos de ese panel sean editables; navega hasta el último panel y haz clic en Finalizar para guardar los cambios, o haz clic en la X en la esquina superior derecha para cerrar la página sin guardar.

Paneles

Cada panel está compuesto por controles. Un control es un conjunto definido de datos que se muestra dentro de un panel, desde un subconjunto de las columnas de una tabla de base de datos hasta un botón o los valores de un gráfico. El tipo de panel utilizado determina cómo se muestra un control.

Cuando un panel contiene más controles de los que caben en la pantalla, haz clic en el icono de Flecha hacia arriba en la esquina superior derecha del panel para maximizar el panel y acceder a todos los controles. Haz clic nuevamente para devolver el panel a su tamaño predeterminado.

App Builder agrupa sus tipos de panel en las mismas tres categorías que se muestran en el diálogo Crear un Panel: Dinámico, Reporte y Caso Extremo. Consulta Paneles para la referencia completa; las secciones a continuación cubren los mismos tipos de panel en el contexto de la navegación cotidiana.

Cuadrícula

Cuadrícula es el tipo de panel básico para mostrar múltiples filas de datos a la vez. Este tipo de panel muestra columnas específicas de la tabla u objeto de origen de datos seleccionado. Haz clic en el título de una columna para ordenar sus filas en orden ascendente o descendente.

El número total de filas en un panel Cuadrícula aparece en la esquina superior derecha, por encima de los títulos de las columnas. Dependiendo del recuento total de registros, App Builder puede mostrar solo un subconjunto de filas a la vez; haz clic en Cargar más filas, en la parte inferior del panel, para cargar más.

Los paneles Cuadrícula permiten guardar, buscar y filtrar sus tablas de datos, lo que facilita trabajar con filas específicas. Haz clic en el icono Guardar, en la esquina superior derecha del panel, para guardar la tabla de datos; un diálogo de guardado te permite elegir dónde guardar el archivo. App Builder guarda las tablas de datos como archivos CSV (Valores Separados por Comas), un formato basado en texto y estructurado en tablas que se abre en casi cualquier programa de hojas de cálculo o gestión de bases de datos.

Haz clic en el icono Buscar para abrir una barra de búsqueda en la parte superior del panel, luego escribe una palabra clave y presiona Intro para buscar.

Haz clic en el icono Filtro, en la esquina superior derecha del panel, para filtrar una tabla de datos hacia solo las filas que coincidan con criterios específicos. Esto abre una ventana emergente que lista los títulos de las columnas:

Introduce tus criterios de filtro en el cuadro de texto, luego haz clic en Ejecutar Filtro. Puedes filtrar por múltiples valores o criterios a la vez.

App Builder entonces muestra un encabezado con los criterios de filtro aplicados, y solo las filas que coincidan con él. Haz clic en la X en la esquina derecha del encabezado de criterios para quitar el filtro.

Formulario

Los paneles Formulario muestran una única línea de datos del origen de datos seleccionado. Este tipo de panel es especialmente útil como ventana emergente o página de detalle. Cuando un panel Formulario tiene múltiples controles, cada uno se muestra individualmente.

Mosaico

Los paneles 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 organizan datos de las tablas u objetos de origen en bloques de izquierda a derecha en lugar de en columnas. Al igual que con los paneles Formulario, los controles se agrupan con otros controles en la misma posición en la tabla de datos.

Navegador de Archivos

Los paneles Navegador de Archivos se vinculan a un sistema de archivos local o de red y se ven similares a un directorio de archivos. Este tipo de panel permite a los usuarios cargar archivos en un servidor y descargarlos en un dispositivo, y admite la navegación de subdirectorios, indicados por un icono de carpeta.

HTML Personalizado

Los paneles 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 asemejan estrechamente a una página web estándar.

Gráficos

Los paneles Gráfico muestran datos en una representación gráfica. App Builder admite muchos tipos de gráficos, incluyendo Barras, Columna, Línea y Área. Los gráficos pueden vincularse a sus datos subyacentes, por lo que un usuario puede hacer clic para ver los registros 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 utilizado por 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.

Las opciones de tipo Gráfico incluyen Barra 3D, Columna 3D, Dona 3D, Pastel 3D, Área, Área apilada, Barra, Burbuja, Columna, Embudo, Línea, Marimekko, Mixto, Área de porcentaje, Pastel, Pirámide, Dona semicircular, Spline, Barra apilada y Columna apilada.

Para imprimir un panel de Gráfico, se hace clic en el menú Cajón de acciones en la esquina derecha del panel y se selecciona Imprimir gráfico. Se puede descargar el gráfico como imagen vectorial .PNG, .JPEG, .PDF o .SVG.

Gantt

Gantt es un tipo de panel que muestra un gráfico de Gantt, útil para la planificación y programación de proyectos: ayuda a evaluar cuánto tiempo debe tomar un proyecto, determinar los recursos que necesita y planificar el orden en que se completarán sus tareas. Los gráficos de Gantt también son útiles para gestionar dependencias entre tareas.

Para utilizar un gráfico de Gantt en un panel de Gantt, se necesita un objeto de negocio que contenga información para los controles que requiere. Los gráficos 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.

Tipos de control opcionales

• Fecha de finalización: Representa la fecha de finalización de la tarea.
• Color: Valor de color para la tarea en el gráfico.
• Dependencia: Determina la relación de la tarea con las otras tareas de las que depende.
• Tarea principal: Una referencia a otra tarea del objeto de negocio, utilizada para el arreglo jerárquico.
• Ordenar: Permite aplicar ordenamiento al valor seleccionado.
• Grupo de tareas: Se utiliza para agrupar o colocar múltiples tareas en la misma fila.

Frame

Los paneles de Frame reservan un espacio en la pantalla donde se cargan todos los enlaces de página en los que se hace clic. El tipo de panel de Frame no tiene contenido propio: cuando existe un panel de Frame en una pantalla, la navegación se dirige hacia él en lugar de reemplazar toda la pantalla. Este tipo de panel se utiliza frecuentemente para mantener visible un menú lateral persistente, mientras que el contenedor del panel de Frame renderiza la página dentro de él. Para obtener más detalles, incluido cómo vincular fuera de un panel de Frame, consulta Panel Frame.

Calendario

Los paneles de Calendario se rellenan con información de la fuente de datos seleccionada. Al igual que los paneles de Gráfico, los paneles de Calendario se pueden vincular a otro panel para mostrar mayor detalle sobre un evento en el calendario.

Tipos de control requeridos

• Descripción: Designa lo que aparece en el calendario; típicamente el nombre del evento.
• Inicio del evento: Designa el día en que comienza el evento; puede incluir marcas de tiempo mostradas junto a la descripción del evento.
• Fin del evento: Designa el día en que termina el evento; puede incluir marcas de tiempo mostradas junto a la descripción del evento.

Tipos de control opcionales

• Color: Valor de color utilizado por el calendario para indicar eventos.
• Ordenar: Permite aplicar ordenamiento a los valores seleccionados.

Para cambiar la fecha y hora de un evento:

1. Se selecciona el evento.
2. En el panel que muestra la información del evento, se hace clic en el icono de Lápiz.
3. Se ajusta la fecha y hora según sea necesario, luego se hace clic en el icono de Marca de verificación para guardar.

Para agregar un nuevo evento al calendario:

1. Selecciona cualquier evento existente y haz clic en el botón Agregar.
2. Ingresa un título para el evento, luego selecciona una fecha del menú desplegable del calendario.
3. Para controles con hora y fecha habilitadas, haz clic en el icono Hora para abrir un reloj.
4. Haz clic en el icono Marca de verificación para guardar.
5. Actualiza la página para ver los cambios reflejados.

Pivot

Los paneles Pivot muestran una tabla dinámica con información de una fuente de datos.

Tipos de control requeridos

• Columna: Completa los encabezados de columna.
• Fila: Completa los encabezados de fila.
• Valor: Muestra los datos relevantes de la fuente.

Gráfico de red

Los paneles Gráfico de red muestran 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

• De: El nodo del cual proviene este enlace.
• Nodo: El nodo mismo del Gráfico de red.
• Etiqueta de nodo: La etiqueta del nodo del Gráfico de red.

Tipos de control opcionales

• Objeto de opciones JSON: Objeto JSON que anula las opciones del gráfico.
• Color de enlace: El color del enlace del Gráfico de red.
• Color: Valor de color para un evento o tarea.

Carril

Los paneles Carril muestran información agrupada. Son similares a los paneles Mosaico en que muestran datos agrupados en formato de panel Formulario, pero se pueden configurar vertical u horizontalmente.

Mapa

Los paneles Mapa muestran un mapa en el cual se pueden visualizar controles por 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.

Tipos de control requeridos

• Categoría: País, estado, etc.
• Valor: Valor asociado con la categoría.

Tipos de control opcionales

• Objeto de opciones JSON: 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 los paneles Mapa, consulta el artículo Panel de mapa. Para documentación sobre los mapas fuente proporcionados en el panel Mapa, consulta Highcharts Maps.

Navegación entre páginas

Hay dos formas principales de navegar entre páginas en aplicaciones. En dispositivos de pantalla grande, las páginas se enumeran como enlaces de texto en la esquina superior derecha de la pantalla, y el número mostrado depende del ancho de pantalla disponible. Aunque esta es la forma más rápida y fácil de cambiar entre páginas, no es factible en dispositivos más pequeños, como un smartphone o una tableta.

Sin embargo, se puede acceder a todas las páginas en cualquier momento abriendo el Cajón de acciones. Al hacer clic, el icono del Cajón de acciones se convierte en una X, que luego se puede hacer clic para cerrarlo. Se muestra un encabezado con la aplicación abierta actualmente, así como todas las páginas contenidas en la aplicación. Solo haz clic en la página deseada para ir a ella.

Las páginas se pueden configurar para vincularse directamente entre sí. Este vínculo se puede agregar como un botón, una imagen o un vínculo de texto, un icono de chevron () en el lado derecho de la página, o un panel. Cuando se utiliza un panel para vincular a otra página, su configuración Link Target y Replace Page In History controlan cómo se comporta ese vínculo; ver Configurar cómo se abren las páginas vinculadas a continuación.

Configurar cómo se abren las páginas vinculadas

Un panel utilizado para vincular a otra página tiene dos configuraciones relacionadas en la pestaña Edge Case de su sección Navigation:

• Link Target: Controla dónde se abre la página vinculada, como en la ventana actual o en una nueva pestaña del navegador.
• Replace Page In History: Controla a qué regresa el botón < Back después de que se carga la página vinculada. Normalmente, navegar a una nueva página agrega una nueva parada al historial de páginas, por lo que hacer clic en < Back regresa a la página de la que el usuario acaba de venir. Habilitar Replace Page In History omite ese paso: en lugar de agregar una nueva parada, la página vinculada reutiliza el destino < Back de la parada anterior, por lo que hacer clic en < Back omite la página que el usuario acaba de dejar e ir una página más atrás. Por ejemplo, si una página emergente se vincula a otra página con esta configuración habilitada, < Back lleva al usuario a la página desde la que se abrió la ventana emergente, en lugar de regresar a la ventana emergente. Esto mantiene < Back apuntando a una página consistente para la página vinculada, independientemente de qué página un usuario haya navegado para alcanzarla.

No todos los tipos de panel admiten Link To Page y Link Target.

Si el destino de un vínculo cambia a uno que no es compatible con Replace Page In History (por ejemplo, cambiar Link Target para abrir en una nueva pestaña del navegador en lugar de la actual), App Builder desactiva automáticamente Replace Page In History en lugar de dejarlo habilitado sin efecto.

Link Target también aparece a nivel de control, en la configuración External Link de un control en lugar de la suya propia; ver Configurar vínculos externos en un control. Para vincular directamente el valor de un control a una página, ver Configurar un control como vínculo de navegación. Para vincular desde un panel Frame específicamente, ver Salir del panel Frame.

Menús anidados

Los vínculos de texto de navegación en la parte superior de una página pueden contener menús anidados. Estos menús anidados son una lista expandida de vínculos que se almacenan bajo un encabezado y se puede acceder a ellos haciendo clic en la flecha desplegable junto al encabezado.

Páginas emergentes

A veces, una página no requerirá una redirección completa (como la página de vista de edición o detalle), sino que se puede mostrar en una ventana emergente que aparece sobre una página base. Generalmente, se accede a estas páginas haciendo clic en un vínculo o haciendo clic en el icono Popup. Pueden tener varias páginas o paneles, que se pueden desplazar mucho como una página estándar. Para volver a la pantalla principal, haz clic en la X en la esquina superior derecha.

Paneles de edición

Agregar, editar y eliminar datos del panel

Los desarrolladores de App Builder tienen control total sobre si las opciones Insert, Edit y Delete están disponibles en un panel, dependiendo del caso de uso empresarial. Si aparece un mensaje de validación mientras editas un panel, haz clic en Proceed para continuar, o Cancel para detener.

Para agregar información a un panel, haz clic en el botón Create en la esquina superior izquierda del panel. Aparece un cuadro de texto para cada columna, ya sea en la parte superior o inferior del panel según cómo esté configurado; complétalo y haz clic en el icono Checkmark para guardar, o haz clic en la X para cancelar.

Para eliminar información de un panel, haz clic en su icono de Bote de basura o botón Eliminar, luego haz clic en Proceder si aparece un mensaje de validación.

Para editar información en un panel, haz clic en su icono de Lápiz o botón Editar; aparece un cuadro de texto en cada columna editable. Rellena los campos y haz clic en el icono de Marca de verificación para guardar, o haz clic en la X para cancelar. También se puede configurar un panel para que siempre sea editable; en ese caso, puedes hacer clic directamente en un campo, realizar el cambio y luego hacer clic fuera del campo para guardarlo.

Auditoría lite

App Builder ofrece dos formas de rastrear información de auditoría dentro de una aplicación: Auditoría lite, descrita en esta sección, y Auditoría completa, descrita en Auditoría completa a continuación, que requiere configuración adicional para habilitarse.

Los paneles que necesitan rastrear cambios, especialmente para un proyecto o actualización sensible al tiempo, pueden incluir un botón de Auditoría lite, que rastrea la siguiente información para una tabla:

• AddedBy: El nombre de usuario de la persona que agregó el registro.
• AddedOn: La fecha en que se agregó el registro.
• ChangedBy: El nombre de usuario de la persona que modificó por última vez el registro.
• ChangedOn: La fecha en que se modificó el registro.

Cuando se habilita Auditoría lite, los paneles de Cuadrícula y Formulario en una aplicación muestran estos datos de rastreo. Los usuarios con permiso para leer la información de auditoría de una tabla pueden verla haciendo clic en el botón Auditoría en la aplicación en ejecución.

Auditoría completa

Auditoría completa se habilita de forma predeterminada para las fuentes de datos y tablas recién creadas. Esta función de auditoría complementa Auditoría lite, registrando cambios a nivel empresarial en tus datos para que puedas revisarlos más tarde. Cuando habilitas Auditoría completa, App Builder crea una tabla de registro de auditoría especial, denominada App BuilderAuditLog, en tu fuente de datos y captura los cambios allí para cada tabla con Auditoría completa habilitada.

De forma predeterminada, App Builder no limpia ni purga automáticamente los registros almacenados en la tabla de Auditoría completa. Para cambiar este comportamiento, consulta la función Configuración de auditoría, que permite a un administrador configurar un período de retención después del cual App Builder purga registros de auditoría más antiguos. Para más información, consulta Auditoría completa.

Solución de problemas

No se puede encontrar una selección de menú, página de aplicación o panel, aunque se haya agregado en el lugar correcto

Al navegar por una aplicación, ten en cuenta el tamaño de la pantalla. Debido al diseño responsivo de App Builder, el formato de una página puede cambiar ligeramente en pantallas más pequeñas: los paneles apilados pueden aparecer en un menú navegable en su lugar, o una columna puede ocultarse para mantener visible los datos más importantes. La navegación de la página también puede cambiar de la barra superior al Cajón de acciones.

Una aplicación nueva falta en la lista de aplicaciones, o los cambios en elementos de menú, páginas, paneles o controles no aparecen al probar una aplicación

Actualiza el navegador (F5 en la mayoría de los navegadores) para ver los cambios realizados en las páginas, paneles o controles de una aplicación actualizada. Si la actualización no muestra los cambios, realiza la edición de nuevo y asegúrate de hacer clic en Guardar o Proceder.

Una aplicación está abierta y en ejecución, pero no hay forma de editarla

La capacidad de editar los datos de una aplicación varía según el usuario, en función de los permisos que un administrador ha otorgado. Algunos usuarios pueden no tener permiso para editar páginas; contacta a un administrador para verificar que se haya otorgado permiso de edición.