Criar uma galeria de detalhes numa aplicação de tela

Siga as instruções passo-a-passo para criar uma galeria de detalhes numa aplicação de tela para gerir dados fictícios na base de dados da Northwind Traders. Este tópico faz parte de uma série que explica como criar uma aplicação empresarial em dados relacionais no Microsoft Dataverse. Para obter os melhores resultados, explore estes tópicos nesta sequência:

1. Criar uma galeria de encomendas.
2. Criar um formulário de resumo.
3. Crie uma galeria de detalhes (este tópico).

Pré-requisitos

Antes de iniciar este tópico, tem de instalar a base de dados conforme descrito anteriormente neste tópico. Em seguida, tem de criar a galeria de encomendas e o formulário de resumo ou abrir a aplicação Encomendas da Northwind (Tela) – Iniciar Parte 3, que já contém essa galeria e esse formulário.

Criar outra barra de título

1. Na parte superior do ecrã, selecione o controlo Etiqueta que atua como uma barra de título, copie-o pressionando CTRL-C e, em seguida, cole-o pressionando Ctrl-V:

   

2. Redimensione e mova a cópia para que apareça imediatamente abaixo do formulário de resumo.

3. Remova o texto da cópia de uma das seguintes formas:

   • Faça duplo clique no texto para selecioná-lo e, em seguida, prima Delete.
   • Defina a propriedade da etiqueta Texto como uma cadeia vazia ("").

   

Adicionar uma galeria

1. Inserir um controlo Galeria com um esquema Vertical em branco:

   

   A nova galeria, que irá mostrar detalhes da encomenda, aparece no canto superior esquerdo.

2. Feche a caixa de diálogo de lista de opções da origem de dados e, em seguida, redimensione e mova a galeria de detalhes para o canto inferior direito, abaixo da nova barra de título:

   

3. Defina a propriedade Items da galeria de detalhes para esta fórmula:

   Gallery1.Selected.'Order Details'
   

   

   Se aparecer um erro, confirme que a galeria de encomendas é denominada Galeria1 (no painel Vista de árvore perto do contorno esquerdo). Se essa galeria tiver um nome diferente, mude o nome para Galeria1.

   Acabou de associar as duas galerias. Quando o utilizador seleciona uma encomenda na galeria de encomendas, essa seleção identifica um registo na tabela Encomendas. Se essa encomenda contiver um ou mais itens de linha, o registo na tabela Encomendas está ligado a um ou mais registos na tabela Detalhes da encomenda, e os dados desses registos aparecem na galeria de detalhes. Este comportamento reflete a relação de um para muitos que foi criada entre as tabelas Encomendas e Detalhes da encomenda. A fórmula que especificou "conduz" essa relação utilizando a notação de pontos:

   

Mostrar nomes de produtos

1. Na galeria de detalhes, selecione Adicionar um item do separador Inserir para selecionar o modelo de galeria:

   

   Certifique-se de que selecionou o modelo de galeria em vez da galeria propriamente dita. A caixa delimitadora deve estar levemente dentro do limite da galeria e provavelmente menor que a altura da galeria. À medida que insere controlos neste modelo, estes são repetidos para cada item na galeria.

2. No separador Inserir, introduza uma etiqueta na galeria de detalhes.

   A etiqueta deverá aparecer na galeria; se não aparecer, tente novamente, mas certifique-se de que selecionou o modelo da galeria antes de inserir a etiqueta.

   

3. Defina a propriedade Texto da nova etiqueta como esta fórmula:

   ThisItem.Product.'Product Name'
   

   Se não for apresentado texto, selecione a seta para Encomenda 0901 na parte inferior da galeria de encomendas.

4. Redimensione a etiqueta para que o texto completo seja apresentado:

   

   Esta expressão sai de um registo na tabela Detalhes da encomenda. O registo é guardado em ThisItem para a tabela Produtos da encomenda através de uma relação muitos para um:

   

   A coluna Nome do Produto (e outras colunas que está prestes a usar) são extraídas:

   

Mostrar imagens dos produtos

1. No separador Inserir, introduza um controlo Imagem na galeria de detalhes:

   

2. Redimensione e mova a imagem e a etiqueta para ficarem lado a lado.

   Gorjeta

   Para controlo refinado sobre o tamanho e a posição de um controlo, comece a redimensioná-lo ou movê-lo sem premir a tecla Alt e, em seguida, continue a redimensionar ou mover o controlo enquanto mantém premida a tecla Alt:

   

3. Defina a propriedade Image da imagem como esta fórmula:

   ThisItem.Product.Picture
   

   Novamente, a expressão referencia um produto associado a este detalhe de encomenda e extrai o campo Imagem a apresentar.

   

4. Reduza a altura do modelo da galeria para que seja apresentado mais de um registo de Detalhe da Encomenda de cada vez:

   

