Introducción a App Builder - Apéndice C: La capa de interfaz de usuario en App Builder (Avanzado)

Este es el tercer apéndice de la serie de tutoriales Introducción a App Builder. Estos apéndices complementan las lecciones de la serie y proporcionan información más detallada sobre los conceptos presentados.

En esta lección, profundizaremos en la capa de interfaz de usuario de App Builder, el área donde controlamos directamente lo que ven e interactúan los usuarios finales.

Paneles de mosaicos

Crear páginas con paneles de mosaicos permite mostrar información de una regla de negocio determinada, tal como los paneles de cuadrícula que hemos utilizado en los tutoriales. La elección entre uno u otro depende de la preferencia estética. Con paneles de mosaicos, el acceso a las acciones de crear, editar o eliminar se realiza a través de una página vinculada.

Para demostrarlo, convertiremos nuestra página Empleados existente de paneles de cuadrícula a paneles de mosaicos.

1. Accede a la vista previa de la página Empleados.

2. Haz clic en el icono de hamburguesa para abrir el cajón de acciones y luego selecciona Live Designer.

3. Haz clic en el panel Empleados para que el diseñador en vivo muestre opciones para él.

4. En la pestaña Panel, cambia la selección de Grid a Tile.

5. Observa el campo Tile Width que aparece. Esta configuración, única para paneles de mosaicos, controla el ancho de cada mosaico individual. La altura se determina automáticamente según la cantidad de controles mostrados en el mosaico. Por ahora, déjalo en el valor predeterminado.

6. Haz clic en Save.

Esto transforma la página Empleados, ya que las entradas individuales del objeto de negocio Empleados se muestran en mosaicos en lugar de en una lista. Sin embargo, los mosaicos ahora tienen demasiados controles. Los mosaicos se ven mejor cuando tienen entre tres y cinco controles, así que edita la lista de controles, ya sea desde el diseñador en vivo o desde el banco de trabajo de la aplicación, seleccionando los que consideres más importantes. Cuando termines, tu página Empleados se verá similar a esto:

Paneles de gráficos

App Builder ofrece varios tipos de paneles de gráficos. Mostrar gráficos en tus páginas puede ser una herramienta visual poderosa. Para usar paneles de gráficos en tus páginas, los objetos de negocio que alimentan las páginas necesitan valores agregados. Demostraremos esto creando un objeto de negocio con el propósito de usarlo para hacer una página que muestre los empleados en un gráfico organizado por el total de pedidos de cada empleado.

1. Ve a App Workbench > Rules y haz clic en + Rule.

2. Dale al nuevo nombre de regla OrderDetail (Total by Employee), luego selecciona Chart en el campo Purpose y OrderDetail en Target. Haz clic en Create.

3. Cuando App Builder crea la regla, agrega la tabla Order en la pestaña Tables y selecciona la columna EmployeeID. Esta es la única columna existente que necesitaremos, así que si App Builder ha seleccionado automáticamente otras, deselecciónalas.

4. En la pestaña Joins, realiza una combinación interna usando Order como la columna Left y Order Detail como la Right.

5. Aún en la pestaña Joins, asegúrate de que el panel Join Columns esté combinando las columnas OrderID de ambas tablas.

6. En la pestaña Columns, haz clic en + Column y, en el campo Column or Expression, ingresa esta sintaxis:

   SUM(OD.Quantity*OD.UnitPrice*(1-OD.Discount))

   En Alias, ingresa SumLineTotal.

7. Haz clic en Save.

8. Aún en la pestaña Columns, asigna a cada una de las dos columnas un Usage Type:

   • Para EmployeeID, elige Category. Esto define cómo se agrupan los datos (por ejemplo, las etiquetas en el eje X de un gráfico de barras).

   • Para la columna SumLineTotal que creamos, elige Value. Esto representa los datos numéricos a mostrar en el gráfico (por ejemplo, la altura de las barras en el eje Y).

9. Haz clic en Results en el panel Rule para asegurarte de que la regla está calculando el total vendido por cada empleado, así:

   

