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

Este es el tercer y último 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 introducidos.

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

Paneles de mosaicos

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

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

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

2. Haz clic en el ícono de menú hamburguesa para abrir el panel de acciones, luego selecciona Diseñador en vivo.

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

4. En la pestaña Panel, cambia la selección de Cuadrícula a Mosaico.

5. Nota el campo Ancho del mosaico que aparece. Esta configuración, única para los paneles de mosaicos, controla el ancho de cada mosaico individual. La altura se determina automáticamente por el número de controles mostrados en el mosaico. Déjalo en el valor predeterminado por ahora.

6. Haz clic en Guardar.

Esto transforma la página de Empleados, ya que ahora las entradas individuales en el objeto de negocio Empleados se muestran en mosaicos en lugar de en una lista. Sin embargo, los mosaicos ahora tienen demasiados controles. Los mosaicos lucen 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 de 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 a 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. Asigna al nuevo regla el nombre OrderDetail (Total por Empleado), luego selecciona Chart en el campo Purpose y OrderDetail en Target. Haz clic en Create.

3. Cuando App Builder cree 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 alguna otra, deselecciónala.

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

5. Aún en la pestaña Joins, asegúrate de que el panel Join Columns esté uniendo 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 que se mostrarán 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, hagamos nuestra página de paneles de gráficos.

1. Ve a App Workbench > Pages y haz clic en + Page.

2. En Enter a Page Name, ingresa Order Total by Employee. Haz clic en Next.

3. Selecciona Reports como el menú. Esto colocará la nueva página bajo un nuevo menú llamado Reports que aparecerá entre Home y Configuration. Haz clic en Next.

4. Selecciona Full Page como el diseño de la página. Haz clic en Next y Finish.

5. Una vez que App Builder crea la página, haz clic en + Choose Panel Type.

6. Selecciona Chart como el tipo de panel. Haz clic en Next.

7. Elige OrderDetail (Total by Employee) como el panel fuente. Haz clic en Next y Finish.

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

Sort chart data

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 demostrar, ordenemos nuestro gráfico por la fecha de contratación de los empleados.

1. Ve a App Workbench > Rules 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 Tables, localiza la tabla Employee y selecciona la columna HireDate.

3. A continuación, en App Workbench > Pages, 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 cuadro de diálogo Add a Control, selecciona la columna Hire Date. Crucialmente, en el campo Control Type, selecciona Sort. 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 Position & Width. En el campo Sort Direction, puedes alternar entre ASC (ascendente) y DESC (descendente).

Si vuelves a visitar la vista previa de la página ahora, verás que las barras están organizadas por la fecha de contratación de los empleados.

Agregar desglose de gráfico

Los paneles de gráficos pueden hacerse interactivos al agregar navegación, permitiendo a los usuarios "profundizar" en los datos. En el ejemplo que estamos utilizando, podemos configurar el gráfico para que al hacer clic en la barra de un empleado específico, el usuario sea llevado a la página de Órdenes, filtrada para mostrar solo las órdenes de ese empleado.

1. Regresa a la lista de Controles para la página de Total de Órdenes por Empleado.

2. Haz clic en el ícono al final de la fila para editar el control de Suma Total de Línea (el control de Valor).

3. Abre la pestaña de Caso Límite.

4. Abre la sección de Configuraciones de Navegación Rara.

5. En el campo de Enlace a Página, selecciona la página de Órdenes.

6. Haz clic en el ícono de enlace para asegurarte de que App Builder ha vinculado correctamente las dos páginas. La Columna de Origen debe ser EmployeeID (PK).

Ahora, al ver el gráfico, puedes hacer clic en cualquier barra para ser llevado a la página de Ó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 graficar

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 utilizando 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 los totales de ventas como barras (en un eje Y) y el descuento promedio como una línea (en un segundo eje Y) para el mismo empleado.

Tiempo de práctica: Agregar una segunda categoría

Modifica el Objeto de Negocio OrderDetail (Total por Empleado) 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 paneles 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 de Clientes 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 Propósito en Calendario y el Objetivo en Pedido.

   4. Haz clic en Crear.

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

   6. En la pestaña Columnas, establece el Tipo de Uso para OrderNumber en Descripción y ShippedDate en Inicio.

2. Agrega el panel:

   1. Ve a la página de Clientes.

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

   3. App Builder debería vincular automáticamente este panel al panel principal de Clientes utilizando CustomerID.

   4. Nombra el panel Calendario de Pedidos.

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

Además, también puedes vincular el calendario a la página de Pedidos. De esa manera, cuando un usuario seleccione un cliente y sus pedidos aparezcan en el calendario, cada uno de ellos podrá ser clicado, llevando al usuario a los detalles de ese pedido. Sigue estos pasos:

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

