Compartir por

Crear unha galería de detalles nunha aplicación de lenzo

  • Artigo

Siga as instrucións paso a paso para crear unha galería de detalles nunha aplicación de lenzo para xestionar datos ficticios na base de datos de Northwind Traders. Este tema forma parte dunha serie que explica como compilar unha aplicación empresarial con datos relacionais en Microsoft Dataverse. Para obter os mellores resultados, explore estes temas nesta secuencia:

  1. Crear unha galería de pedidos.
  2. Crear un formulario de resumo.
  3. Crear unha galería de detalles (este tema).

Definición das áreas da pantalla.

Requisitos previos

Antes de comezar este tema, ten que instalar a base de datos como se describiu anteriormente neste tema. Debe entón crear a galería de pedidos e o formulario de resumo ou abrir a aplicación Pedidos de Northwind (lenzo): Comezar a terceira parte, que xa contén esa galería e ese formulario.

Crear outra barra de título

  1. Na parte superior da pantalla, seleccione o control Etiqueta que actúa como unha barra de título, cópieo premendo CTRL-C e logo pégueo premendo CTRL-V:

    Copiar e pegar a barra de título.

  2. Redimensione e mova a copia para que apareza xusto baixo o formulario de resumo.

  3. Elimine o texto da copia de calquera das seguintes formas:

    • Prema dúas veces no texto para seleccionalo e logo prema Eliminar.
    • Estableza a propiedade Texto da etiqueta nunha cadea baleira ("").

    Eliminar o texto da copia da barra de título.

  1. Insira un control Galería cun deseño Vertical en branco:

    Engadir unha galería vertical en branco.

    A nova galería, que mostrará os detalles do pedido, aparece na esquina superior esquerda.

  2. Peche o diálogo da orixe de datos do control flotante e logo redimensione e mova a galería de detalles á esquina inferior dereita, debaixo da nova barra de título:

    Buscar a localización da galería de detalles do pedido.

  3. Configure a propiedade Elementos da galería de detalles nesta fórmula:

    Gallery1.Selected.'Order Details'

    Configure a propiedade Elementos da galería de detalles.

    Se aparece un erro, confirme que a galería de pedidos se denomina Galería1 (no panel Visualización en árbore preto do bordo esquerdo). Se esa galería ten un nome diferente, cámbieo para Galería1.

    Acaba de ligar as dúas galerías. Cando o usuario selecciona un pedido na galería de pedidos, esa selección identifica un rexistro na táboa Pedidos. Se esa orde contén un ou varios elementos de liña, o rexistro na táboa Pedidos está ligado a un ou varios rexistros na táboa Detalles do pedido e os datos deses rexistros aparecen na galería de detalles. Este comportamento reflicte a relación de un a varios que se creou entre as táboas Pedidos e Detalles do pedido. A fórmula que especificou fai "camiñar" esa relación mediante a notación de puntos:

    Relación de un a varios entre a táboa Pedidos e a táboa Detalles do pedido.

Mostrar os nomes do produto

  1. Na galería de detalles, seleccione Engadir un elemento do separador Inserir para seleccionar o modelo da galería:

    Seleccionar o modelo para a galería de detalles.

    Asegúrese de que seleccionou o modelo da galería en vez da propia galería. A caixa dependente debería estar lixeiramente dentro do límite da galería e probablemente inferior á altura da galería. Ao inserir controis neste modelo, repítense por cada elemento da galería.

  2. No separador Inserir, insira unha etiqueta na galería de detalles.

    A etiqueta debería aparecer dentro da galería; de non ser así, ténteo de novo, pero asegúrese de seleccionar o modelo da galería antes de inserir a etiqueta.

    Engadir unha etiqueta á galería de detalles.

  3. Axuste a propiedade Texto da nova etiqueta nesta fórmula:

    ThisItem.Product.'Product Name'

    Se non aparece texto, seleccione a frecha para Pedido 0901 preto do fondo da galería de pedidos.

  4. Redimensione a etiqueta para que apareza o texto completo:

    Mostrar o nome do produto no detalle do pedido.

    Esta expresión vai desde un rexistro na táboa Detalles do pedido. O récord mantense en ThisItem ata a táboa Produtos do pedido a través dunha relación de varios a un:

    Relación de varios a un entre a táboa Detalles do pedido e a táboa Produtos do pedido.

    Extráese a columna Nome do produto (e outras columnas que está a piques de usar):

    Columna na táboa Produtos do pedido.