Ahora que el objeto de negocio que necesitaremos está listo, creemos nuestra página de paneles de gráficos.

1. Ve a App Workbench > Páginas y haz clic en + Página.

2. En Ingresa un nombre de página, escribe Order Total by Employee. Haz clic en Siguiente.

3. Selecciona Reportes como el menú. Esto colocará la nueva página bajo un nuevo menú llamado Reportes que aparecerá entre Inicio y Configuración. Haz clic en Siguiente.

4. Selecciona Página completa como el diseño de página. Haz clic en Siguiente y Finalizar.

5. Una vez que App Builder crea la página, haz clic en + Elegir tipo de panel.

6. Selecciona Gráfico como el tipo de panel. Haz clic en Siguiente.

7. Elige OrderDetail (Total by Employee) como el panel de origen. Haz clic en Siguiente y Finalizar.

App Builder creará la página y puedes visitar su vista previa:

Ordenar datos del gráfico

Puedes aplicar ordenamiento a tus gráficos para hacerlos más fáciles de interpretar y analizar. Puedes ordenar un gráfico por su columna de Valor o por un criterio completamente diferente que no esté en la tabla. Para demostrarlo, ordenemos nuestro gráfico por la fecha de contratación de los empleados.

1. Ve a App Workbench > Reglas y encuentra la página OrderDetail (Total by Employee). Este es el objeto de negocio en el que se basa el gráfico.

2. En la pestaña Tablas, localiza la tabla Employee y selecciona la columna HireDate.

3. A continuación, en App Workbench > Páginas, abre la página Order Total by Employee y ve a su página de controles.

4. Haz clic en + Control para agregar un nuevo control. En el diálogo Agregar un control, selecciona la columna Hire Date. Es crucial que en el campo Tipo de control, selecciones Ordenar. Completa la adición del nuevo control.

5. (Opcional) Una vez que se agrega el nuevo control, haz clic en su icono al final de la fila y visita la pestaña Posición y ancho. En el campo Dirección de ordenamiento, puedes alternar entre el orden ASC (ascendente) y DESC (descendente).

Si revisitas la vista previa de la página ahora, verás que las barras están organizadas por fecha de contratación del empleado.

Agregar exploración en profundidad del gráfico

Los paneles de gráficos pueden hacerse interactivos agregando navegación, lo que permite a los usuarios "explorar en profundidad" los datos. En el ejemplo que estamos usando, podemos configurar el gráfico para que al hacer clic en la barra de un empleado específico, se navegue al usuario a la página Órdenes, filtrada para mostrar solo las órdenes de ese empleado.

1. Regresa a la lista de Controles de la página Order Total by Employee.

2. Haz clic en el icono al final de la fila para editar el control Sum Line Total (el control de Valor).

3. Abre la pestaña Caso extremo.

4. Abre la sección Configuración de navegación rara.

5. En el campo Vincular a página, selecciona la página Órdenes.

6. Haz clic en el icono de vinculación para asegurarte de que App Builder ha vinculado las dos páginas correctamente. La Columna de origen debe ser EmployeeID (PK).

Ahora, al ver el gráfico, puedes hacer clic en cualquier barra para ir a la página Órdenes, que filtrará automáticamente sus datos para mostrar solo las órdenes realizadas por los clientes del empleado en el que hiciste clic.

Otras formas de gráficos

Los gráficos se pueden configurar con múltiples categorías o valores para mostrar relaciones de datos más complejas.

• Múltiples categorías: Puedes agrupar datos por más de una categoría. Por ejemplo, agregar Región como categoría principal y Empleado como categoría secundaria agruparía primero las ventas por región y luego por empleado dentro de cada región. Esto a menudo se visualiza usando un gráfico de barras apiladas o agrupadas.

• Múltiples valores: Puedes mostrar múltiples valores numéricos para cada categoría. Esto es común en tipos de gráficos mixtos, donde podrías mostrar totales de ventas como barras (en un eje Y) y descuento promedio como una línea (en un segundo eje Y) para el mismo empleado.

