Exercício: formatar dados com aplicativos de tela

  • 15 minutos

Neste exercício, você formatará dados no aplicativo de tela.

Será necessário baixar a planilha para realizar este exercício. Selecione "baixar" quando o link abrir. Extraia a planilha do Excel e carregue-a no seu OneDrive.

Adicionar uma fonte de dados

  1. Entre no Power Apps.

  2. Selecione + Criar no lado esquerdo.

  3. Selecione Começar com uma tela em branco.

    Captura de tela da exibição da galeria no aplicativo.

  4. Selecione o Tamanho do tablet.

  5. Selecione o ícone Salvar, no canto superior direito, e nomeie-o como "ShapeData".

  6. Verifique se você adicionou esta planilha do Excel ao seu OneDrive.

  7. Na lista suspensa Inserir, selecione Galeria Vertical.

    Captura de tela da seleção da exibição Galeria Vertical no seu aplicativo.

  8. Na caixa Pesquisar do menu pop-up que aparece, digite OneDrive for Business e selecione OneDrive for Business na lista. Você também pode expandir Conectores e percorrer todos os conectores disponíveis até encontrar o OneDrive for Business.

    Captura de tela da exibição de galeria adicionando OneDrive for Business no seu aplicativo.

  9. Selecione + Adicionar uma conexão.

  10. Na parte inferior do OneDrive for Business, selecione Conectar.

  11. Quando aparecer a solicitação para Escolher um arquivo do Excel, navegue até o local onde você armazenou o arquivo do Excel baixado na etapa 3 e selecione-o.

  12. Verifique a tabela Itens e selecione Conectar.

Você se conectou à sua tabela do Excel na lista do OneDrive for Business e pode exibir os dados no controle da galeria.

  1. Selecione a galeria adicionada.

  2. No painel de propriedades à direita, selecione o menu suspenso da propriedade Layout.

  3. Selecione o layout Imagem, título, subtítulo e corpo.

    Captura de tela da exibição de propriedades da galeria no aplicativo.

  4. No painel de propriedades à direita, selecione o texto em roxo 8 Seleções ao lado da propriedade Fields e defina os seguintes pontos:

    • Body1: Description

    • Image2: Image

    • Subtitle2: UnitPrice

    • Title2: Name

    Captura de tela do layout do modo de exibição de propriedades em seu aplicativo.

  5. Para sair, selecione o X à direita de Dados.

  6. Na galeria, selecione o preço na primeira linha.

  7. Na barra de fórmulas, verifique se Texto está selecionado e digite o seguinte:

    "$" & ThisItem.UnitPrice

    Captura de tela da exibição de seleção visível no aplicativo.

  8. Na galeria, selecione a imagem na primeira linha.

  9. No painel de propriedades à direita, selecione o menu suspenso da propriedade Image Position.

    Captura de tela da opção 8 seleções no seu aplicativo.

  10. Selecione Preencher, e você verá que a imagem agora preenche o espaço.

Você configurou e interagiu com os dados em sua galeria.

  1. Faça uma seleção na galeria.

  2. Verifique se a propriedade Items está selecionada na barra de fórmulas.

  3. Altere a expressão para:

    Filter(Items, Origin = "China")

    Observe que a galeria mostra apenas dois itens em que a origem é China.

  4. Tente fazer a mesma coisa, mas com o operador And:

    Filter(Items, Origin = "China" And UnitsSold > 25)

    Observe que a galeria mostra apenas um item que corresponde aos dois critérios acima.

    Captura de tela mostrando o item selecionado em seu aplicativo.

  5. Agora, vamos alterar a propriedade Items de volta para a Fonte de Dados Itens. Veremos esta função Filtro posteriormente.

    Items

Usando a função Search

  1. Na lista suspensa Inserir, selecione Entrada de Texto. Posicione a Entrada de Texto acima da galeria.

  2. No painel esquerdo, em Modo de Exibição de Árvore > Telas > Screen1 > selecione os três pontos à direita e Renomear para renomear a entrada de texto como SearchInput. Estamos renomeando esse componente para consultá-lo posteriormente.

    Captura de tela da opção pesquisar no seu aplicativo.

  3. Agora, selecione na galeria. Verifique se a propriedade Items está selecionada na barra de fórmulas e escreva esta expressão:

    Search(Items, SearchInput.Text, Name)

    O que você tem é:

    Search(Items...): uma função que permite realizar uma consulta mais flexível em uma coluna de cadeia de caracteres.

    SearchInput.Text: recupera o texto digitado no controle de entrada de texto SearchInput.

    Name: representa a coluna na qual a pesquisa é feita

    Isso retorna todas as linhas em que a coluna Name inclui o valor inserido no controle de Entrada de Texto SearchInput.

  4. Se desejasse pesquisar mais de uma coluna de cadeia de caracteres, você poderia acrescentar os nomes das colunas no final da expressão. Na fórmula abaixo, adicionamos "Description".

    Search(Items, SearchInput.Text, Name, Description)

Combinar funções de data shaping