Mostrar imaxes do produto

  1. No separador Inserir, insira un control Imaxe na galería de detalles:

    Control Inserir imaxe no lenzo.

  2. Redimensione e mova a imaxe e a etiqueta para que estean xuntas.

    Suxestión

    Para un control detallado sobre posición e o tamaño dun control, comece por redimensionalo ou movelo sen premer a tecla ALT e, a continuación, continúe para redimensionar ou mover o control mentres mantén premida a tecla ALT:

    Mover control de imaxe.

  3. Axuste a propiedade Imaxe da imaxe nesta fórmula:

    ThisItem.Product.Picture

    De novo, a expresión fai referencia a un produto asociado a este detalle do pedido e á extracción do campo Imaxe para mostrar.

    Mostrar imaxe do produto.

  4. Reduce a altura do modelo da galería de xeito que máis dun rexistro Detalle do pedido aparece á vez:

    Reducir o modelo da galería.

Mostrar cantidade e custo do produto

  1. No separador Inserir, insira outra etiqueta na galería de detalles e logo redimensione e mova a nova etiqueta á dereita da información do produto.

  2. Axuste a propiedade Texto da nova etiqueta nesta expresión:

    ThisItem.Quantity

    Esta fórmula extrae información directamente da táboa Detalles do pedido (non se require relación).

    Mostrar cantidade do produto.

  3. No separador Inicio, cambie o aliñamento deste control a Dereita:

    Cambiar o aliñamento á dereita.

  4. No separador Inserir, insira outra etiqueta na galería de detalles e logo redimensione e mova a etiqueta á dereita da etiqueta de cantidade.

  5. Axuste a propiedade Texto da nova etiqueta nesta fórmula:

    Text( ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )

    Se non inclúe a etiqueta de idioma ([$-en-US]), engadirase en función do seu idioma e rexión. Se usa unha etiqueta de idioma diferente, quererá eliminar $ xusto despois do corchete de peche (]) e, a continuación, engadir o seu propio símbolo de moeda nesa posición.

    Mostrar prezo por unidade.

  6. No separador Inicio, cambie o aliñamento deste control a Dereita:

    Cambiar o aliñamento cara a dereita.

  7. No separador Inserir, insira outro control de etiqueta na galería de detalles e logo redimensione e mova a nova etiqueta á dereita do prezo por unidade.

  8. Axuste a propiedade Texto da nova etiqueta nesta fórmula:

    Text( ThisItem.Quantity * ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )

    De novo, se non inclúe a etiqueta de idioma ([$-en-US]), engadirase en función do seu idioma e rexión. Se a etiqueta é diferente, quererá empregar o seu propio símbolo de moeda en vez de $ xusto despois do corchete de peche (]).

    Mostrar prezo total.

  9. No separador Inicio, cambie o aliñamento deste control a Dereita:

    Cambiar o aliñamento na dereita.

    Finalizaches de engadir controis á galería de detalles por agora.

  10. No panel Visualización en árbore, seleccione Pantalla1 para asegurarse de que a galería de detalles xa non está seleccionada.

Engadir texto á nova barra de título

  1. No separador Inserir, insira outra etiqueta na pantalla:

    Captura de pantalla da etiqueta de inserción.

  2. Redimensione e mova a nova etiqueta por encima das imaxes dos produtos na segunda barra de título e logo cambie a cor do texto a branca no separador Inicio.

  3. Prema dúas veces no texto da etiqueta e logo escriba Produto:

    Cambiar texto da etiqueta a Produto.

  4. Copie e pegue a etiqueta de produto e logo redimensione e mova a copia por encima da columna de cantidade.

  5. Prema dúas veces no texto da nova etiqueta e logo escriba Cantidade:

    Cambiar texto da etiqueta a Cantidade.

  6. Copie e pegue a etiqueta de cantidade e logo redimensione e mova a copia por encima da columna de prezo por unidade.

  7. Prema dúas veces no texto da nova etiqueta e logo escriba Prezo por unidade:

    Cambiar o texto da etiqueta a Prezo por unidade.

  8. Copie e pegue a etiqueta de prezo por unidade e logo redimensione e mova a copia por encima da columna de prezo total.

  9. Prema dúas veces no texto da nova etiqueta e logo escriba Total:

    Cambiar texto da etiqueta a Total.

