Crear una galería de pedidos en una aplicación de lienzo

Artículo
03/16/2023

Siga las instrucciones paso a paso para crear una galería de pedidos en una aplicación de lienzo para administrar datos ficticios en la base de datos de Northwind Traders. Este tema es parte de una serie que explica cómo crear una aplicación empresarial sobre datos relacionales en Microsoft Dataverse. Para obtener mejores resultados, explore estos temas en esta secuencia:

Crear otra galería de pedidos (este tema).
Crear un formulario de resumen.
Creación una la galería de detalles.

Definición de áreas de pantalla.

Requisitos previos

Instalar la base de datos y aplicaciones de Northwind Traders.
Lea la descripción general de la aplicación de lienzo para Northwind Traders.

Crear una aplicación en blanco

Crear una aplicación de lienzo en blanco y asígnele un nombre como "Mis pedidos de Northwind (aplicación de lienzo)".

Agregar los datos

En el panel izquierdo, seleccione Datos > Agregar datos > buscar por, y seleccione la tabla Pedidos.

La tabla Pedidos contiene muchos campos de varios tipos:

Cada campo tiene un Nombre para mostrar y un Nombre, que a veces se llama nombre lógico. Ambos nombres se refieren a lo mismo. En general, usará el nombre cuando cree una aplicación, pero en algunos casos se requieren el Nombre más críptico como se señaló en un procedimiento.
Como trabajaremos con pantallas y controles a continuación, en Power Apps Studio vuelva a la Vista de árbol en el lado izquierdo presionando el icono de tres cuadrados apilados. Puedes volver a Orígenes de datos en cualquier momento presionando el icono del cilindro.

Crear la galería de pedidos

En la pestaña Insertar, seleccione Galería > Vertical en blanco para agregar un control Galería, que mostrará los pedidos.

El control se colocará en el lienzo y aparecerá un diálogo de control flotante preguntando a qué origen de datos conectarse.
Podríamos conectarlo directamente a Pedidos aquí, pero en su lugar nos gustaría controlar el orden de clasificación de la galería. Ignore el cuadro de diálogo de control flotante y en la barra de fórmulas configure la propiedad Items de la galería según esta fórmula:
```
Sort( Orders, 'Order Number', Descending )
```
La función Sort ordena la lista para que aparezca primero el pedido más nuevo (que tiene el número de pedido más alto).
Después de unos momentos, la Vista de resultados aparecerá debajo de la barra de fórmulas. Deslice la fecha a la izquierda hacia abajo para ver el resultado de nuestra fórmula. Desplácese hacia la derecha para ver la columna Número de pedido y asegúrese de que esté ordenada de la manera deseada (de mayor a menor).
En la pestaña Propiedades junto al borde derecho, abra la lista Diseño:
En la lista de opciones, seleccione Título y subtítulo:

Dos controles Etiqueta se agregan a la plantilla de la galería. De forma predeterminada, estos controles muestran dos columnas de la tabla Pedidos, que cambiará a continuación. La plantilla de la galería se replica verticalmente para cada registro de la tabla.
Seleccione Editar (junto a Campos), en la pestaña Propiedades junto al borde derecho.
En el panel Datos, seleccione Título1 (o seleccione la etiqueta superior en la plantilla de la galería).
En la barra de fórmulas, establezca la propiedad Text de la etiqueta en esta expresión:
```
"Order " & ThisItem.'Order Number'
```
El número de pedido aparece en la parte superior de cada elemento de la galería. En la plantilla de la galería, ThisItem concede acceso a todos los campos de la tabla Pedido.
En el panel Datos, seleccione Subtítulo1 (o seleccione la etiqueta inferior en la plantilla de la galería):
En la barra de fórmulas, establezca la propiedad Text de la etiqueta en esta expresión:
```
ThisItem.Customer.Company
```
Después de especificar esta fórmula, puede aparecer un error con una línea roja ondulada por un momento. El error debería desaparecer si selecciona algo fuera de la barra de fórmulas y luego regresa el cursor a la barra de fórmulas. Si el error persiste o no ve un valor, seleccione la pestaña Vista, seleccione Orígenes de datos y luego actualice la tabla Pedidos seleccionando los puntos suspensivos (...) a la derecha del nombre de la fuente de datos.

Cuando especifica ThisItem.Customer, está aprovechando una relación de varios a uno entre las tablas Pedidos y Clientes y recuperar el registro del cliente asociado con cada pedido. Desde el registro del cliente, está extrayendo datos en la columna Empresa para su presentación.

Puede mostrar todas las Relaciones de la tabla Pedidos a otras tablas, incluida la tabla Cliente:
Cierre el panel Datos seleccionando el icono Cerrar (x) en la esquina superior derecha.

Mostrar el estado de cada pedido

En este procedimiento, agregará espacio en la galería para una etiqueta y lo configurará para mostrar el estado de cada pedido en un color diferente según los datos.