Hora de practicar: Agregar una segunda categoría

Modifica el objeto de negocio OrderDetail (Total by Employee) para incluir una segunda categoría. Únete a la tabla Employee, agrega la columna RegionID y establece su Tipo de uso en Categoría. Luego, visualiza el gráfico nuevamente para ver cómo cambia. Es posible que necesites ajustar el tipo de gráfico (por ejemplo, a un gráfico de columnas apiladas) en la configuración del panel para visualizar mejor la nueva estructura de datos.

Visualización de datos avanzada

Más allá de los gráficos estándar, App Builder proporciona paneles especializados para visualizar datos geográficamente, cronológicamente o linealmente. En esta sección, demostraremos los otros tipos de panel que App Builder admite.

Paneles de calendario

Los paneles de calendario son excelentes para visualizar eventos a lo largo del tiempo. Agregaremos un calendario a la página Customers que muestre cuándo se enviaron los pedidos de un cliente específico.

1. Crea el objeto de negocio:

   1. Ve a App Workbench > Rules y haz clic en + Rule.

   2. Nómbralo Order (Calendar).

   3. Establece el Purpose en Calendar y el Target en Order.

   4. Haz clic en Create.

   5. En la pestaña Tables, selecciona OrderNumber, ShippedDate y CustomerID.

   6. En la pestaña Columns, establece el Tipo de uso para OrderNumber en Description y ShippedDate en Start.

2. Agrega el panel:

   1. Ve a la página Customers.

   2. Agrega un nuevo panel de tipo Calendar y selecciona Order (Calendar) como fuente.

   3. App Builder debería vincular automáticamente este panel al panel principal Customers usando CustomerID.

   4. Nombra el panel Order Calendar.

Ahora, cuando selecciones un cliente, este calendario mostrará sus envíos.

Además, también puedes vincular el calendario a la página Orders. De esta manera, cuando un usuario selecciona un cliente y sus pedidos aparecen en el calendario, se puede hacer clic en cada uno de ellos, llevando al usuario a los detalles de ese pedido. Sigue estos pasos:

1. Navega a la vista previa de la página Customers.

2. Abre el Live Designer y selecciona el panel de calendario.

3. En la pestaña Update Methods, selecciona Orders en Link To Page. App Builder debería vincular las dos páginas automáticamente, pero puedes verificar que el criterio de vinculación sea el campo OrderID.

4. Haz clic en Save.

Ahora, cuando selecciones un cliente en la página Customers y sus pedidos aparezcan en el calendario, puedes hacer clic en cada uno para ir a la página Orders y ver los detalles.

Paneles de mapa

Los paneles de mapa te permiten visualizar datos en un mapa geográfico. Crearemos un mapa que muestre el número de clientes por país.

1. Crea el objeto de negocio:

   1. Crea una nueva regla llamada Customer (Map).

   2. Establece el Purpose en Map y Target en Customer.

   3. En la pestaña Columns, agrega una expresión de conteo: Count(1) y asígnale el alias CustomerCount. Establece su Tipo de uso en Value.

   4. Agrega una columna para el país. Para corregir la discrepancia de nombres, utiliza esta expresión: REPLACE(REPLACE(Country, 'USA', 'United States of America'), 'UK', 'United Kingdom').

   5. Asigna a esta columna el alias NormalizedCountry y establece su Tipo de uso en Categoría.

2. Agrega el panel:

   1. Agrega un nuevo panel a la página Customers de tipo Map.

   2. Selecciona Customer (Map) como fuente.

   3. En el campo Map Source (que se encuentra en la configuración del panel), selecciona custom/world.

La página Customers ahora muestra un mapa de calor de dónde se encuentran ubicados tus clientes a nivel mundial.

Paneles de Gantt

Los gráficos de Gantt se utilizan para programación y cronogramas. Usaremos uno para visualizar la duración de los pedidos (desde la fecha de pedido hasta la fecha de envío).