Mostrar totais de pedidos

  1. Reduza a altura da galería de detalles para deixar espazo aos totais de pedidos na parte inferior da pantalla:

    Reducir a galería de detalles do pedido.

  2. Copie e pegue a barra de título na metade da pantalla e logo mova a copia á parte inferior da pantalla:

    Copiar a barra de título e mover a copia ao bordo inferior.

  3. Copie e pegue a etiqueta do produto desde a barra de título do medio e logo mova a copia á barra de título inferior, xusto á esquerda da columna Cantidade.

  4. Prema dúas veces no texto da nova etiqueta e logo escriba este texto:
    Totais de pedidos:

    Engadir a etiqueta para os totais de pedidos.

  5. Copie e pegue a etiqueta dos totais de pedidos e logo redimensione e mova a copia á dereita da etiqueta de totais de pedidos.

  6. Axuste a propiedade Texto da nova etiqueta nesta fórmula:

    Sum( Gallery1.Selected.'Order Details', Quantity )

    Esta fórmula mostra un aviso sobre a delegación, pero pode ignoralo porque ningún pedido único conterá máis de 500 produtos.

  7. No separador Inicio, configure o aliñamento de texto da nova etiqueta en Dereita:

    Cambiar aliñamento.

  8. Copie e pegue este control de etiqueta e logo redimensione e mova a copia por debaixo da columna Estendido.

  9. Axuste a propiedade Texto da copia nesta fórmula:

    Text( Sum( Gallery1.Selected.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )

    Esta fórmula mostra un aviso sobre a delegación, pero pode ignoralo porque ningún pedido único conterá máis de 500 produtos.

    Mostrar o custo total do pedido.

Engadir espazo para novos detalles

En calquera galería pode mostrar datos, pero non pode actualizalos nin engadir rexistros. Na galería de detalles engadirá unha área onde o usuario pode configurar un rexistro na táboa Detalles do pedido e inserir ese rexistro nun pedido.

  1. Reduza a altura da galería de detalles o suficiente para deixar espazo para unha área de edición dun único elemento baixo esa galería.

    Neste espazo, engadirá controis para que o usuario poida engadir un detalle do pedido:

    Reducir a galería de detalles.

  2. No separador Inserir, insira unha etiqueta e logo redimensiónea e móvaa debaixo da galería de detalles.

    Inserir etiqueta.

  3. Prema dúas veces no texto da nova etiqueta e logo prema Eliminar.

  4. No separador Inicio configure a cor de enchemento da nova etiqueta en LightBlue:

    Cambiar o enchemento da etiqueta a azul claro.

Seleccionar un produto

  1. No separador Inserir, seleccione Controis > Caixa de combinación:

    Inserir caixa de combinación.

    O control Caixa de combinación aparece na esquina superior esquerda.

  2. No diálogo flotante, seleccione a orixe de datos Produtos do pedido.

  3. No separador Propiedades da caixa de combinación, seleccione Editar (xunto a Campos) para abrir o panel Datos. Asegúrese de que Texto primario e SearchField están establecidos en nwind_productname.

    Especifique o nome lóxico porque o panel Datos aínda non admite nomes para mostrar neste caso:

    Configurar o texto primario para a caixa de combinación.

  4. Peche o panel Datos.

  5. No separador Propiedades preto do bordo dereito, desprácese cara a abaixo e desactive Permitir a selección múltiple e asegúrese de que Permitir a busca está activado.

    Desactivar a selección múltiple e activar a busca.

  6. Redimensione e mova a caixa de combinación á área azul claro, xusto baixo a columna do nome do produto na galería de detalles:

    Mover a caixa de combinación.

    Nesta caixa de combinación, o usuario especificará un rexistro da táboa Produto para o rexistro Detalles do pedido que creará a aplicación.

  7. Mentres mantén premida a tecla ALT, seleccione a frecha cara abaixo da caixa de combinación.

    Suxestión

    Mantendo pulsada a tecla ALT, pode interactuar cos controis de Power Apps Studio sen abrir o modo de previsualización.

  8. Na lista de produtos que aparece, seleccione un produto:

    Seleccionar un produto na caixa de combinación.

Engadir unha imaxe do produto

  1. No separador Inserir, seleccione Multimedia > Imaxe:

    Inserir control de imaxe.

    O control Imaxe aparece na esquina superior esquerda:

    Localización predefinida do control de imaxe.

  2. Redimensione e mova a imaxe á área azul claro baixo as outras imaxes do produto e á beira da caixa de combinación.

  3. Establecer a propiedade Imaxe da imaxe en:

    ComboBox1.Selected.Picture

    Establecer a propiedade Imaxe da imaxe.

    Está a empregar o mesmo truco que utilizou para mostrar a foto do empregado no formulario de resumo. A propiedade Seleccionado da caixa de combinación devolve o rexistro completo de calquera produto que o usuario seleccione, incluído o campo Imaxe.

Engadir unha caixa de cantidade

  1. No separador Inserir, seleccione Texto > Entrada de texto:

    Engadir unha caixa de entrada de texto.

    O control Entrada de texto aparece na esquina superior esquerda:

    Localización predefinida da caixa de entrada de texto.

  2. Redimensione e mova a caixa de entrada de texto á dereita da caixa de combinación, debaixo da columna de cantidade na galería de detalles:

    Redimensionar e mover a caixa de entrada de texto.

    Ao usar esta caixa de entrada de texto, o usuario especificará o campo Cantidade do rexistro Detalles do pedido.

  3. Configure a propiedade Valor predefinido deste control en "":

    Configure a propiedade predefinida da caixa de entrada de texto.

  4. No separador Inicio, configure o aliñamento de texto deste control en Dereita:

    Cambiar o aliñamento do control á dereita.

Mostrar os prezos por unidade e total

  1. No separador Inserir, insira un control Etiqueta.

    A etiqueta aparece na esquina superior esquerda da pantalla:

    Inserir unha etiqueta.

  2. Redimensione e mova a etiqueta á dereita do control de entrada de texto e configure a propiedade Texto da etiqueta nesta fórmula:

    Text( ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )

    Configurar a propiedade Texto da etiqueta.

    Este control mostra o Prezo listado desde a táboa Produtos do pedido. Este valor determinará o campo Prezo por unidade no rexistro Detalles do pedido.

    Nota

    Para este escenario, o valor é só de lectura, pero outros escenarios poden solicitar ao usuario da aplicación que o modifique. Nese caso, use un control Entrada de texto e configure a súa propiedade Valor predefinido en Prezo listado.

  3. No separador Inicio, configure o aliñamento de texto da etiqueta de prezo listado en Dereita:

    Cambiar o aliñamento do control ao lado dereito.

  4. Copie e pegue a etiqueta de prezo listado e logo redimensione e mova a copia á dereita da etiqueta de prezo listado.

  5. Axuste a propiedade Texto da nova etiqueta nesta fórmula:

    Text( Value(TextInput1.Text) * ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )

    Configurar a propiedade Texto da nova etiqueta.

    Este control mostra o prezo total en función da cantidade que o usuario da aplicación especificou e o prezo listado do produto que seleccionou o usuario da aplicación. É puramente informativo para o usuario da aplicación.

  6. Prema dúas veces no control de entrada de texto para a cantidade e logo escriba un número.

    A etiqueta de prezo total volve calcularse para mostrar o novo valor:

    Especificar unha cantidade e mostrar o prezo total.

Engadir unha icona Engadir

  1. No separador Inserir, seleccione Iconas > Engadir:

    Inserir icona Engadir.

    A icona aparece na esquina superior esquerda da pantalla.

    Localización predefinida da icona Engadir.

  2. Redimensione e mova esta icona ao bordo dereito da zona azul claro e logo configure a propiedade OnSelect da icona nesta 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 )

    Establecer a propiedade OnSelect da icona.

    En xeral, a función Patch actualiza e crea rexistros, e os argumentos específicos desta fórmula determinan os cambios exactos que fará a función.

    • O primeiro argumento especifica o orixe de datos (neste caso, a táboa Detalles do pedido) na que a función actualizará ou creará un rexistro.

    • O segundo argumento especifica que a función creará un rexistro cos valores predefinidos para a táboa Detalles do pedido se non se especifica o contrario no terceiro argumento.

    • O terceiro argumento especifica que catro columnas no novo rexistro conterán valores do usuario.

      • A columna Pedido conterá o número do pedido que o usuario seleccionou na galería de pedidos.
      • A columna Produto conterá o nome do produto que o usuario seleccionou na caixa de combinación que mostra os produtos.
      • A columna Cantidade conterá o valor especificado polo usuario na caixa de entrada de texto.
      • A columna Prezo por unidade conterá o prezo listado do produto que o usuario seleccionou para este detalle do pedido.

    Nota

    Pode crear fórmulas que empreguen datos de calquera columna (na táboa Produtos do pedidos) para calquera produto que o usuario da aplicación seleccione na caixa de combinación que mostra os produtos. Cando o usuario selecciona un rexistro na táboa Produtos do pedido, non só aparece o nome do produto nesa caixa de combinación, senón que o prezo unitario do produto aparece nunha etiqueta. Cada valor de busca nunha aplicación de lenzo fai referencia a un rexistro completo, non só a unha clave principal.

    A función Refresh garante que a táboa Pedidos reflicta o rexistro que acaba de engadir á táboa Detalles do pedido. A función Reset borra os datos, a cantidade e o prezo por unidade do produto para que o usuario poida crear máis facilmente outro detalle de pedido para o mesmo pedido.

  3. Prema F5 e, a seguir, seleccione a icona Engadir.

    O pedido reflicte a información que especificou:

    Animación de adición dun detalle de pedido.

  4. (opcional) Engadir outro elemento ao pedido.

  5. Prema ESC para pechar o modo de previsualización.