Mostrar quantidade e custo de produtos

1. No separador Inserir, introduza outra etiqueta na galeria de detalhes e, em seguida, redimensione e mova a nova etiqueta para a direita das informações do produto.

2. Defina a propriedade Texto da nova etiqueta como esta expressão:

   ThisItem.Quantity
   

   Esta fórmula retira informações diretamente da tabela Detalhes da encomenda (sem necessidade de relação).

   

3. No separador Home Page, altere o alinhamento deste controlo para a Direita:

   

4. No separador Inserir, introduza outra etiqueta na galeria de detalhes e, em seguida, redimensione e mova a nova etiqueta para a direita da etiqueta de quantidade.

5. Defina a propriedade Texto da nova etiqueta como esta fórmula:

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

   Se não incluir a etiqueta de idioma ([$-en-US]), esta será adicionada com base no seu idioma e região. Se utilizar uma marca de idioma diferente, pretenderá remover o $ logo após o parêntese reto de fecho (]) e, em seguida, adicionar o seu próprio símbolo de moeda nessa posição.

   

6. No separador Home Page, altere o alinhamento deste controlo para a Direita:

   

7. No separador Inserir, introduza outro controlo de etiqueta na galeria de detalhes e, em seguida, redimensione e mova a nova etiqueta para a direita do preço unitário.

8. Defina a propriedade Texto da nova etiqueta como esta fórmula:

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

   Novamente, se não incluir a etiqueta de idioma ([$-en-US]), esta será adicionada com base no seu idioma e região. Se a etiqueta for diferente, convém utilizar o seu próprio símbolo de moeda em vez do $ logo após o parêntese reto de fecho (]).

   

9. No separador Home Page, altere o alinhamento deste controlo para a Direita:

   

   Por agora, terminou a adição de controlos à galeria de detalhes.

10. No painel de Vista de árvore, selecione Ecrã1 para se assegurar que a galeria de detalhes já não está selecionada.

Adicionar texto à nova barra de título

1. No separador Inserir, introduza outra etiqueta no ecrã:

   

2. Redimensione e mova a nova etiqueta sobre as imagens dos produtos na segunda barra de título e, em seguida, altere a cor do texto para branco no separador Home Page.

3. Faça duplo clique no texto da etiqueta e, em seguida, escreva Produto:

   

4. Copie e cole a etiqueta do produto e, em seguida, redimensione e mova a cópia acima da coluna de quantidade.

5. Faça duplo clique no texto da nova etiqueta e, em seguida, escreva Quantidade:

   

6. Copie e cole a etiqueta da quantidade e, em seguida, redimensione e mova a cópia acima da coluna de preço unitário.

7. Faça duplo clique no texto da nova etiqueta e, em seguida, escreva Preço Unitário:

   

8. Copie e cole a etiqueta de preço unitário e, em seguida, redimensione e mova a cópia acima da coluna de preço total bruto.

9. Faça duplo clique no texto da nova etiqueta e, em seguida, escreva Total Bruto:

   

Apresentar totais das encomendas

1. Reduza a altura da galeria de detalhes para libertar espaço para os totais das encomendas na parte inferior do ecrã:

   

2. Copie e cole a barra de título no meio do ecrã e, em seguida, mova a cópia para a parte inferior do ecrã:

   

3. Copie e cole a etiqueta do produto a partir da barra de título do meio e, em seguida, mova a cópia para a barra de título inferior, imediatamente à esquerda da coluna Quantidade.

4. Faça duplo clique no texto da nova etiqueta e, em seguida, escreva este texto:
   Totais das Encomendas:

   

5. Copie e cole a etiqueta de totais das encomendas e, em seguida, mova a cópia para a direita da etiqueta de totais das encomendas.

6. Defina a propriedade Texto da nova etiqueta como esta fórmula:

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

   Esta fórmula mostra um aviso de delegação, mas pode ignorá-la porque uma encomenda única conterá mais de 500 produtos.

7. No separador Home Page, defina o alinhamento de texto da nova etiqueta à Direita:

   

8. Copie e cole este controlo de etiqueta e, em seguida, redimensione e mova a cópia por baixo da coluna de Total Bruto.

9. Defina a propriedade Texto da cópia como esta fórmula:

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

   Esta fórmula mostra um aviso de delegação, mas pode ignorá-la porque uma encomenda única conterá mais de 500 produtos.

   

Adicionar espaço para novos detalhes

Em qualquer galeria, pode mostrar dados, mas não pode atualizá-los nem adicionar registos. Na galeria de detalhes, irá adicionar uma área onde o utilizador pode configurar um registo na tabela Detalhes da Encomenda e inserir esse registo numa encomenda.

1. Reduza a altura da galeria de detalhes o suficiente para libertar espaço para um espaço de edição de item único sob essa galeria.

   Neste espaço, irá adicionar controlos para que o utilizador possa adicionar um detalhe da encomenda:

   