1. Crear el objeto de negocio:

   1. Crear una nueva regla llamada Order (Gantt).

   2. Establecer el Propósito en Gantt y el Destino en Order.

   3. Hacer clic en Crear.

   4. En la pestaña Tablas, seleccionar OrderNumber, OrderDate, ShippedDate y CustomerID.

   5. En la pestaña Columnas, establecer los siguientes Tipos de uso:

      • OrderNumber: Tarea

      • OrderDate: Inicio

      • ShippedDate: Fin

2. Agregar el panel:

   1. Agregar un nuevo panel a la página Customers de tipo Gantt.

   2. Seleccionar Order (Gantt) como la fuente.

   3. Asegurar que esté vinculado por CustomerID.

Organizar con pestañas

Ahora tienes tres nuevos paneles en tu página Customers, lo que podría hacerla abarrotada. Para mantener la página organizada, colocaremos todos estos nuevos paneles dentro de un grupo de panel con pestañas (un concepto introducido en Lección 6). Sigue estos pasos:

1. En la pantalla de edición de la página Customers, crear un nuevo Grupo de paneles.

2. Establecer el Diseño en Con pestañas.

3. Agregar tus paneles Order Calendar, Customer Map y Order Gantt a este grupo.

Ahora tienes un panel de control sofisticado que te permite cambiar entre una línea de tiempo, un mapa y un calendario de la actividad de tus clientes. Así es como se ve la página Customers ahora con el gráfico de calendario resaltado (pero observa las pestañas que te permiten ver los otros gráficos también):

Gráficos de red

Los gráficos de red se utilizan para visualizar relaciones entre entidades. Podemos usar esto para visualizar la estructura de reportes de nuestros empleados.

1. Crear el objeto de negocio:

   1. Crear una nueva regla llamada Employee (Network).

   2. Establecer el Propósito en Network Graph y el Destino en Employee.

   3. Hacer clic en Crear.

   4. Seleccionar EmployeeID, ReportsToEmployeeID y LastName.

   5. Establecer el Tipo de uso para EmployeeID en Nodo y ReportsToEmployeeID en Desde.

   6. Opcionalmente, establecer LastName como la Etiqueta del nodo para que los nombres aparezcan en el gráfico en lugar de los IDs.

2. Agregar el panel:

   1. Agregar un nuevo panel a la página Employees de tipo Network Graph.

   2. Seleccionar Employee (Network) como la fuente.

   3. Agregarlo al grupo de paneles que contiene los otros tres paneles para mantener la página organizada.

Inicialmente, así es como se ve el panel en la página. En la configuración del panel, puedes ajustar el diseño y los colores para visualizar mejor la jerarquía.:

Paneles dinámicos

Los paneles dinámicos te permiten resumir grandes conjuntos de datos mediante referencias cruzadas de dos categorías diferentes. Crearemos una tabla dinámica que muestre el monto total de ventas por cliente (fila) desglosado por categoría de producto (columna).

1. Crear el objeto de negocio:

   1. Crear una nueva regla llamada Order (Pivot).

   2. Establecer el Propósito en Pivot y el Destino en Order.

   3. En la pestaña Tablas, agregar las tablas OrderDetail, Product, Category y Customer.

   4. En la pestaña Columnas, agregar Customer y Category de sus respectivas tablas, y la siguiente expresión para el precio total (recuerda darle un alias descriptivo): Sum(OD.Quantity * OD.UnitPrice).

2. Crear una página para agregar el nuevo panel:

   1. Crear una nueva página llamada Sales Pivot. Colocarla en el menú Reports y usar un diseño de página completa.

   2. Agregar un panel de tipo Pivot y seleccionar Order (Pivot) como la fuente.

   3. En la configuración de Controles:

      1. Establecer Customer como la Fila.

      2. Establecer Category como la Columna.

      3. Establecer la expresión que creaste (usando el alias que le diste) como el Valor.

Cuando visites la vista previa de la página, deberías ver una tabla dinámica que muestre los pedidos totales por cliente, organizados por categoría.