Eliminar un detalle de pedido

  1. No centro da pantalla, seleccione o modelo da galería de detalles:

    Seleccionar modelo de galería.

  2. No separador Inserir, seleccione Iconas > Papeleira:

    Inserir a icona Papeleira.

    A icona Papeleira aparece na esquina superior esquerda do modelo da galería.

    Localización predefinida da icona.

  3. Redimensione e mova esta icona Papeleira ao lado dereito do modelo da galería de detalles configure a propiedade OnSelect da icona nesta fórmula:

    Remove( 'Order Details', ThisItem ); Refresh( Orders )

    Establecer a propiedade OnSelect da icona.

    Tras a escritura deste documento, non pode eliminar un rexistro directamente dunha relación, polo que a función Remove elimina un rexistro directamente da táboa relacionada. ThisItem especifica o rexistro que se vai eliminar, extraído do mesmo rexistro na galería de detalles onde aparece a icona Papeleira.

    Unha vez máis, a operación usa datos na caché, polo que a función Refresh informa á táboa Pedidos de que a aplicación cambiou unha das táboas relacionadas.

  4. Prema F5 para abrir o modo de previsualización e logo seleccione a icona Papeleira situada ao lado de cada rexistro de Detalles do pedido que quere eliminar do pedido.

  5. Probe a engadir e eliminar varios detalles do pedidos dos seus pedidos:

    Animación de adición e eliminación de detalles do pedido.

