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

Artículo
03/16/2023

Siga las instrucciones paso a paso para crear una galería de detalles 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 una galería de pedidos.
Crear un formulario de resumen.
Crear otra galería de detalles (este tema).

Definición de áreas de pantalla.

Requisitos previos

Antes de comenzar este tema, debe instalar la base de datos como se describe anteriormente en este tema. Luego debe crear la galería de pedidos y el formulario de resumen o abrir la aplicación Northwind Orders (Canvas) - Begin Part 3, que ya contiene esa galería y ese formulario.

Crear otra barra de título

En la parte superior de la pantalla, seleccione el control Etiqueta que actúa como una barra de título, cópielo presionando Ctrl-C y luego péguelo presionando Ctrl-V:
Cambie el tamaño y mueva la copia para que aparezca justo debajo del formulario de resumen.
Elimine el texto de la copia de cualquiera de estas formas:
- Haga doble clic en el texto para seleccionarlo y luego presione Eliminar.
- Establezca la propiedad Text de la etiqueta en una cadena vacía ("").

Agregar una galería

Insertar un control Galería con una orientación Vertical en blanco:

La nueva galería, que mostrará los detalles del pedido, aparece en la esquina superior izquierda.
Cierre el cuadro de diálogo de control flotante de origen de datos y luego cambie el tamaño y mueva la galería de detalles a la esquina inferior derecha, debajo de la nueva barra de título:
Establezca la propiedad Items de la galería de detalles según esta fórmula:
```
Gallery1.Selected.'Order Details'
```
Si aparece un error, confirme que la galería de pedidos se llama Galería1 (en el panel de Vista de árbol junto al borde izquierdo). Si esa galería tiene un nombre diferente, cámbiele el nombre a Galería1.

Acaba de vincular las dos galerías. Cuando el usuario selecciona un pedido en la galería de pedidos, esa selección identifica un registro en la tabla Pedidos. Si ese pedido contiene uno o más artículos de línea, el registro en la tabla Pedidos está vinculada a uno o más registros en la tabla Detalles del pedido, y los datos de esos registros aparecen en la galería de detalles. Este comportamiento refleja la relación uno a varios que se creó para usted entre las tablas Pedidos y Detalles del pedido. La fórmula que especificó "recorre" esa relación usando la notación de puntos:

Mostrar los nombres de producto

En la galería de detalles, seleccione Agregar un elemento de la pestaña Insertar para seleccionar la plantilla de la galería:

Asegúrese de haber seleccionado la plantilla de la galería en lugar de la propia galería. El cuadro delimitador debe estar ligeramente dentro del límite de la galería y probablemente más corto que la altura de la galería. A medida que inserta controles en esta plantilla, se repiten para cada elemento de la galería.
En la pestaña Insertar, inserte una etiqueta en la galería de detalles.

La etiqueta debe aparecer dentro de la galería; si no es así, inténtelo nuevamente, pero asegúrese de seleccionar la plantilla de la galería antes de insertar la etiqueta.
Establezca la propiedad Text de la nueva etiqueta según esta fórmula:
```
ThisItem.Product.'Product Name'
```
Si no aparece texto, seleccione la flecha para Pedido 0901 junto a la parte inferior de la galería de pedidos.
Cambie el tamaño de la etiqueta para que aparezca el texto completo:

Esta expresión parte de un registro en la tabla Detalles del pedido. El registro se mantiene en ThisItem sobre la tabla Productos del pedido a través de una relación de varios a uno:

La columna Nombre del producto (y otras columnas que está a punto de usar) se extraen:

Mostrar las imágenes de producto

En la pestaña Insertar, inserte un control Imagen en la galería de detalles:
Cambie el tamaño y mueva la imagen y la etiqueta para que estén juntas.

Sugerencia

Para un control detallado sobre el tamaño y la posición de un control, comience a cambiar su tamaño o muévalo sin presionar la tecla Alt, y luego continúe cambiando el tamaño o moviendo el control mientras mantiene presionada la tecla Alt:
Establezca la propiedad Image de la imagen según esta fórmula:
```
ThisItem.Product.Picture
```
Nuevamente, la expresión hace referencia a un producto que está asociado con este detalle del pedido y extrae el campo Imagen para mostrar.
Reduce la altura de la plantilla de la galería para que más de un registro de Detalle del pedido aparezca a la vez:

Mostrar cantidad y coste del producto

