Introducción a App Builder - Lección 6: Vínculo

Esta es la sexta lección de la serie de tutoriales Introducción a App Builder.

En esta lección, aprenderemos sobre un concepto fundamental en App Builder: el vínculo. Lo aprenderemos mientras construimos una página clave en nuestra aplicación Northwinds.

Páginas con múltiples paneles: La página de Pedidos

Todas las páginas que hemos construido hasta ahora solo han tenido un panel. Veremos cómo podemos construir páginas con múltiples paneles y cómo hacer que funcionen juntas utilizando vínculos.

Para empezar, crearemos una página llamada Pedidos.

1. Usando los mismos pasos que hemos seguido en lecciones anteriores, crea la nueva página Pedidos. Por ahora, debería tener un panel de página completa, agregaremos más después.

2. Una vez que App Builder cree la página, agrega un panel de tipo Grid, utilizando Pedido (Fuente) como la fuente del panel. Puedes permitir que App Builder construya automáticamente el panel, editaremos los controles más tarde. Si visitas la vista previa de la página, verás que simplemente lista todos los Pedidos presentes en la base de datos.

Ahora agreguemos un segundo panel a la página Pedidos. Nuestro objetivo es tener un panel inicial que liste todos los pedidos, pero los detalles de cada uno se mostrarán en otros paneles en la misma página. De esa manera, cuando el usuario final haga clic en un pedido, los otros paneles cambiarán automáticamente para mostrar detalles sobre el pedido seleccionado.

1. Navega a la página Pedidos y haz clic en Ver Página para previsualizarla.

2. Accede al diseñador en vivo.

3. Cuando se abra el diseñador en vivo, haz clic en el botón + Panel. Se abrirá el cuadro de diálogo Crear un Panel.

4. Selecciona Grid como el Tipo de Panel y haz clic en Siguiente.

5. Selecciona DetallePedido (Fuente) como la Fuente del Panel y haz clic en Siguiente.

6. Puedes permitir que App Builder construya automáticamente el panel, editaremos los controles más tarde. Haz clic en Siguiente y Finalizar.

Debido a que la tabla Pedido tiene una clave externa que se conecta con la tabla DetallePedido y los dos paneles extraen datos de reglas que se basan en esas dos tablas, App Builder los vincula automáticamente. Esto significa que ahora, cuando visites la vista previa de la página Pedidos, hacer clic en una fila de pedido en el panel Pedidos hará que el panel Detalles del Pedido se llene automáticamente con los detalles del pedido que has seleccionado.

Agregar un enlace manualmente

Cuando dos paneles en la misma página extraen datos de reglas que tienen claves foráneas conectadas, el Constructor de Aplicaciones los enlazará automáticamente. Sin embargo, si necesitas enlazar dos paneles manualmente, así es como puedes hacerlo:

1. Navega a la página con los paneles que deseas enlazar.

2. Haz clic en el panel que deseas llenar automáticamente con los detalles de las selecciones del usuario en otro panel.

3. En la pestaña Panel, encuentra el campo Panel Padre y Enlace.

   1. Usa el menú para seleccionar el panel padre.

   2. Haz clic en el botón con el símbolo de enlace. Se abre el diálogo Columnas de Enlace.

   3. Haz clic en + Enlace y usa los menús para seleccionar:

      1. Tipo: El tipo de enlace.

      2. Columna Hija: Selecciona qué columna de la regla base del panel hijo debería ser la hija.

      3. Columna Padre: Selecciona qué columna de la regla base del panel padre debería ser el padre.

   4. Haz clic en el ícono de marca de verificación para confirmar y salir de la ventana.

Haz clic en Ver Página para previsualizar la página de Órdenes ahora que tiene dos paneles. Para probar, intenta seleccionar diferentes filas en el panel padre y observa cómo la información en el panel hijo cambia en consecuencia:

Editar valores de visualización

Ten en cuenta que el panel Detalles del Pedido solo muestra los precios unitarios de cada artículo. Sin embargo, varios artículos se compraron en grandes cantidades. Además, varios de ellos se compraron con descuentos. Modifiquemos el panel para que calcule y muestre los totales de precios.

1. En Banco de Trabajo de Aplicaciones > Reglas, accede a la regla OrderDetail (Fuente) y haz clic para editarla. En la pestaña Columnas, haz clic en + Columna.

2. Para multiplicar el precio unitario por la cantidad y restar el descuento, la expresión que necesitamos es:

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

3. En el campo Alias, ingresa Total de Línea. Haz clic en Guardar.

4. En la tabla actualizada de columnas, usa la columna Lógica para convertir el nuevo campo Total de Línea como Moneda. Aprovecha esta oportunidad para también convertir la columna Precio Unitario como Moneda y la columna Descuento como Porcentaje.