En la plantilla de la galería, reduzca el ancho de la primera etiqueta, Título1:
Repita el paso anterior con la segunda etiqueta, Subtítulo1:
Con la plantilla de la galería (o un control en la plantilla) seleccionada, seleccione Etiqueta en la pestaña Insertar:
Mueva la nueva etiqueta a la parte derecha de la etiqueta Título1.
Establezca la propiedad Text de la nueva etiqueta en esta expresión:
```
ThisItem.'Order Status'
```
En la tabla Pedidos, el campo Estado del pedido contiene un valor para la elección Estado de pedidos. Una elección es similar a una enumeración en otras herramientas de programación. Cada conjunto de opciones se define en la base de datos, por lo que los usuarios pueden especificar solo aquellas opciones que están en el conjunto. La elección Estado de pedidos también es global, no local, por lo que puede usarla en otras tablas:

Cada opción en un conjunto tiene un nombre que aparece si lo muestra en una etiqueta. Estos nombres se pueden localizar, y la aplicación reconoce la misma opción si un usuario inglés selecciona Apple, un usuario francés selecciona Pomme o un usuario español selecciona Manzana. Por esta razón, no puede crear una fórmula que se base en una cadena codificada para una opción, como este tema demuestra más adelante.

En las fórmulas, debe rodear Estados del pedido con comillas simples porque contiene un espacio. Sin embargo, ese nombre funciona de la misma manera que cualquier otro nombre en Power Apps, como Cliente o Empresa.
En la pestaña Inicio, aumente el tamaño de fuente de la etiqueta de estado a 20 puntos y alinee el texto a la derecha:
En la barra de fórmulas, configure la propiedad Color de la etiqueta de estado según esta fórmula:
```
Switch( ThisItem.'Order Status',
    'Orders Status'.Closed, Green,
    'Orders Status'.New, Black,
    'Orders Status'.Invoiced, Blue,
    'Orders Status'.Shipped, Purple
)
```
Power Apps evita que cree una fórmula que se base en una cadena codificada para cada opción en un conjunto porque tales fórmulas podrían producir resultados inapropiados si los nombres de las opciones están localizados. En cambio, la función Switch determina el color según la cadena que aparezca en la etiqueta según la configuración del usuario.

Con esta fórmula aplicada, aparecen diferentes valores de estado en diferentes colores, como muestra el gráfico anterior.

Mostrar el total de cada pedido

Seleccione el primer elemento en la galería, que es la plantilla de la galería:
En la pestaña Insertar, seleccione Etiqueta para agregar otra etiqueta:
Mueva la nueva etiqueta para que aparezca debajo de la etiqueta de estado:
En la barra de fórmulas, establezca la propiedad Text de la nueva etiqueta según esta fórmula:
```
Text( Sum( ThisItem.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )
```
En esta fórmula, la función Sum suma los registros en la tabla Detalles del pedido que están asociados con cada registro en la tabla Pedido a través de una relación de uno a varios. Estas líneas de pedido conforman cada pedido, y utilizará la misma relación de uno a varios para mostrar y editar las líneas de pedido en el área inferior derecha de la pantalla.

Esta fórmula muestra un subrayado azul y una advertencia de delegaciónporque Dataverse no admite la delegación de funciones agregadas complejas (por ejemplo, la suma de una multiplicación). Puede ignorar esta información porque ningún pedido en este ejemplo contendrá más de 500 artículos de línea. Si es necesario para una aplicación diferente, puede aumentar ese límite en Ajustes de la aplicación.

La función Text en esta fórmula agrega un símbolo de moneda y formatea el resultado separadores de miles y decimales. Tal como está escrito, la fórmula incluye la etiqueta de idioma para inglés de EE. UU. ([$-en-US]) y un símbolo de dólar ($). Si elimina la etiqueta de idioma, se reemplazará con una basada en la configuración de su idioma, y la etiqueta mostrará los formatos apropiados para esa etiqueta. Si deja el símbolo del dólar, la etiqueta mostrará el símbolo de moneda apropiado según la configuración del usuario. Sin embargo, puede forzar la aparición de un símbolo diferente reemplazando el símbolo del dólar con el que prefiera.
En la pestaña Inicio, cambie el tamaño de fuente de la etiqueta más reciente a 20 puntos y alinee el texto a la derecha su texto:
Mover la galería al borde izquierdo de la pantalla y disminuir el ancho de la galería para cerrar un poco el espacio.
Aumente la altura de la galería para que sea casi tan alta como la pantalla, pero deje un pequeño espacio en la parte superior para una barra de título, que agregará al comienzo del siguiente tema:

Resumen

Para recapitular, comenzó a crear una aplicación de lienzo de pantalla única al agregar la galería de pedidos, que incluye estos elementos:

Una expresión para mostrar el número de pedido: "Orders " & ThisItem.OrderNumber
Un campo en una relación de varios a uno: ThisItem.Customer.Company
Una etiqueta que muestra el nombre de una opción en un conjunto: ThisItem.'Order Status'
Una etiqueta que cambia el formato según la opción en un conjunto que muestra la etiqueta: Switch( ThisItem.'Order Status', 'Orders Status'.Closed, Green, ...
Una función agregada compleja en una relación de uno a varios: Sum( ThisItem.'Order Details', Quantity * 'Unit Price' )

Tema siguiente

En el próximo tema, agregará un control Editar formulario para mostrar y editar un resumen del orden que el usuario seleccione en la galería que acaba de crear.

Crear el formulario de resumen

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).