En la pestaña Insertar, inserte otra etiqueta en la galería de detalles y luego cambie el tamaño y mueva la nueva etiqueta a la derecha de la información del producto.
Establezca la propiedad Text de la nueva etiqueta según esta expresión:
```
ThisItem.Quantity
```
Esta fórmula extrae información directamente de la tabla Detalles del pedido (no se requiere relación).
En la pestaña Inicio, cambie la alineación de este control a Derecha:
En la pestaña Insertar, inserte otra etiqueta en la galería de detalles y luego cambie el tamaño y mueva la etiqueta a la derecha de la etiqueta de cantidad.
Establezca la propiedad Text de la nueva etiqueta según esta fórmula:
```
Text( ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Si no incluye la etiqueta de idioma ([$-en-US]), se agregará según su idioma y región. Si usa una etiqueta de idioma diferente, querrá eliminar el $ justo después del corchete de cierre (]), y luego agregue su propio símbolo de moneda en esa posición.
En la pestaña Inicio, cambie la alineación de este control a Derecha:
En la pestaña Insertar, inserte otro control de etiqueta en la galería de detalles y luego cambie el tamaño y mueva la nueva etiqueta a la derecha del precio por unidad.
Establezca la propiedad Text de la nueva etiqueta según esta fórmula:
```
Text( ThisItem.Quantity * ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
De nuevo, si no incluye la etiqueta de idioma ([$-en-US]), se agregará según su idioma y región. Si la etiqueta es diferente, querrá usar su propio símbolo de moneda en lugar del $ justo después del corchete de cierre (]).
En la pestaña Inicio, cambie la alineación de este control a Derecha:

Ha terminado de agregar controles a la galería de detalles por ahora.
En el panel Vista de árbol, seleccione Pantalla1 para garantizar que la galería de detalles ya no esté seleccionada.

Agregar texto a la nueva barra de título

En la pestaña Insertar, inserte otra etiqueta en la pantalla:
Cambie el tamaño y mueva la nueva etiqueta sobre las imágenes de los productos en la segunda barra de título, y luego cambie el color del texto a blanco en la pestaña Inicio.
Haga doble clic en el texto de la etiqueta y luego escriba Producto:
Copie y pegue la etiqueta del producto, y luego cambie el tamaño y mueva la copia sobre la columna de cantidad.
Haga doble clic en el texto de la nueva etiqueta y luego escriba Cantidad:
Copie y pegue la etiqueta de cantidad y luego cambie el tamaño y mueva la copia sobre la columna de precio por unidad.
Haga doble clic en el texto de la nueva etiqueta y luego escriba Precio por unidad:
Copie y pegue la etiqueta de precio por unidad y luego cambie el tamaño y mueva la copia sobre la columna de precio ampliado.
Haga doble clic en el texto de la nueva etiqueta y luego escriba Ampliado:

Mostrar los totales del pedido

Reduzca la altura de la galería de detalles para dejar espacio para los totales de pedidos en la parte inferior de la pantalla:
Copie y pegue la barra de título en el medio de la pantalla, y luego mueva la copia a la parte inferior de la pantalla:
Copie y pegue la etiqueta del producto desde la barra de título del medio, y luego mueva la copia a la barra de título inferior, justo a la izquierda de la columna Cantidad.
Haga doble clic en el texto de la nueva etiqueta y luego escriba este texto:
Totales de pedidos:
Copie y pegue la etiqueta de los totales de los pedidos, y luego cambie el tamaño y mueva la copia a la derecha de la etiqueta de los totales de los pedidos.
Establezca la propiedad Text de la nueva etiqueta según esta fórmula:
```
Sum( Gallery1.Selected.'Order Details', Quantity )
```
Esta fórmula muestra una advertencia de delegación, pero puede ignorarla porque ningún pedido único contendrá más de 500 productos.
En la pestaña Inicio, establezca la alineación de texto de la nueva etiqueta en Derecha:
Copie y pegue este control de etiqueta y luego cambie el tamaño y mueva la copia en la columna Ampliado.
Establezca la propiedad Text de la copia según esta fórmula:
```
Text( Sum( Gallery1.Selected.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )
```
Esta fórmula muestra una advertencia de delegación, pero puede ignorarla porque ningún pedido único contendrá más de 500 productos.

Agrega espacio para nuevos detalles

En cualquier galería, puede mostrar datos, pero no puede actualizarlos ni agregar registros. Debajo de la galería de detalles, agregará un área donde el usuario puede configurar un registro en la tabla Detalles del pedido e inserte ese registro en un pedido.

Reduzca la altura de la galería de detalles lo suficiente como para dejar espacio para un espacio de edición de un solo elemento debajo de esa galería.