2. Abre el Diseñador en Vivo y selecciona el panel del calendario.

3. En la pestaña de Métodos de Actualización, selecciona Órdenes en Vincular a Página. El Constructor de Aplicaciones debería vincular las dos páginas automáticamente, pero puedes verificar para asegurarte de que el criterio de vinculación sea el campo OrderID.

4. Haz clic en Guardar.

Ahora, cuando selecciones un cliente en la página de Clientes y sus órdenes aparezcan en el calendario, puedes hacer clic en cada una de ellas para ser llevado a la página de Órdenes 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 Cliente (Mapa).

   2. Establece el Propósito en Mapa y el Objetivo en Cliente.

   3. En la pestaña de Columnas, agrega una expresión de conteo: Count(1) y aliasala como ConteoClientes. Establece su Tipo de Uso en Valor.

   4. Agrega una columna para el país. Para corregir la discrepancia en los nombres, utiliza esta expresión: REPLACE(REPLACE(Country, 'USA', 'Estados Unidos de América'), 'UK', 'Reino Unido').

   5. Alias esta columna como PaisNormalizado y establece su Tipo de Uso en Categoría.

2. Agrega el panel:

   1. Agrega un nuevo panel a la página de Clientes de tipo Mapa.

   2. Selecciona Cliente (Mapa) como la fuente.

   3. En el campo de Fuente del Mapa (encontrado en la configuración del panel), selecciona custom/world.

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

Paneles de Gantt

Los gráficos de Gantt se utilizan para la programación y los cronogramas. Usaremos uno para visualizar la duración de las órdenes (desde la Fecha de Orden hasta la Fecha de Envío).

1. Crea el objeto de negocio:

   1. Crea una nueva regla llamada Orden (Gantt).

   2. Establece el Propósito en Gantt y el Objetivo en Orden.

   3. Haz clic en Crear.

   4. En la pestaña Tablas, selecciona NúmeroDeOrden, FechaDeOrden, FechaDeEnvio y IDDeCliente.

   5. En la pestaña Columnas, establece los siguientes Tipos de Uso:

      • NúmeroDeOrden: Tarea

      • FechaDeOrden: Inicio

      • FechaDeEnvio: Fin

2. Agrega el panel:

   1. Agrega un nuevo panel a la página de Clientes de tipo Gantt.

   2. Selecciona Orden (Gantt) como la fuente.

   3. Asegúrate de que esté vinculado por IDDeCliente.

Organizar con pestañas

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

1. En la pantalla de edición de la página de Clientes, crea un nuevo Grupo de Paneles.

2. Establece el Diseño en Pestañado.

3. Agrega tus paneles de Calendario de Orden, Mapa de Clientes y Gantt de Orden a este grupo.