Como explicado na unidade 3, você pode combinar funções para obter uma funcionalidade mais complexa no aplicativo. Testamos as funções Filter e Search, e agora vamos combiná-las em uma única função.

  1. Comece com a função Search que concluímos na etapa anterior.

  2. Substitua Items por Filter(Items, Origin = "China"), o que mudará a aparência da expressão para:

    Search(Filter(Items, Origin = "China"), SearchInput.Text, Name, Description)

Para a função Search, a primeira opção que você deve fornecer é uma tabela de dados. A função Filter retorna uma tabela de dados. Isso significa que é possível usar a função Filter como uma fonte de dados para a função Search. Ao adicionar essa opção como uma fórmula para a propriedade Items do controle de galeria, você exibe aos usuários os dados que eles precisam com o recurso adicional Search.

No Power Apps, você pode utilizar em vários locais o conceito de uso de função para fornecer informações a outra função.

Mover dados entre coleções e fontes de dados

  1. Insira um controle de botão selecionando a lista suspensa Inserir. Em seguida, selecione Botão e posicione o botão abaixo da galeria.

  2. Altere o texto no botão para Adicionar à Coleção.

  3. Selecione o botão e, na barra de fórmulas, substitua false por esta expressão:

    Collect(ItemsCollection, Items)

    ItemsCollection: refere-se ao nome da coleção

    Itens: refere-se ao nome da fonte de dados

    Coletar: copia todas as linhas de Items para a coleção ItemsCollection

    Captura de tela da exibição de coleções no aplicativo.

  4. Reproduza (visualização) o aplicativo usando o ícone Reproduzir no canto superior direito. Pressione o botão Adicionar à Coleção. Feche a visualização da reprodução selecionando o X no canto superior direito.

  5. Selecione a guia Variáveis, no lado esquerdo, expanda Coleções e selecione ItemsCollection. Você verá que todas as linhas da fonte de dados Itens foram adicionadas à coleção ItemsCollection.

    Captura de tela da exibição de variáveis no aplicativo.

  6. Na lista suspensa Inserir, selecione Tabela de Dados e posicione-a ao lado da galeria.

  7. Na barra de fórmulas, verifique se Items está selecionado e insira ItemsCollection.

    Isso significa que a Fonte de Dados da tabela é a coleção ItemsCollection, e não a tabela Items na planilha do Excel.

  8. No painel de propriedades à direita, vamos ajustar os campos selecionando o texto roxo 2 Seleções ao lado da propriedade Fields.

  9. Selecione + Adicionar campo.

  10. Selecione todas as colunas disponíveis e Adicionar.

    Captura de tela da exibição de colunas disponíveis em seu aplicativo.

  11. Para sair, selecione o X à direita de Dados.

  12. Na guia Inserir, selecione Botão e posicione-o botão abaixo da tabela. Repita esse processo quatro vezes.

  13. Altere o texto em todos os quatro botões para: Adicionar Coluna, Descartar Coluna, Mostrar Coluna e Renomear Coluna, respectivamente.

    Captura de tela do texto nos botões do aplicativo.

  14. Selecione o botão Adicionar Coluna.

  15. Atualize a barra de fórmulas para esta expressão:

    Collect(AddCollection, AddColumns(ItemsCollection, Revenue, UnitPrice * UnitsSold))

    Aqui, criamos uma coleção chamada AddCollection, que copia todos os dados da coleção ItemsCollection, mas além disso, usamos a função AddColumns para adicionar uma nova coluna chamada Receita, que é calculada como Preço Unitário * UnitsSold.

  16. Selecione o botão Descartar coluna.

  17. Atualize a barra de fórmulas para esta expressão:

    Collect(DropCollection, DropColumns(ItemsCollection, UnitPrice))

    Aqui criamos uma coleção chamada DropCollection, que copia todos os dados da coleção ItemsCollection, mas além disso, usamos a função DropColumns para remover a coluna Preço Unitário.

  18. Selecione o botão Renomear coluna.

  19. Atualize a barra de fórmulas para esta expressão:

    Collect(RenameCollection, RenameColumns(ItemsCollection, Name, Product))

    Aqui criamos uma coleção chamada RenameCollection, que copia todos os dados da coleção ItemsCollection, mas além disso, usamos a função RenameColumns para renomear a coluna Nome para Produto.

  20. Selecione o botão Mostrar coluna.

  21. Atualize a barra de fórmulas para esta expressão:

    Collect(ShowCollection, ShowColumns(ItemsCollection, Name))

    Aqui, criamos uma coleção chamada ShowCollection, que copia todos os dados da coleção ItemsCollection, mas além disso, usamos a função ShowColumns para mostrar somente a coluna Name.

  22. Reproduza (visualização) o aplicativo usando o ícone Reproduzir no canto superior direito. Pressione todos os quatro botões. Feche a visualização da reprodução selecionando o X no canto superior direito.

  23. Selecione a guia Variáveis, no lado esquerdo, expanda Coleções e você verá as coleções com os resultados da seleção dos botões.

    Captura de tela da exibição da galeria expandida no aplicativo.

Espero que agora você possa ver as possibilidades de formatar dados no seu aplicativo!