Exercício: trabalhar com dados externos em um aplicativo de tela

  • 15 minutos

Neste exercício, você trabalhará com dados externos no seu aplicativo de tela, adicionando uma fonte de dados, criando/modificando dados e usando coleções por meio da função Patch.

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 e nomeie-o como ExternalData. Selecione o formato Tablet.

  3. Não se esqueça de adicionar a planilha do Excel (link acima) ao seu OneDrive.

  4. No botão Inserir na faixa de opções do cabeçalho, selecione Galeria vertical.

  5. No painel Selecionar uma fonte de dados da galeria, digite "OneDrive" no campo de pesquisa e, em seguida, selecione OneDrive for Business na lista. Como alternativa, você também pode expandir Conectores e percorrer todos os conectores disponíveis até encontrar o OneDrive for Business.

    Captura de tela da adição de uma fonte de dados do OneDrive a uma galeria.

  6. Em Adicionar uma conexão, selecione a conexão que deseja usar para o OneDrive for Business (ela terá um endereço de email listado nela).

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

  8. Quando aparecer a solicitação para Escolher um arquivo do Excel, procure ou vá até o arquivo do Excel baixado na etapa 3 e selecione-o.

  9. No painel Escolher uma tabela, verifique a tabela Itens e selecione Conectar.

    Sua galeria agora está conectada à sua tabela do Excel chamada "Itens" no OneDrive for Business. Verifique se a propriedade Items da galeria está relacionada à tabela Items. A galeria deve mostrar as três entradas na tabela.

    Captura de tela da adição de uma fonte de dados do OneDrive aos itens de uma galeria.

  1. Verifique se você selecionou o controle de galeria que adicionou.

  2. No painel de propriedades à direita, selecione o menu suspenso da propriedade Layout. Como alternativa, ao passar o mouse sobre o controle selecionado, você verá um botão Layout selecionável com as mesmas opções.

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

  4. No painel de propriedades à direita, selecione o botão Editar para a propriedade Fields (8 seleções) e defina os campos da seguinte maneira (observe que os controles têm números atrás deles, por exemplo Body é "Body1"; consulte a imagem abaixo para referência):

    • Corpo: Descrição

    • Imagem: Imagem

    • Subtítulo: UnitPrice

    • Título: Nome

    Como alternativa, você pode passar o cursor do mouse sobre o controle selecionado e selecionar o botão Campos no menu de foco que aparece sobre o controle. Depois de fazer os ajustes, basta selecionar novamente o botão Campos para fechar a opção.

    Captura de tela dos campos da galeria.

  5. Feche a caixa de diálogo Dados.

  6. Na galeria, selecione o preço na primeira linha. Modifique a propriedade Text para: Text(ThisItem.UnitPrice,"$###.00")

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

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

  9. Altere a propriedade de Fit para Fill e você verá que a imagem se expande para preencher as dimensões do controle de imagem.

Agora adicionamos, personalizamos e configuramos os dados na sua galeria.

