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. Crie um aplicativo de tela do Power Apps do zero chamado "ShapeData". Selecione o formato Tablet.

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

  4. Na guia Inserir, selecione Galeria e, depois, a opção de galeria vertical.

  5. No painel de propriedades à direita, selecione o menu suspenso da propriedade Fonte de dados.

  6. Na caixa Pesquisar, digite OneDrive for Business e selecione o OneDrive for Business na lista. Você também pode expandir Conectores e percorrer todos os conectores disponíveis até encontrar o OneDrive for Business.

  7. Selecione + Adicionar uma conexão.

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

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

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

Formatar dados na 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.

  4. No painel de propriedades à direita, selecione o botão Editar da propriedade colunas e defina os seguintes pontos:

    • Body1: descrição

    • Image2: imagem

    • Subtitle2: UnitPrice

    • Title2: nome

  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

  8. Na galeria, selecione a imagem na primeira linha

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

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

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

Filtrar dados em uma galeria

  1. Selecionar na galeria

  2. Verifique se a propriedade Itens 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 E

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

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

  5. Agora, vamos alterar a propriedade Itens de volta para a fonte de dados "Itens". Veremos esta função Filtro posteriormente.

    Items

Usar a função Pesquisar

  1. Na guia Inserir, selecione Entrada e, em seguida, 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 este componente para consultá-lo posteriormente.

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

  3. Agora, selecione a galeria. Verifique se a propriedade "Itens" 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.

    "Nome": representa a coluna na qual a pesquisa é feita

    Isso retorna todas as linhas em que a coluna Nome inclui o valor inserido no controle SearchInput de Text Input.

  4. Se você quiser pesquisar mais de uma coluna, poderá acrescentar os nomes das colunas no final da expressão.

    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 Filtro e Pesquisar, e agora é hora de combiná-las em uma única função.

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

  2. Substitua Itens por Filtro (Itens, Origem = "China"), o que mudará a aparência da expressão para:

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

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

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. Na guia Inserir, 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 "falso" 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 Itens para a coleção ItemsCollection

  4. Execute o aplicativo. selecione o botão. Pare de executar o aplicativo.

  5. Na guia Exibir, selecione Coleções e, depois, ItemsCollection. Em seguida, você verá que todas as linhas da fonte de dados Itens foram adicionadas à coleção ItemsCollection

Explorar outras funções que podem ser usadas com Coleções

  1. Na guia Inserir, selecione Nova tela e Em branco

  2. Na guia Inserir, selecione Tabela de dados e posicione-a ao lado da galeria.

  3. Na barra de fórmulas, verifique se "Itens" está selecionado e insira ItemsCollection.

    Isso significa que a fonte de dados da tabela é a coleção ItemsCollection, e não a tabela Itens na planilha do Excel.

  4. No painel de propriedades à direita, selecione o botão Editar colunas da propriedade colunas.

  5. Selecione + Adicionar coluna

  6. Selecione todas as colunas disponíveis e Adicionar

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

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

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

  10. Selecione o botão Adicionar coluna.

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

  12. Selecione o botão Descartar coluna.

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

  14. Selecione o botão Renomear coluna.

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

  16. Selecione o botão Mostrar coluna.

  17. 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 Nome.

  18. Execute o aplicativo. Selecione todos os quatro botões. Pare de executar o aplicativo.

  19. Na guia Exibir, selecione Coleções e cada uma das coleções adicionais que você criou para ver o efeito que as funções tinham.