En este espacio, agregará controles para que el usuario pueda agregar un detalle del pedido:
En la pestaña Insertar, inserte una etiqueta y luego cambie su tamaño y muévala debajo de la galería de detalles.
Haga doble clic en el texto de la nueva etiqueta y luego presione Eliminar.
En la pestaña Inicio, establezca el color Relleno la nueva etiqueta en AzulClaro:

Seleccionar un producto

En la pestaña Insertar, seleccione Controle > Cuadro combinado:

El control Cuadro combinado aparece en la esquina superior izquierda.
En el cuadro de diálogo de control flotante, seleccione origen de datos Productos del pedido.
En la pestaña Propiedades para el cuadro combinado, seleccione Editar (junto a Campos) para abrir el panel Datos. Asegúrese de que Texto primario y SearchField están establecidos en nwind_productname.

Usted especifica el nombre lógico porque el panel Datos aún no admite nombres para mostrar en este caso:
Cerrar el panel Datos.
En la pestaña Propiedades junto al borde derecho, desplácese hacia abajo, desactive Permitir selección múltiple y asegúrese de que Permitir búsqueda está activado:
Cambie el tamaño y mueva el cuadro combinado al área azul claro, justo debajo de la columna del nombre del producto en la galería de detalles:

En este cuadro combinado, el usuario especificará un registro en la tabla Producto para el registro Detalles del pedido que creará la aplicación.
Mientras mantiene presionada la tecla Alt, seleccione la flecha hacia abajo del cuadro combinado.

Sugerencia

Al mantener presionada la tecla Alt, puede interactuar con los controles en Power Apps Studio sin abrir el modo Vista previa.
En la lista de productos que aparece, seleccione un producto:

Agregar una imagen de producto

En la pestaña Insertar, seleccione Medios > Imagen:

El control Imagen aparece en la esquina superior izquierda:
Cambie el tamaño y mueva la imagen al área azul claro debajo de las otras imágenes del producto y junto al cuadro combinado.
Establezca la propiedad Image de la imagen en:
```
ComboBox1.Selected.Picture
```
Está utilizando el mismo truco que usó para mostrar la imagen del empleado en el formulario de resumen. La propiedad Selected del cuadro combinado devuelve el registro completo de cualquier producto que seleccione el usuario, incluido el campo Imagen.

Agregar un cuadro de cantidad

En la pestaña Insertar, seleccione Texto > Entrada de texto:

El control Entrada de texto aparece en la esquina superior izquierda:
Cambie el tamaño y mueva el cuadro de entrada de texto a la derecha del cuatro combinado, justo debajo de la columna cantidad en la galería de detalles:

Al usar este cuadro de entrada de texto, el usuario especificará el campo Cantidad del registro Detalles del pedido.
Establezca la propiedad Default de este control a "":
En la pestaña Inicio, establezca la alineación del texto de este control a Derecha:

Mostrar la unidad y los precios extendidos

En la pestaña Insertar, inserte un control Etiqueta.