Ahora tienes un panel de control sofisticado que te permite alternar entre una línea de tiempo, un mapa y un cronograma de la actividad de tus clientes. Así es como se ve ahora la página de Clientes con el gráfico del calendario destacado (pero nota 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 informes de nuestros empleados.

1. Crea el objeto de negocio:

   1. Crea una nueva regla llamada Empleado (Red).

   2. Establece el Propósito en Gráfico de Red y el Objetivo en Empleado.

   3. Haz clic en Crear.

   4. Selecciona IDDeEmpleado, IDDeEmpleadoReportaA y Apellido.

   5. Establece el Tipo de Uso para EmployeeID como Node y ReportsToEmployeeID como From.

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

2. Agrega el panel:

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

   2. Selecciona Employee (Network) como la fuente.

   3. Agrégalo 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 de pivote

Los paneles de pivote te permiten resumir grandes conjuntos de datos mediante la referencia cruzada 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. Crea el objeto de negocio:

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

   2. Establece el Propósito como Pivot y el Objetivo como Order.

   3. En la pestaña Tables, agrega las tablas OrderDetail, Product, Category y Customer.

   4. En la pestaña Columns, agrega 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. Crea una página para agregar el nuevo panel:

   1. Crea una nueva página llamada Sales Pivot. Colócala en el menú de Reports y utiliza un diseño de página completa.

   2. Agrega un panel de tipo Pivot y selecciona Order (Pivot) como la fuente.

   3. En la configuración de Controls:

      1. Establece Customer como la Fila.

      2. Establece Category como la Columna.

      3. Establece 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 muestra los pedidos totales por cliente, organizados por categoría.

Diseños de paneles avanzados

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

Paneles de carril

Los paneles de carril 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 Diseñador en Vivo y selecciona el panel de Productos.

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

   4. Haz clic en Guardar.

2. Configura el agrupamiento:

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

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

   3. Una vez que se haya agregado el control de Categoría, haz clic para editarlo. En la pestaña de Posición y Ancho, marca la casilla de verificación 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. Regresa a la pantalla de edición de la página.

   2. En la pestaña de Caso Límite, abre la sección General e ingresa 100 en el campo de Filas Por Solicitud. Dado que los paneles de carril muestran más datos visualmente que las cuadrículas, aumentar este límite asegura 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 estándar de la aplicación.

• 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 en la barra lateral, la página de destino se carga dentro del panel de Marco, en lugar de navegar por toda la ventana.

• Escapando del Marco: A veces quieres que un enlace salga del marco (por ejemplo, un botón de "Cerrar Sesión" o un informe grande). Para hacer esto, configura el comportamiento de Destino del enlace a Popup o usa una acción de Redirección, que fuerza la navegación a ocurrir en el nivel de la ventana principal.

Lógica avanzada de formularios: Reglas de visibilidad

En Lección 4, aprendimos sobre los paneles de formularios. Podemos controlar qué campos aparecen en un formulario utilizando 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ática.

   2. Establece la Columna en País.

   3. Establece el Valor en Requerir.

   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 de EE. UU., pero no para direcciones del Reino Unido (en nuestro conjunto de datos). Vamos a ocultar el campo Estado a menos que el País sea "EE. UU.".

1. Crea la regla lógica:

   1. Ve a App Workbench > Reglas y haz clic en + Regla.

   2. Nómbrala Empleado (Visibilidad).

   3. Establece el Propósito en Visibilidad y el Objetivo en Empleado.

   4. En la pestaña Columnas, agrega 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. Regresa a la configuración de Visibilidades del panel de Empleado.

   2. Haz clic en Registrar y establece el 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 "EE. UU." 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 demostrar, agregaremos un botón a la página de Clientes que navegue a una lista de los pedidos de ese cliente. El botón contará con una insignia que muestra 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 > Reglas, haz clic en + Regla.

2. Configura la regla con los siguientes ajustes:

   • En el campo Nombre, ingresa Pedido (Contar por Cliente).

   • En el campo Propósito, selecciona Subconsulta.

   • En el campo Objetivo, selecciona Cliente.

3. Haz clic en Crear.

4. En la pestaña Tablas, agrega la tabla Pedido.

5. En la pestaña Uniones, crea una unión Izquierda Externa de Cliente (Izquierda) a Pedido (Derecha) en CustomerID. Usar una unión izquierda externa asegura que los clientes con cero pedidos aún se incluyan en nuestros resultados.

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

   1. Selecciona la columna CustomerID de la tabla Cliente.

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

      • Columna o Expresión: IsNull(Count(O.OrderID), 0)

      • Alias: ContadorDePedidos

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

7. Haz clic en Guardar.

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

1. En App Workbench > Reglas, abre el objeto de negocio Cliente (Origen).

2. En la pestaña Tablas, haz clic en + Tablas y agrega la subconsulta que acabamos de crear, Pedido (Contar por Cliente).

3. En la pestaña Uniones, crea una unión Interna entre Cliente (Izquierda) y nuestra subconsulta (Derecha) en CustomerID.

4. En la pestaña Columnas, haz clic en + Columna. Selecciona la columna ContadorDePedidos de la regla de subconsulta para hacerla disponible en las páginas que utilizan este objeto de negocio.

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

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

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

3. Configura el botón:

   • En el menú desplegable de Tipo de Control, selecciona Botón.

   • En el campo de Nombre, ingresa Órdenes.

   Nota

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

4. Haz clic en Siguiente para ir a la configuración de Navegación. En el menú desplegable de Vincular a Página, selecciona Órdenes. App Builder creará automáticamente la vinculación en CustomerID.

5. Haz clic en Siguiente y Finalizar.

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

7. En la pestaña de Botón, abre la sección de Varios (Botón).

8. En el menú desplegable de Fuente de Insignia (Columna), selecciona OrderCount.

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

Ahora deberías ver un botón de Órdenes para cada cliente, con una insignia que muestra su total de órdenes. Hacer clic en el botón te lleva a la página de Órdenes con las órdenes realizadas por ese cliente ya seleccionadas.

Aprendizaje adicional

Esto concluye esta inmersión profunda en los detalles de la capa de UI de App Builder. Si aún no lo has hecho, consulta el Apéndice A para un vistazo más cercano a la capa de datos, o el Apéndice B para la capa de negocio.

Para seguir aprendiendo sobre App Builder, visita Jitterbit University.