2. No separador Inserir inserir, introduza uma etiqueta e, em seguida, redimensione-a e mova-a para baixo da galeria de detalhes.

   

3. Faça duplo clique no texto da nova etiqueta e, em seguida, prima Delete:

4. No separador Home Page, defina a cor de Preenchimento da nova etiqueta para Azul Claro:

   

Seleccione um produto

1. No separador Inserir, selecione Controlos > Caixa de Combinação:

   

   O controlo da caixa de combinação aparece no canto superior esquerdo.

2. Na caixa de diálogo de lista de opções, selecione a origem de dados Produtos da Encomenda.

3. No separador Propriedades da caixa de combinação, selecione Editar (junto a Campos) para abrir o painel de Dados. Certifique-se de que o Texto primário e Searchfield estão definidos como nwind_productname.

   O nome lógico é especificado porque o painel de Dados ainda não suporta apresentar nomes neste caso:

   

4. Feche o painel de Dados.

5. No separador Propriedades, ao lado do contorno direito, desloque-se para baixo, desative Permitir seleção múltipla e certifique-se de que Permitir pesquisa está ativada:

   

6. Redimensione e mova a caixa de combinação para a área azul claro, logo abaixo da coluna de nome do produto na galeria de detalhes:

   

   Nesta caixa de combinação, o utilizador irá especificar um registo na tabela Produto para o registo de Detalhes da Encomenda que a aplicação irá criar.

7. Mantendo a tecla Alt pressionada, selecione a seta para baixo da caixa de combinação.

   Gorjeta

   Mantendo a tecla Alt pressionada, pode interagir com controlos no Power Apps Studio sem abrir o modo de Pré-visualização.

8. Na lista de produtos apresentada, seleccione um produto:

   

Adicionar uma imagem de produto

1. No separador Inserir, selecione Multimédia > Imagem:

   

   O controlo da Imagem aparece no canto superior esquerdo:

   

2. Redimensione e mova a imagem para a área azul claro por baixo das outras imagens de produto e junto à caixa de combinação.

3. Defina a propriedade de Imagem da imagem como:

   ComboBox1.Selected.Picture
   

   

   Está a utilizar a mesma rodada que utilizou para mostrar a imagem de empregado no formulário de resumo. A propriedade Selecionada da caixa de combinação devolve o registo completo do produto selecionado pelo utilizador, incluindo o campo Imagem.

Adicionar uma caixa de quantidade

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

   

   O controlo da Entrada de texto aparece no canto superior esquerdo:

   

2. Redimensione e mova a caixa de entrada de texto para a direita da caixa de combinação, abaixo da coluna de quantidade na galeria de detalhes:

   

   Utilizando esta caixa de entrada de texto, o utilizador especifica o campo Quantidade do registo Detalhes da Encomenda.

3. Definia a propriedade Predefinida deste controlo como "":

   

4. No separador Home Page, defina o alinhamento do texto deste controlo para a Direita:

   

Mostrar a unidade e os preços totais brutos

1. No separador Inserir, introduza um controlo de Etiqueta.

   A etiqueta aparece no canto superior esquerdo do ecrã:

   

2. Redimensionar e mover a etiqueta para a direita do controlo de entrada de texto e definir a propriedade da propriedade Texto da etiqueta com esta fórmula:

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

   

   Este controlo mostra a Preço da Lista da tabela Produtos da encomenda. Este valor irá determinar o campo Preço Unitário no registo Detalhes da Encomenda.

   Nota

   Para este cenário, o valor é só de leitura, mas outros cenários poderão chamar o utilizador da aplicação para modificá-lo. Nesse caso, utilize um controlo de Entrada de texto e defina a propriedade Predefinida como Preço de Lista.

3. No separador Home Page, defina o alinhamento do texto da etiqueta de lista de preços para a Direita:

   

4. Copie e cole a etiqueta de preços de listas e, em seguida, mova a cópia para a direita da etiqueta de preços de listas.

5. Defina a propriedade Texto da nova etiqueta como esta fórmula:

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

   

   Este controlo mostra o preço total bruto com base na quantidade que o utilizador da aplicação especificou e no preço de lista do produto selecionado pelo utilizador de aplicação. É puramente informativo para o utilizador da aplicação.

6. Faça duplo clique no controlo de entrada de texto para quantidade e, em seguida, escreva um número.

   A etiqueta de preço Total Bruto recalcula para mostrar o novo valor:

   

Adicionar um ícone Adicionar

1. No separador Inserir, selecione Ícones > Adicionar:

   

   O ícone aparece no canto superior esquerdo do ecrã.

   