Mover dados entre coleções e fontes de dados

  1. Selecione Tela1 (em qualquer lugar fora da galeria).

  2. Vamos adicionar um botão selecionando o botão Inserir na faixa de opções do aplicativo. Selecione Botão e posicione o novo controle de botão abaixo da galeria.

  3. Altere Texto no botão para Adicionar à Coleção e ajuste o Tamanho da fonte de 15 a 12 para que o texto se ajuste ao botão em uma única linha.

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

     ClearCollect(colItemsCollection, Items)

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

    Items: refere-se ao nome da fonte de dados

    ClearCollect: limpa todos os itens existentes e copia todos os registros de Items para a coleção colItemsCollection

    Captura de tela do botão Adicionar à coleção.

  5. Selecione o botão Visualizar no canto superior direito do editor do Power Apps (ou pressione F5) para entrar no modo de versão preliminar. Selecione o botão Adicionar à coleção e saia do modo de versão preliminar. Como alternativa, mantenha pressionada a tecla Alt e selecione o botão Adicionar à coleção.

  6. No trilho do lado esquerdo, selecione o botão Variáveis, expanda a opção Coleções e selecione as reticências ao lado de colItemsCollection que você criou. Selecione a opção Exibir Tabela.

    Captura de tela mostrando o menu Variáveis com Coleções expandido e o botão Exibir Tabela realçado.

  7. Agora você deve ver uma janela pop-up mostrando a tabela armazenada em sua coleção. Observe que os três registros da fonte de dados Itens foram adicionados à coleção colItemsCollection. Você pode exibir qualquer uma das coleções do aplicativo e outras variáveis usando essa técnica.

    Captura de tela das variáveis.

  8. Selecione Cancelar para fechar a exibição pop-up e retornar à tela do aplicativo.

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

  1. Na Exibição de árvore, selecione Nova tela>Em branco.

  2. Selecione o botão Inserir, procure Dados e selecione Tabela de dados. Um controle de tabela de dados nos permite visualizar rapidamente dados tabulares.

    Close-up do botão + Inserir com 'dados' inseridos no campo de pesquisa e Tabela de dados realçada.

  3. Agora, vá para o painel Propriedades à direita e selecione a tabela Itens como a fonte de dados. Você verá Name, UnitPrice e UnitsSold aparecerem como colunas no controle.

  4. Na propriedade Items para o controle de tabela de dados, exclua Items e insira: colItemsCollection

  5. Insira um botão selecionando Inserir na faixa de opções, selecionando Botão e posicionando o botão abaixo da tabela. Adicione mais três botões da esquerda para a direita sob o controle da tabela de dados na tela.

  6. Altere o texto nos quatro botões para Adicionar coluna, Descartar coluna, Mostrar coluna e Renomear coluna, respectivamente. Você pode fazer isso simplesmente clicando duas vezes em cada botão e digitando o novo nome. Ajuste o tamanho da fonte do botão Renomear Coluna para 12, para que se ajuste em uma única linha.

  7. Selecione o botão Adicionar Coluna e atualize a propriedade OnSelect para esta expressão:

    Collect(colAddCollection, AddColumns(colItemsCollection, Revenue, UnitPrice * UnitsSold))

    Ao passar por este exercício, você provavelmente notou o ícone do Copilot na barra de fórmulas. O Copilot pode lhe dar uma explicação para o que está acontecendo em sua fórmula.

  8. Selecione o ícone do Copilot na barra de fórmulas da propriedade OnSelect do botão Adicionar Coluna. Em seguida, selecione Explicar esta fórmula.

    Aparecerá uma Explicação da fórmula semelhante a esta imagem. Observe também uma função Copy, que você pode usar para adicionar comentários à sua fórmula.

    Captura de tela da explicação da fórmula.

    Nosso exemplo obtém esta explicação do Copilot: Esta expressão adiciona uma nova coluna chamada "Revenue" à tabela "colItemsCollection" multiplicando as colunas "UnitPrice" e "UnitsSold", então coleta a tabela atualizada na coleção "colAddCollection".

    Você pode até copiar a explicação do Copilot e adicioná-la à sua fórmula como uma linha de "comentários". Basta adicionar duas barras na frente do código "//", informando ao Power Apps que sua linha não é código executável.

  9. Selecione o botão Descartar Coluna na tela e atualize a propriedade OnSelect para esta expressão:

    Collect(colDropCollection, DropColumns(colItemsCollection, UnitPrice))

    Tente usar o Copilot - Explicar esta fórmula novamente.

  10. Selecione o botão Mostrar Coluna e atualize a propriedade OnSelect para esta expressão:

    Collect(colShowCollection, ShowColumns(colItemsCollection, Name))

    Selecionar esse botão cria uma nova coleção chamada * colShowCollection, que inclui todos os dados da coleção colItemsCollection, mas usa a função ShowColumns para mostrar apenas a coluna Name.

  11. Selecione o botão Renomear Coluna e atualize a propriedade OnSelect para esta expressão:

    Collect(colRenameCollection, RenameColumns(colItemsCollection, Name, Product))

    Selecionar esse botão cria uma nova coleção chamada colRenameCollection, que inclui todos os dados da coleção colItemsCollection, mas usar a função RenameColumns altera a coluna Name para Product.

  12. Selecione o botão Visualizar (ou Reproduzir) no canto superior direito do editor do Power Apps para entrar no modo de versão preliminar. Selecione os quatro botões. Em seguida, saia do modo de visualização. Acabamos de criar mais quatro coleções.

  13. Vamos conferir as quatro novas coleções que criamos. Selecione Variables>Collections e selecione as reticências ao lado de colAddCollection e Exibir Tabela. Observe como sua janela pop-up Variáveis tem um menu no lado esquerdo mostrando todas as quatro novas coleções que criamos, juntamente com a coleção original. Você pode selecionar cada um deles para ver o efeito na coleção original que foi exibida na tabela de dados.

    colAddCollection

    Captura de tela de colAddCollection. colDropCollection

    Captura de tela de colDropCollection. colShowCollection

    Captura de tela de colShowCollection. colRenameCollection

    Captura de tela de colRenameCollection.

    Feche a janela pop-up Variáveis após conferir. Lembre-se de que as coleções são tabelas de dados temporários disponíveis apenas durante o uso do aplicativo e disponíveis apenas para o usuário atual. Então, quando você fecha o aplicativo, eles não são mais mostrados.