5. Haz clic en Resultados para ver los valores que se están mostrando. Ahora regresa a la pantalla de edición de la página de Órdenes y agrega el nuevo control de Total de Línea al panel de Detalles del Pedido, dándole el nombre de Total. Después de hacer eso, vuelve a la vista previa de la página de Órdenes. El panel de Detalles del Pedido ahora muestra totales al final de cada fila:

   

Ahora que tenemos un total para cada artículo individual, también agreguemos otro control para mostrar el precio total de un pedido completo:

1. Ve a la vista previa de la página de Órdenes y accede al diseñador en vivo.

2. Selecciona el control de Total en el panel de Detalles del Pedido para que el diseñador en vivo muestre opciones de edición para él.

3. En la pestaña de Propiedades del Control, encuentra el campo de Función Agregada, y haz clic en Suma.

4. Haz clic en Guardar.

Ahora el panel de Detalles del Pedido muestra el precio total de un pedido completo en la parte inferior de la columna de Total:

Hacer un control de solo lectura

No queremos permitir que los usuarios finales editen todos los controles en una página. Por ejemplo, en la página de Órdenes que estamos construyendo, no podemos permitir que los usuarios editen el precio de un artículo. Sigue estos pasos:

1. Navega a la vista previa de la página de Órdenes y accede al diseñador en vivo.

2. Haz clic en el control de Precio Unitario en el panel de Detalles del Pedido para que el diseñador en vivo muestre opciones de edición para él.

3. En la pestaña de Posición y Ancho, encuentra el campo de Opciones de Edición, y haz clic en Solo lectura.

4. Haz clic en Guardar.

Cuando regreses a la vista previa de la página, notarás que hacer clic en el ícono de edición en cualquiera de las filas del panel de Detalles del Pedido ya no te permite editar la columna de Precio Unitario.

Mejoras en la página de órdenes

A pesar de las mejoras que ya hemos realizado, la página de Órdenes aún no es muy amigable para el usuario. El panel de Órdenes tiene más controles de los que se pueden leer cómodamente en la pantalla, y alguna información importante que los usuarios finales desearían conocer no se puede encontrar en la página. Sigamos trabajando en esta página.

Panel de Información de Envío

El panel de Órdenes tiene demasiados controles. Échale un vistazo en la vista previa de la página de Órdenes. Hay tantos controles que no caben en la pantalla y no es posible leer todo cómodamente.

Para hacer nuestra aplicación más amigable para el usuario, agregaremos más paneles a la página para distribuir mejor la información.

1. Navega a la pantalla de edición de la página de Órdenes y haz clic en + Agregar Panel.

2. Una vez que aparezca, haz clic en + Elegir Tipo de Panel.

3. Esta vez, el tipo de panel debe ser Formulario. La fuente del panel debe ser Orden (Fuente), igual que el panel principal de Órdenes. Sin embargo, esta vez, opta por Elegir Manualmente los controles del nuevo panel. Cuando aparezca la pantalla de Elegir Columnas, selecciona todas las columnas excepto NúmeroDeOrden y FechaDeOrden.

4. Haz clic en Siguiente y Publicar.

5. Cuando App Builder actualice la página, cambia el nombre del nuevo panel a Información de Envío y haz clic en Guardar.

App Builder vinculará automáticamente este nuevo panel al panel de Órdenes utilizando la columna IDDeOrden. Ahora que tenemos un nuevo panel para mostrar los detalles de envío, el panel principal de Órdenes ya no necesita tener todos esos controles. Visita la pantalla de edición del panel de Órdenes y reduce el número de controles allí, dejando solo NúmeroDeOrden y FechaDeOrden, los dos que no están presentes en el panel de Información de Envío.

Sin embargo, el nuevo panel de Información de Envío todavía tiene muchos controles, así que los organizaremos un poco mejor:

1. En la pantalla de edición de la página de Órdenes, selecciona el panel de Información de Envío y haz clic en Controles.

2. Al observar todos los controles disponibles, podemos separarlos en dos grupos, así que haremos eso. Haz clic en + Control.

3. Omite el campo Columna, porque no necesitamos nuevos controles, solo organizaremos los existentes. En el campo Tipo de Control, selecciona Acordeón. En el campo Nombre, ingresa Información de Envío.

4. Haz clic en Siguiente y Finalizar.

5. Repite los Pasos 2 a 4 y crea otro grupo llamado Fechas y Costo.

Cuando el Constructor de Aplicaciones te devuelva a la lista de controles, verás que los dos grupos ahora están listados. Revisa todos los controles y decide cuál de ellos debe ir bajo cada grupo cambiando su Padre a uno de los dos. Para cuando termines y regreses a la vista previa de la página de Órdenes, el panel de Información de Envío debería verse mucho más organizado:

Panel de Información del Cliente