2. Redimensione e mova este ícone para o contorno direito da área azul claro e, em seguida, defina a propriedade OnSelect do ícone para 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 )
   

   

   Em geral, a função Patch atualiza e cria registos, e os argumentos específicos nesta fórmula determinam as alterações exatas que a função irá efetuar.

   • O primeiro argumento especifica a origem de dados (neste caso, a tabela Detalhes da encomenda) em que a função irá atualizar ou criar um registo.

   • O segundo argumento especifica que a função criará um registo com os valores predefinidos para a tabela Detalhes da encomenda, salvo especificação em contrário no terceiro argumento.

   • O terceiro argumento especifica que quatro colunas no novo registo conterão valores do utilizador.

     • A coluna Encomenda conterá o número da ordem que o utilizador selecionou na galeria de encomendas.
     • A coluna Produto conterá o nome do produto selecionado pelo utilizador na caixa de combinação que mostra produtos.
     • A coluna Quantidade conterá o valor que o utilizador especificou na caixa de entrada de texto.
     • A coluna Preço Unitário conterá o preço de lista do produto selecionado para este detalhe do pedido pelo utilizador.

   Nota

   Pode construir fórmulas que utilizem dados de qualquer coluna (na tabela Produtos da Encomenda) para qualquer produto que o utilizador da aplicação selecione na caixa de combinação que mostra os produtos. Quando o utilizador seleciona um registo na tabela Produtos da encomenda, não só o nome do produto aparece nessa caixa de combinação como também o preço unitário do produto aparece numa etiqueta. Cada valor de pesquisa numa aplicação de tela referencia um registo inteiro, e não apenas uma chave primária.

   A função Atualizar garante que a tabela Encomendas reflete o registo que acaba de adicionar à tabela Detalhes da Encomenda. A função de Repor elimina os dados de produto, a quantidade e de preços unitários, para que o utilizador possa criar mais facilmente outro detalhe de encomenda pela mesma ordem.

3. Prima F5 e, em seguida, selecione o ícone Adicionar.

   A encomenda reflete as informações que especificou:

   

4. (opcional) Adicionar outro item à encomenda.

5. Prima ESC para fechar do modo de Pré-visualização.

Remover um detalhe da encomenda

1. No centro do ecrã, selecione o modelo da galeria de detalhes:

   

2. No separador Inserir, selecione Ícones > Lixo:

   

   O ícone Lixo aparece no canto superior esquerdo do ecrã do modelo da galeria.

   

3. Redimensione e mova o ícone Lixo para o lado direito da área do modelo da galeria de detalhes e defina a propriedade OnSelect do ícone para esta fórmula:

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

   

   A partir deste texto, não é possível remover um registo diretamente de uma relação, pelo que a função Remover remove um registo diretamente da tabela relacionada. ThisItem especifica o registo a remover, tirado do mesmo registo na galeria de detalhes em que o ícone Lixo é apresentado.

   Mais uma vez, a operação utiliza dados em cache, pelo que a função Atualizar informa a tabela Encomendas de que a aplicação alterou uma das suas tabelas relacionadas.

4. Prima F5 para abrir o modo de Pré-visualização e, em seguida, selecione o ícone Lixo junto de cada registo Detalhes da Encomenda que pretende remover da encomenda.

5. Experimente adicionar e remover vários detalhes de encomenda das suas encomendas:

   

Em conclusão

Para recapitular, adicionou outra galeria para mostrar os detalhes da encomenda e os controlos que adicionam e removem um detalhe da encomenda na aplicação. Utilizou estes elementos:

• Um segundo controlo Galeria, associado à galeria de encomendas através de uma relação um-para-muitos: Gallery2.Items = Gallery1.Selected.'Order Details'
• Relação de muitos para um da tabela de Detalhes da encomenda para a tabela Produtos da encomenda: ThisItem.Product.'Product Name' e ThisItem.Product.Picture
• A função de Opções para obter uma lista de produtos: Choices( 'Order Details'.Product' )
• A propriedade Selecionado de uma caixa de combinação como registo completo relacionado muitos-para-um: ComboBox1.Selected.Picture e ComboBox1.Selected.'List Price'
• A função Patch para criar um registo Detalhes da Encomenda: Patch( 'Order Details', Defaults( 'Order Details' ), ... )
• A função Remover para eliminar um registo Detalhes da Encomenda: Remove( 'Order Details', ThisItem )

Esta série de tópicos foi uma rápida apresentação sobre a utilização de relações e escolhas do Dataverse numa aplicação de tela para fins educacionais. Antes de libertar qualquer aplicação para produção, deve considerar a validação de campos, a manipulação de erros e muitos outros fatores.

Nota

Pode indicar-nos as suas preferências no que se refere ao idioma da documentação? Responda a um breve inquérito. (tenha em atenção que o inquérito está em inglês)

O inquérito irá demorar cerca de sete minutos. Não são recolhidos dados pessoais (declaração de privacidade).