Diseños de panel avanzados

Más allá de las cuadrículas y formularios estándar, App Builder ofrece diseños pensados para necesidades específicas de navegación y visualización.

Paneles de carriles

Los paneles de carriles permiten agrupar registros en carriles verticales u horizontales, similar a un tablero Kanban. Convirtamos nuestra página de Productos para usar este diseño.

1. Convierte el panel:

   1. Navega a la página de Productos.

   2. Abre el Live Designer y selecciona el panel de Productos.

   3. Cambia el Tipo de panel de Cuadrícula a Carril.

   4. Haz clic en Guardar.

2. Configura la agrupación:

   1. Ve a la configuración de Controles en la pantalla de edición de la página.

   2. Haz clic en + Control y añade CategoryID como control, con el nombre Categoría.

   3. Una vez que se añada el control de Categoría, haz clic para editarlo. En la pestaña Posición y ancho, marca la casilla Agrupar por. Esto le indica a App Builder que cree un carril separado para cada categoría de producto.

3. Ajusta la configuración del panel:

   1. Vuelve a la pantalla de edición de la página.

   2. En la pestaña Caso extremo, abre la sección General e ingresa 100 en el campo Filas por solicitud. Como los paneles de carriles muestran más datos visualmente que las cuadrículas, aumentar este límite garantiza que las categorías no se vean vacías.

La página de Productos ahora se ve así:

Paneles de marco

Los paneles de marco actúan como contenedores que cargan otras páginas dentro de ellos. Este es el mecanismo detrás de la barra lateral de la aplicación estándar.

• Cómo funciona: Tu página de Inicio típicamente contiene un panel de Menú (la barra lateral) y un panel de Marco (el área de contenido principal). Cuando haces clic en un enlace de la barra lateral, la página de destino se carga dentro del panel de Marco, en lugar de navegar por toda la ventana.

• Escapar del marco: A veces deseas que un enlace salga del marco (por ejemplo, un botón "Cerrar sesión" o un informe grande). Para hacerlo, configura el comportamiento de Destino del enlace a Ventana emergente o usa una acción de Redirección, que fuerza la navegación a nivel de ventana superior.

Lógica de formulario avanzada: Reglas de visibilidad

En la Lección 4, aprendimos sobre paneles de formulario. Podemos controlar qué campos aparecen en un formulario usando reglas de visibilidad.

Visibilidad estática

Una vista de visibilidad estática establece una regla que siempre es verdadera. Por ejemplo, asegurémonos de que el campo País siempre sea obligatorio en el formulario de Empleado.

1. Ve a la pantalla de edición de la página de Empleados.

2. Selecciona el panel de Empleados para ver sus opciones de edición.

3. Haz clic en Más > Visibilidades.

4. Haz clic en Registrar para crear una nueva regla de visibilidad.

   1. Establece el Tipo en Estático.

   2. Establece la Columna en País.

   3. Establece el Valor en Obligatorio.

   4. Haz clic en Guardar.

Reglas de visibilidad dinámica

La visibilidad también puede cambiar según los datos. Por ejemplo, el campo Estado es relevante para direcciones estadounidenses pero no para direcciones del Reino Unido (en nuestro conjunto de datos). Ocultemos el campo Estado a menos que el País sea "USA".

1. Crea la regla de lógica:

   1. Ve a Banco de trabajo de aplicaciones > Reglas y haz clic en + Regla.

   2. Nómbrala Empleado (Visibilidad).

   3. Establece Propósito en Visibilidad y Destino en Empleado.

   4. En la pestaña Columnas, añade una nueva expresión de columna para definir la lógica: IIF(Country = 'USA', 'Require', 'Hide').

   5. Dirige esta expresión a la columna Estado.

2. Aplica la regla:

   1. Vuelve a la configuración de Visibilidades del panel de Empleado.

   2. Haz clic en Registrar y establece Tipo en Regla.

   3. Selecciona Empleado (Visibilidad) como la regla.

