Exercício: usar variáveis e coleções

Concluído

Este laboratório prático mostra como criar e usar funções Globais, Contextuais e de Coleção.

1. Entre no Power Apps maker portal (make.powerapps.com).

2. No painel de navegação esquerdo da tela inicial, selecione + Criar, selecione Aplicativo em branco e, na janela pop-up Criar, em Aplicativo de tela em branco, selecione Criar.

3. Nomeie seu aplicativo como Exercício de coleção, deixe o formato como Tablet e selecione Criar.

4. Após alguns momentos, seu novo aplicativo será exibido. Você poderá ir a caixa de diálogo de boas-vindas (se ela for mostrada). No painel de Exibição em árvore, localize e selecione o objeto Aplicativo e selecione a propriedade OnStart.

   

5. Defina a propriedade OnStart para esta fórmula que estamos usando para criar uma coleção de números de clientes e os números de fatura associados (basta copiar e colar na barra de fórmulas fx):

   ClearCollect(colCustomer,
   {CustomerNumber: 7470, InvoiceNumber: "INV70817"},
   {CustomerNumber: 4259, InvoiceNumber: "INV29595"},
   {CustomerNumber: 8251, InvoiceNumber: "INV74302"},
   {CustomerNumber: 2338, InvoiceNumber: "INV35115"},
   {CustomerNumber: 1524, InvoiceNumber: "INV82337"},
   {CustomerNumber: 1530, InvoiceNumber: "INV82338"}
   );
   Set(varUserDisplayName, User().FullName)
   

6. Selecione as reticências (...) ao lado do objeto Aplicativo e selecione Executar OnStart. Isso executará a fórmula OnStart que você acabou de inserir e preencherá sua coleção colCustomer.

7. Para visualizar a coleção, selecione a guia Inserir (ou + Inserir na barra de comandos), adicione uma Galeria vertical e defina a propriedade Items dela como colCustomer.

   Faça as alterações abaixo em sua nova Gallery1 usando o painel Propriedades à direita da tela:

   • Layout: Título e subtítulo

   • Altura: 650

   • Campos: altere o Título para refletir CustomerNumber no painel Dados (como alternativa, você pode selecionar o rótulo Título na galeria e alterar a propriedade Text para ThisItem.CustomerNumber)

   • Exclua o ícone NextArrow (selecione-o na galeria)

8. Na Galeria, selecione o lápis de edição circulado ou o rótulo Título e use a guia Inserir para adicionar um Ícone. Procure e selecione o ícone Lixeira. Mova o ícone de Lixeira para o lado direito da galeria.

   Agora, a Galeria incluirá o ícone de Lixeira.

   

9. Selecione o ícone de Lixeira e a fórmula abaixo para sua propriedade OnSelect:

   Remove(colCustomer,ThisItem)

10. Mantenha pressionada a Tecla Alt e selecione o primeiro ícone de Lixeira.

    Isso excluirá a linha selecionada da coleção. Enquanto esse processo funciona, você provavelmente deseja exibir uma mensagem de aviso de que a linha será excluída.

    Ao empregar uma variável contextual, vamos criar um aviso pop-up para informar o usuário sobre a exclusão pendente e dar a ele a opção de cancelar.

11. Primeiro, altere OnSelect do ícone de Lixeira para o seguinte:

    UpdateContext({varPopup:true})

12. Para criar o pop-up, selecione a tela (fora do controle da galeria) e use Inserir para adicionar um Retângulo (você pode digitar "retângulo" na caixa de pesquisa do menu Inserir para encontrá-lo rapidamente).

13. Faça as propriedades Rectangle da seguinte maneira:

    • Nome: rectangle_backgrd

    • Tamanho: 744 (largura); 720 (altura)

    • Preenchimento: RGBA (166, 166, 166, 0,50)

    Posicione o retângulo para cobrir a galeria.

14. Adicione outro Retângulo e atualize suas propriedades para:

    • Nome: rectangle_foregrd

    • Tamanho: 744 (largura); 348 (altura)

    • Fill: RGBA(255, 255, 255, 1)

    • BorderThickness: 1

    Posicione esse retângulo para caber na parte superior do outro retângulo.

15. Selecione Inserir>Rótulo de texto.

16. Faça as alterações a seguir nas propriedades do rótulo de Texto:

    • Nome: lbl_popup

    • Tamanho da fonte: 15

    • Espessura da fonte: Negrito

    • Alinhamento do texto: Centralizado

17. Defina o Texto de lbl_popup como a fórmula abaixo:

    varUserDisplayName & "
    Please click Delete to confirm deletion of Invoice#" & " " & Gallery1.Selected.InvoiceNumber
    

18. Selecione Inserir>Botão e nomeie seu novo botão: button_Delete; defina a propriedade Text dele como Delete

19. Defina a propriedade Delete ButtonOnSelect da seguinte maneira:

    Remove(colCustomer,LookUp(colCustomer,CustomerNumber=Gallery1.Selected.CustomerNumber));
    UpdateContext({varPopup:false})
    

20. Selecione a guia Inserir>Botão e nomeie seu novo botão: button_Cancel; defina a propriedade Text dele como Cancel

21. Defina a propriedade Cancel Button OnSelect da seguinte maneira:

    UpdateContext({varPopup:false})

22. Organize os novos controles que você criou sobre Gallery1 assim:

    

23. Agora vamos selecionar todos esses controles juntos para que possamos agrupá-los. Enquanto mantém pressionada a tecla Ctrl, selecione os seguintes controles:

    • rectangle_backgrd

    • rectangle_foregrd

    • lbl_popup

    • button_Delete

    • button_Cancel

24. Com todos eles selecionados, clique com o botão direito do mouse e selecione Grupo. Defina a propriedade Visible de Group1 como:

    varPopup

    Isso deve fazer com que todas desapareçam da tela, mas, se não acontecer isso, pressione e segure a tecla Alt e selecione o botão Cancelar.

    Você criou uma caixa de pop-up que excluirá o Cliente selecionado da galeria.

    Vamos testar a função Excluir.

25. Mantenha pressionada a Tecla Alt e selecione o primeiro ícone de Lixeira para a fatura nº INV29595.

26. Selecione o botão Excluir; INV29595 será removida da galeria e seu pop-up desaparecerá.

27. Agora, mantenha pressionada a tecla Alt novamente e selecione o ícone de Lixeira para a fatura nº INV74302.

28. Desta vez, selecione o botão Cancelar. A janela pop-up é fechada e INV74302 permanece na galeria.

Você criou uma coleção dinâmica, uma variável global e um pop-up que usa uma variável contextual.

Continuar