En conclusión

Para recapitular, engadiu outra galería para mostrar os detalles do pedido e os controis que engaden e eliminan un detalle do pedido na aplicación. Empregou estes elementos:

  • Un segundo control da galería, ligado á galería de pedidos mediante unha relación un a varios: Gallery2.Items = Gallery1.Selected.'Order Details'
  • Unha relación de varios a un desde a táboa Detalles do pedido á táboa Produtos do pedido: ThisItem.Product.'Product Name' e ThisItem.Product.Picture
  • Función Choices para obter unha lista de produtos: Choices( 'Order Details'.Product' )
  • Propiedade Seleccionado dunha caixa de combinación como o rexistro relacionado de varios a un completo: ComboBox1.Selected.Picture e ComboBox1.Selected.'List Price'
  • Función Patch para crear un rexistro de Detalles do pedido: Patch( 'Order Details', Defaults( 'Order Details' ), ... )
  • Función Remove para eliminar un rexistro de Detalles do pedido: Remove( 'Order Details', ThisItem )

Esta serie de temas foron unha descrición rápido para o uso das relacións e eleccións de Dataverse nunha aplicación de lenzo con fins educativos. Antes de lanzar calquera aplicación para produción, debe considerar a validación de campo, o tratamento de erros e moitos outros factores.

Nota

Pode indicarnos as súas preferencias para o idioma da documentación? Realice unha enquisa breve. (teña en conta que esa enquisa está en inglés)

Esta enquisa durará sete minutos aproximadamente. Non se recompilarán datos persoais (declaración de privacidade).