Trabalhar com a função Patch

  1. Retorne a Screen 1 no aplicativo.

  2. Adicione um controle Text label (selecione o botão Inserir e Rótulo de Texto). Renomeie a propriedade Text como Nome do produto. Você pode fazer isso clicando duas vezes no rótulo e digitando diretamente no controle. Em seguida, posicione o rótulo ao lado da galeria.

    Dica

    Uma técnica fácil de copiar e colar um controle rapidamente é selecioná-lo, pressionar e segurar a tecla Ctrl e pressionar C. Em seguida (ainda segurando a tecla Ctrl), pressione V. Você verá o item colar um pouco abaixo e à direita do controle que acabou de copiar.

  3. Com o rótulo selecionado, copie-o e torne o Texto do rótulo copiado Nova Descrição.

  4. Use o botão Inserir novamente para inserir um controle de Entrada de texto. Limpe a propriedade Default para que fique em branco. Em seguida, copie esse controle e posicione as duas entradas de texto ao lado dos rótulos criados nas etapas acima. Sua tela deve ser semelhante à imagem abaixo.

    Captura de tela com entradas de rótulo.

    Os preços mostrados nesta imagem são apenas para fins de exemplo e não se destinam a refletir os preços reais.

  5. Em seguida, insira um controle Botão e posicione-o abaixo dos rótulos. Altere a propriedade Text para Atualizar.

  6. Selecione a entrada de texto à direita do rótulo Nome do produto.

  7. Na barra de fórmulas, verifique se a propriedade Default está selecionada e altere a expressão para o seguinte (lembre-se de que seu controle de galeria pode ter um nome diferente de Gallery1; altere a fórmula de acordo):

    Gallery1.Selected.Name

    Esse rótulo exibe agora o Nome do registro selecionado da galeria. Você pode testar isso colocando o aplicativo no modo de versão preliminar (ou pressione e segure a tecla Alt) e selecionando itens diferentes da galeria. Observe como o Nome do produto exibido é alterado conforme você seleciona diferentes itens da galeria.

  8. Repita este processo para o controle de entrada de texto à direita do rótulo Nova descrição. Configure a fórmula Default:

    Gallery1.Selected.Description

    Outro item a observar é a barra vertical escura exibida no lado esquerdo do item da galeria selecionado.

  9. Selecione o botão Atualizar.

  10. Altere a propriedade OnSelect do botão para esta expressão:

    Patch(Items,LookUp(Items, Name = TextInput1.Text), { Description: TextInput1_1.Text })

    Observação

    Os controles de entrada de texto podem ter nomes diferentes do exemplo. Ajuste sua fórmula apropriadamente.

Vamos recapitular o que fizemos. Criamos uma forma simples de atualizar a descrição do produto selecionado.

  • Patch: fornece os meios para modificar ou criar um registro na fonte de dados. Neste caso, estamos modificando um registro.

  • LookUp: usa o nome do produto para encontrar o registro específico que queremos modificar. LookUp retorna o primeiro registro que corresponde à nossa condição: Name = TextInput1.Text.

  • Depois que o Power Apps encontra o registro correspondente (por meio de LookUp), ele atualiza a Descrição do item na fonte de dados, com base no que foi digitado na entrada de texto de Nova Descrição.

Teste isso visualizando seu aplicativo. Selecione o item Cinnamon na galeria e substitua a descrição atual por "Cinnamon flavored Green Tea" e selecione Atualizar. Após um momento, a descrição na galeria é alterada para a nova descrição atualizada.

Captura de tela do formulário de saída final com alteração para Cinnamon.

Parabéns! Você aprendeu uma técnica simples para atualizar sua fonte de dados via Patch e como usar/modificar seus dados dentro do aplicativo usando coleções.