Vamos a agregar otro panel a la página de Órdenes, porque actualmente no nos muestra ninguna información sobre quién realizó los pedidos. Nos muestra lo que se compró, pero no quién lo compró.

1. Navega a la pantalla de edición de la página de Órdenes y haz clic en + Agregar Panel.

2. Una vez que aparezca, haz clic en + Elegir Tipo de Panel.

3. El tipo de panel debería ser Formulario nuevamente. La fuente del panel debería ser Cliente (Fuente), ya que queremos información sobre quién está realizando el pedido. Puedes dejar que el Constructor de Aplicaciones seleccione automáticamente todos los controles, porque los organizaremos nosotros mismos en los siguientes pasos.

4. Haz clic en Siguiente y Publicar. El Constructor de Aplicaciones vinculará automáticamente este nuevo panel al panel principal de Órdenes utilizando CustomerID como criterio de vinculación.

5. Cuando el Constructor de Aplicaciones actualice la página, cambia el nombre del nuevo panel a Información del Cliente y haz clic en Guardar.

6. Ahora, organicemos los controles en el nuevo panel. Ve a su pantalla de edición y haz clic en + Control.

7. Esta vez, sin embargo, elijamos un tipo diferente de organizador. En el campo Tipo de Control, selecciona Pestaña. Asigna a esta primera pestaña el nombre Cliente.

8. Repite los Pasos 6 y 7 para crear otra pestaña con el nombre Contacto.

9. Cuando las nuevas pestañas estén listas, revisa los controles y distribúyelos en las dos pestañas. ¿Qué controles crees que encajarían mejor en cada una? Cuando termines, vuelve a la vista previa de la página de Órdenes y el panel de Información del Cliente tendrá las dos pestañas que creaste:

   

Usa grupos de paneles para organizar tu página

A pesar de que pudimos usar paneles vinculados para dividir la información en nuestra página de Órdenes, ahora tenemos un nuevo problema porque los cuatro paneles están compitiendo por espacio en la pantalla y no es muy legible en este momento. Solucionaremos ese problema utilizando grupos de paneles, con los cuales podemos organizar paneles en nuestras páginas para mejorar su apariencia.

1. En la pantalla de edición de la página de Órdenes, haz clic en el botón Grupos debajo del panel Diseño del Panel de Página.

2. Haz clic en + Grupo.

3. En el campo Padre, selecciona Órdenes (Página), la página que estamos construyendo. Asigna al grupo el nombre Fila superior.

4. En el campo Diseño, selecciona Uno al lado del otro.

5. Haz clic en el ícono para guardar.

A continuación, sal del diálogo de creación de grupos y selecciona el panel de Órdenes. Queremos que esté en la fila superior, así que en la pestaña Panel, busca la propiedad Posición y selecciona Fila superior en el campo Padre. Haz clic en Guardar. También queremos que los paneles de Información de Envío e Información del Cliente estén en la fila superior, así que repite el proceso para ellos. Usa los números en el campo Orden para determinar qué panel va primero.

Ahora, crea un segundo grupo, pero esta vez asígnale el nombre Fila inferior. Contendrá el panel de Detalles del Pedido, que queremos que ocupe toda la parte inferior de la pantalla. Por lo tanto, asegúrate de que el número en el campo Orden sea mayor que el campo correspondiente en el primer grupo. Una vez que crees el nuevo grupo, asegúrate de asignarlo como el Padre del panel de Detalles del Pedido.

Finalmente, en la pantalla de edición de la página de Orden, cambia el Diseño a Apilado. App Builder apilará entonces los dos grupos siguiendo el orden numérico de los dos grupos. Cuando actualices la página, el Diseño del Panel de Página debería verse así:

Y la vista previa de la página de Órdenes debería verse así:

¿Qué otras mejoras puedes hacer en la página de Órdenes? Por ejemplo, en la captura de pantalla anterior, agregamos un control de Empleado al panel de Órdenes, para que los usuarios puedan ver con qué empleado habló un cliente al realizar su pedido. ¿Cómo agregarías ese control a tu panel de Órdenes? Aquí hay algunas otras ideas para mejoras:

• ¿Se están mostrando correctamente todos los precios, como monedas?

• ¿Se están mostrando todos los descuentos como porcentajes?

• ¿Cómo puedes agregar un control de Categoría al panel de Detalles del Pedido como en la captura de pantalla anterior?

• ¿Deberías permitir que los usuarios finales eliminen las entradas en los paneles de Información de Envío e Información del Cliente? ¿Cómo puedes evitar que lo hagan?

Revisión y conclusión

En esta lección, utilizamos el concepto de enlace para hacer que nuestras páginas sean más receptivas y completas. En las próximas lecciones, continuaremos mejorando nuestra comprensión de los conceptos de desarrollo en App Builder. Procede a Lección 7: Más sobre reglas.