Ahora, al editar un empleado, el campo Estado desaparecerá si el País no es "USA" y se volverá obligatorio si lo es.

Insignias

Una insignia es un pequeño indicador colocado en un botón que muestra un conteo actualizado dinámicamente. Las insignias son útiles para mostrar a los usuarios información de un vistazo, como el número de pedidos de un cliente o tareas en una cola.

Para demostrarlo, agregaremos un botón a la página Clientes que navegue a una lista de pedidos de ese cliente. El botón mostrará una insignia con el número total de pedidos realizados por ese cliente.

Primero, necesitamos un objeto de negocio que pueda contar los pedidos de cada cliente. Una subconsulta es perfecta para esto.

1. En App Workbench > Rules, haz clic en + Rule.

2. Configura la regla con los siguientes parámetros:

   • En el campo Name, ingresa Order (Count by Customer).

   • En el campo Purpose, selecciona Subquery.

   • En el campo Target, selecciona Customer.

3. Haz clic en Create.

4. En la pestaña Tables, agrega la tabla Order.

5. En la pestaña Joins, crea una combinación Left Outer desde Customer (Left) a Order (Right) en CustomerID. Usar una combinación left outer garantiza que los clientes con cero pedidos se incluyan en nuestros resultados.

6. En la pestaña Columns, agrega dos columnas:

   1. Selecciona la columna CustomerID de la tabla Customer.

   2. Haz clic en + Column para crear una expresión:

      • Column or Expression: IsNull(Count(O.OrderID), 0)

      • Alias: OrderCount

      Esta expresión utiliza la función IsNull() para contar los pedidos de cada cliente. Usar esta función garantiza que si un cliente no tiene pedidos, la insignia mostrará 0.

7. Haz clic en Save.

A continuación, debemos agregar este conteo a nuestro objeto de negocio principal Customer (Source).

1. En App Workbench > Rules, abre el objeto de negocio Customer (Source).

2. En la pestaña Tables, haz clic en + Tables y agrega la subconsulta que acabamos de crear, Order (Count by Customer).

3. En la pestaña Joins, crea una combinación Inner entre Customer (Left) y nuestra subconsulta (Right) en CustomerID.

4. En la pestaña Columns, haz clic en + Column. Selecciona la columna OrderCount de la regla de subconsulta para ponerla disponible en las páginas que usen este objeto de negocio.

Finalmente, configuremos el botón y su insignia en la página Customers.

1. Navega a la página Customers y abre el diseñador en vivo.

2. Haz clic en el panel Customers, luego haz clic en + Control.

3. Configura el botón:

   • En el menú desplegable Control Type, selecciona Button.

   • En el campo Name, ingresa Orders.

   Nota

   Deja el campo Column vacío, porque asignar una columna aquí haría que el valor de esa columna se use como el texto de la etiqueta del botón. En nuestro caso, queremos usar el texto estático "Orders".

4. Haz clic en Next para ir a la configuración de Navigation. En el menú desplegable Link to Page, selecciona Orders. App Builder creará automáticamente la vinculación en CustomerID.

5. Haz clic en Next y Finish.

6. Selecciona el botón Orders recién creado para que el diseñador en vivo muestre opciones para él.

7. En la pestaña Button, abre la sección Miscellaneous (Button).

8. En el menú desplegable Badge Source (Column), selecciona OrderCount.

9. Haz clic en Save y sal del diseñador en vivo.

Ahora deberías ver un botón Orders para cada cliente, con una insignia que muestra su conteo total de pedidos. Al hacer clic en el botón, accedes a la página Orders con los pedidos realizados por ese cliente ya seleccionados.

Aprendizaje adicional

Esto concluye este análisis profundo de los detalles de la capa de interfaz de usuario de App Builder. Si aún no lo has hecho, consulta el Apéndice A para un análisis más detallado de la capa de datos, el Apéndice B para la capa de negocio, o el Apéndice D para la capa de seguridad.

Para continuar aprendiendo sobre App Builder, visita Jitterbit University.