La etiqueta aparece en la esquina superior izquierda de la pantalla:
Cambie el tamaño y mueva la etiqueta a la derecha del control de entrada de texto, y configure la etiqueta Texto de esta fórmula:
```
Text( ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Este control muestra el Precio de lista desde la tabla Productos del pedido. Este valor determinará el campo Precio por unidad en el registro Detalles del pedido.

Nota

Para este escenario, el valor es de solo lectura, pero otros escenarios pueden requerir que el usuario de la aplicación lo modifique. En ese caso, use un control Entrada de texto y establezca su propiedad Default en Precio en lista.
En la pestaña Inicio, establezca la alineación de la etiqueta de precio en lista en Derecha:
Copie y pegue la etiqueta del precio en lista y luego cambie el tamaño y mueva la copia a la derecha de la etiqueta del precio de lista.
Establezca la propiedad Text de la nueva etiqueta según esta fórmula:
```
Text( Value(TextInput1.Text) * ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Este control muestra el precio ampliado basado en la cantidad que especificó el usuario de la aplicación y el precio en lista del producto que seleccionó el usuario de la aplicación. Es puramente informativo para el usuario de la aplicación.
Haga doble clic en el control Entrada de texto para la cantidad y luego escriba un número.

La etiqueta de precio Ampliado vuelve a calcular para mostrar el nuevo valor:

Agregar e icono Agregar

En la pestaña Insertar, seleccione Iconos > Agregar:

El icono aparece en la esquina superior izquierda de la pantalla.
Cambie el tamaño y mueva este icono al borde derecho del área azul claro, y luego configure la propiedad OnSelect del icono según esta fórmula:
```
Patch( 'Order Details',
    Defaults('Order Details'),
    {
        Order: Gallery1.Selected,
        Product: ComboBox1.Selected,
        Quantity: Value(TextInput1.Text),
        'Unit Price': ComboBox1.Selected.'List Price'
    }
);
Refresh( Orders );
Reset( ComboBox1 );
Reset( TextInput1 )
```
En general, la función Patch actualiza y crea registros, y los argumentos específicos en esta fórmula determinan los cambios exactos que realizará la función.
- El primer argumento especifica el origen de datos (en este caso, la tabla Detalles del pedido) en la que la función actualizará o creará un registro.
- El segundo argumento especifica que la función creará un registro con los valores predeterminados para la tabla Detalles del pedido a menos que se especifique lo contrario en el tercer argumento.
- El tercer argumento especifica que cuatro columnas en el nuevo registro contendrán valores del usuario.
  - La columna Pedido contendrá el número del pedido que el usuario seleccionó en la galería de pedidos.
  - La columna Producto contendrá el nombre del producto que el usuario seleccionó en el cuadro combinado que muestra los productos.
  - La columna Cantidad contendrá el valor que el usuario especificó en el cuadro de entrada de texto.
  - La columna Precio por unidad contendrá el precio en lista del producto que el usuario seleccionó para los detalles de este pedido.
Nota

Puede crear fórmulas que utilicen datos de cualquier columna (en la tabla Productos del pedido) para cualquier producto que el usuario de la aplicación seleccione en el cuadro combinado que muestra los productos. Cuando el usuario selecciona un registro en la tabla Ordenar productos, no solo aparece el nombre del producto en ese cuadro combinado, sino que también aparece el precio unitario del producto en una etiqueta. Cada valor de búsqueda en una aplicación de lienzo hace referencia a un registro completo, no solo a una clave principal.

La función Actualizar asegura que la tabla Pedidos refleje el registro que acaba de agregar a la tabla Detalles del pedido. La función Reset borra los datos del producto, la cantidad y el precio por unidad para que el usuario pueda crear más fácilmente otro detalle de pedido para el mismo pedido.
Presione F5 y luego seleccione el icono Agregar.

El pedido refleja la información que especificó:
(opcional) Agregue otro artículo al pedido.
Presione Esc para cerrar del modo de vista previa.

Eliminar un detalle del pedido

En el centro de la pantalla, seleccione la plantilla de la galería de detalles:
En la pestaña Insertar, seleccione Iconos > Papelera:

El icono Papelera aparece en la esquina superior izquierda de la pantalla de la galería.
Cambie el tamaño y mueva este icono Papelera al borde derecho de la plantilla de la galería de detalles y luego configure la propiedad OnSelect del icono según esta fórmula:
```
Remove( 'Order Details', ThisItem ); Refresh( Orders )
```
En el momento de escribir este artículo, no puede eliminar un registro directamente de una relación, por lo que la función Eliminar elimina un registro directamente de la tabla relacionada. ThisItem especifica el registro a eliminar, tomado del mismo registro en la galería de detalles donde aparece el icono Papelera.

Una vez más, la operación utiliza datos almacenados en caché, por lo que la función Actualizar informa a la tabla Pedidos que la aplicación ha cambiado una de sus tablas relacionadas.
Presione F5 para abrir el modo Vista previa y luego seleccione el icono Papelera al lado de cada registro Detalles del pedido que desea eliminar del pedido.
Intente agregar y eliminar varios detalles de pedido de sus pedidos:

En conclusión

Para recapitular, agregó otra galería para mostrar los detalles de los pedidos y los controles agregando y eliminando los detalles de un pedido en la aplicación. Usó estos elementos:

Un segundo control de galería, vinculado a la galería de pedidos a través de una relación de uno a varios: Gallery2.Items = Gallery1.Selected.'Order Details'.
Relación varios a uno a varios de la tabla Detalles del pedido a la tabla Productos del pedido: ThisItem.Product.'Product Name' y ThisItem.Product.Picture
la función Choices para obtener una lista de productos: Choices( 'Order Details'.Product' ).
La propiedad Selected de un cuadro combinado como el registro relacionado completo de varios a uno: ComboBox1.Selected.Picture y ComboBox1.Selected.'List Price'.
La función Patch para crear un registro Detalles del pedido: Patch( 'Order Details', Defaults( 'Order Details' ), ... ).
La función Remove para eliminar un registro Detalles del pedido: Remove( 'Order Details', ThisItem ).

Esta serie de temas ha sido un tutorial rápido sobre el uso de relaciones de Dataverse y opciones en una aplicación de lienzo con fines educativos. Antes de lanzar cualquier aplicación a producción, debe considerar la validación de campos, el manejo de errores y muchos otros factores.

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).