Exercício – Adicionar uma fonte de dados ao aplicativo de tela e projetar páginas funcionais

  • 8 minutos

No Power Apps, você pode conectar seus dados a um aplicativo existente ou a um aplicativo que está criando do zero. Seu aplicativo pode se conectar ao SharePoint, Microsoft Dataverse, Salesforce, OneDrive ou qualquer outra fonte de dados.

Usaremos o SharePoint como fonte de dados principal para este aplicativo. Você pode se conectar ao site do SharePoint para gerar automaticamente um aplicativo por meio de uma lista personalizada, criar uma conexão antes de adicionar dados a um aplicativo existente ou criar um aplicativo do zero.

Criar um site do SharePoint

  1. Entre no portal do SharePoint com suas credenciais de organização da Microsoft.

  2. Selecione + Criar site na página inicial do SharePoint para criar o site do SharePoint.

    Captura de tela mostrando como criar um site na página inicial do SharePoint.

  3. Na página inicial do SharePoint, você encontrará as seguintes informações:

    • Escolha o tipo de site; a opção é site de comunicação ou site de equipe. Selecione Site de comunicação.

    • Insira um nome adequado para o site, por exemplo, Vendas fáceis.

    • Adicione a Descrição do site, se necessário (opcional).

    • Selecione o Idioma de sua escolha no menu suspenso.

  4. Selecione Concluir para criar um site no SharePoint para carregar seus dados.

    Captura de tela da atualização dos detalhes do site.

Um moderno site do SharePoint está criado e pronto para uso em segundos. Agora você pode criar uma lista, uma biblioteca de documentos, uma página e assim por diante em seu site recém-criado.

Observação

Se você selecionou site de equipe, um grupo do Microsoft 365 também será criado.

Criar uma lista do SharePoint

Uma lista do SharePoint coleta dados com alguma estrutura: semelhantes a uma tabela, planilha ou banco de dados simples. Isso pode incluir muitos tipos diferentes de informações como números, textos, anexos e até mesmo imagens.

Para nosso aplicativo Easy Sales, criaremos uma lista contendo detalhes de todas as categorias de produtos: Sofás, Cadeiras, Mesas e Tapetes.

  1. No recém-criado site do SharePoint com o nome Easy Sales, selecione o menu suspenso + Novo e depois Lista para criar sua lista do SharePoint.

    Captura de tela da seleção da lista.

  2. Na janela Criar uma lista, selecione Lista em branco para criar uma lista do SharePoint do zero.

    Captura de tela da seleção da Lista em Branco.

  3. Configure o painel Criar da seguinte maneira:

    • Insira um nome adequado para a lista; por exemplo, Vendas fáceis.

    • Preencha a descrição, se necessário (opcional).

    • Deixe a caixa de seleção Mostrar na navegação do site marcada.

    • Selecione Criar.

      Captura de tela do Painel Criar.

Adicionar dados à sua lista do SharePoint

Depois que a lista for criada, é hora de adicionar os dados. Aqui, "dados" significam os detalhes de qualquer produto específico. Os detalhes do produto incluem as seguintes informações: nome, imagem, preço, dimensões, peso, cor, material primário, área, altura e modelo 3D/imagem do produto a ser exibido na realidade misturada.

  1. Na lista do Easy Sales criada, selecione + Adicionar coluna para adicionar uma coluna de um tipo específico. A lista abaixo mostra as colunas que precisam ser criadas com nome e tipo neste formato: Nome da Coluna – Tipo da Coluna.

    • Nome: Linha única de texto
    • ImageLink: Linha única de texto
    • Preço: Linha única de texto
    • Dimensões: Linha única de texto
    • Peso: Linha única de texto
    • Cor: Linha única de texto
    • PrimaryMaterial: Linha única de texto
    • Altura: Número
    • Profundidade: Número
    • Largura: Número
    • Preço/cm2: Número
    • ProductCategory: Linha única de texto
    • FileType: Linha única de texto

    Selecione o tipo de coluna na lista suspensa, por exemplo, Linha única de texto.

    Captura de tela da seleção de Linha única de texto.

    Insira os detalhes da coluna na guia Criar a coluna e selecione Salvar.

    Captura de tela da criação de uma coluna.

    Repita o mesmo procedimento para o restante das colunas na lista anterior.

    Observação

    Ao criar uma lista do SharePoint, uma coluna de Título padrão será criada, podendo ser renomeada como Nome.

  2. Depois de adicionarmos as colunas, precisamos adicionar os dados reais nessas colunas. Comece a adicionar os dados às colunas baixando a pasta personalizada que inclui todos os detalhes do produto para todas as quatro listas. Para acessar os dados, selecione o link a seguir, selecione o botão Mais ações de arquivo (...) no canto superior direito da página e selecione Baixar.

    Pasta personalizada do Power Apps

  3. Selecione + Novo para adicionar um item e preencha os detalhes necessários, conforme fornecido no arquivo Excel baixado. Selecione Salvar para salvar os detalhes inseridos.

    Captura de tela da seleção de Novo ou Editar na exibição de grade para adicionar um novo item.

    Observação

    A exibição de grade permite adicionar informações livremente a linhas ou colunas diferentes.

  4. Comece a adicionar seus dados em suas respectivas colunas, conforme mostrado na figura:

    Captura de tela da lista do SharePoint com detalhes adicionados

    Observação

    Se você quiser incluir imagens próprias, poderá adicionar os links de imagens públicas disponíveis na Internet na coluna ImageLink. Você pode obter os links de imagem clicando com o botão direito do mouse e selecionando a opção Copiar endereço da imagem.

    Observação

    Você não precisará dos valores de altura, profundidade e largura da lista de categorias do Tapete. Esta categoria de produto ocupará o valor de área medido durante a sessão de Medida em MR e destacará o preço do tapete com base na área calculada. No entanto, adicionamos a coluna Preço/cm2 para auxiliar no processo de cálculo.

Criar conexão

Agora que todos os nossos dados necessários para o aplicativo são armazenados na lista do SharePoint, estabeleceremos uma conexão no Power Apps. Depois que a conexão for estabelecida, você poderá acessar facilmente os dados do SharePoint por meio do aplicativo.

  1. Para começar a criar uma conexão, entre no Power Apps e selecione Conexões na barra de navegação esquerda. Em seguida, selecione + Nova conexão próximo ao canto superior esquerdo.

  2. Selecione SharePoint. Estamos selecionando SharePoint, pois armazenamos os dados necessários em listas do SharePoint.

    Captura de tela da seleção do SharePoint.

  3. Para se conectar ao SharePoint Online, selecione Conectar diretamente (serviços de nuvem), depois escolha Criar e, se solicitado, forneça as credenciais.

    Captura de tela da seleção de Criar.

  4. A conexão foi criada e você pode criar um aplicativo do zero.

    Observação

    Mesmo que a conexão seja criada, você ainda poderá adicionar, editar e excluir dados armazenados em sua lista do SharePoint. Todas as alterações serão refletidas no aplicativo por meio da conexão.

Vamos começar a criar o aplicativo Easy Sales com base nos dados do SharePoint e depois adicionar dados de outras fontes, se desejado. Ao seguir esse procedimento, você poderá criar algumas das páginas principais do aplicativo. Por exemplo, você aprenderá a criar uma tela inicial, uma página de produto e uma página de lista de produtos. Também acessaremos dados armazenados na lista do SharePoint por meio do controle de galeria do Power Apps.

Abrir um aplicativo em branco

  1. Vá para a página inicial Power Apps e selecione Criar no menu à esquerda. Selecione aplicativo em brancoe, em seguida, selecione Criar em aplicativo de tela em branco.

    Captura de tela da seleção do aplicativo de tela em branco.

  2. Especifique um nome para o seu aplicativo, por exemplo, Vendas fáceis. Selecione Telefone e, em seguida, Criar.

    Captura de tela da especificação do nome do aplicativo e da seleção de criar.

    O Power Apps Studio cria um aplicativo em branco para telefones.

    Observação

    Você pode criar um aplicativo do zero para vários dispositivos – este tópico se concentra no desenvolvimento de um aplicativo para telefones.

  3. Se a caixa de diálogo Bem-vindo(a) ao Power Apps Studio abrir, selecione Ignorar.

    Captura de tela da seleção da opção ignorar.

Conectar aos dados

Para incluir dados em seu Power App, você deve se conectar aos dados por meio dos conectores em seu aplicativo. Como armazenamos todos os dados em uma lista SharePoint, selecionaremos SharePoint como um dos conectores.

  1. À esquerda no Power Apps Studio, selecione a opção Dados.

  2. Após abrir o painel Dados, selecione o botão Adicionar dados para se conectar aos dados.

  3. Na janela Selecionar uma fonte de dados, expanda a seção Conectores e selecione a opção SharePoint.

    Captura de tela da seleção da opção adicionar dados e SharePoint.

  4. No exercício anterior, já criamos uma conexão. Selecione a conexão criada para adicionar os dados ao seu aplicativo. Selecione o site do SharePoint, que foi criado com o nome Easy Sales.

    Captura de tela da seleção do Vendas Fáceis.

  5. Ao selecionar o site do SharePoint Easy Sales, todas as listas criadas nesse site serão exibidas. Em seguida, selecione a lista do SharePoint criada a respeito do aplicativo e clique em Conectar.

    Captura de tela da seleção da lista.

  6. Todos os dados necessários estão conectados e prontos para uso no aplicativo. Agora você pode começar a criar o aplicativo.

Criar a tela inicial

  1. Selecione a opção Modo de exibição de árvore à esquerda do Power Apps Studio. Já deve haver uma tela em branco no Power Apps Studio; caso não haja, na guia Home page, selecione a seta para baixo ao lado de Nova tela, que abre a lista de tipos de tela. Em seguida, selecione Em branco para criar uma tela em branco.

    Captura de tela da criação de uma nova tela.

  2. Renomeie a tela para Tela inicial selecionando o ícone de três pontos (...) presente ao lado do nome da tela e selecionando a opção Renomear.

    Captura de tela da renomeação da tela.

  3. Selecione a tela recém-criada para alterar as propriedades na guia Propriedades no lado direito da tela.

  4. Selecione a lista suspensa ao lado da imagem Plano de fundo propriedade para adicionar uma imagem à tela. Selecione + Adicionar um arquivo de imagem para selecionar o arquivo do logotipo baixado.

    Captura de tela da adição do logotipo do Vendas fáceis.

  5. Defina a posição da imagem como Ajustar para a imagem inteira caiba no tamanho especificado. A opção Ajustar dimensiona a imagem proporcionalmente e não recorta a mesma.

    Captura de tela da adição do logotipo do Vendas Fáceis à tela inicial.

  6. Na guia Inserir, expanda o menu suspenso Entrada e selecione Temporizador. Em seguida, arraste o botão na tela e coloque-o onde quiser.

    Captura de tela da adição do temporizador.

  7. Para editar algumas das propriedades do temporizador, você pode usar o menu suspenso Propriedade no canto superior esquerdo ou o painel Propriedades. Defina as seguintes propriedades:

    • AutoStart – true

    • Duração: 2.000

    • Visible – false

      Captura de tela da atualização das propriedades do temporizador.

      Observação

      Por padrão, a duração é medida em milissegundos. Sendo 1 segundo = 1000 milissegundos, inserimos 2000 como o valor para a duração.

  8. Queremos que a Tela inicial fique visível por apenas 2 segundos e, em seguida, faça a transição para a Home page. Crie uma tela Em branco como fizemos na etapa anterior e renomeie como Home Page. Em seguida, selecione o botão do temporizador adicionado à Tela inicial e configure a propriedade OnTimerEnd. Substitua false pelo seguinte conteúdo:

    Navigate('Home Page',ScreenTransition.Fade)

    Captura de tela da configuração da propriedade OnTimerEnd.

  9. Salve seu aplicativo navegando até Arquivo>Salvar. Em seguida, selecione a opção A nuvem e Salvar.

Criar a home page

  1. Selecione a Home Page criada anteriormente. Para inserir quatro botões, navegue até a guia Inserir e selecione a opção Botão para adicionar botões à tela. Ajuste o tamanho e a posição desses botões conforme necessário. Renomeie-os como Sofas_button, Chairs_button, Tables_button e Carpets_button respectivamente.

    Captura de tela da adição de botões.

  2. Altere o texto de exibição dos botões para indicar categorias de produtos, como Sofás, Cadeiras, Mesas e Tapetes.

    Captura de tela da edição do texto de exibição.

  3. Usaremos esses botões para navegar até a lista de produtos em várias categorias. Para fazer isso, precisamos filtrar os produtos da lista do SharePoint com base na Categoria do Produto. Crie duas telas Em branco e renomeie-as como Produtos e Tapetes.

    Captura de tela da adição de novas telas.

  4. Selecione o recém-criado botão Sofas_button e configure a propriedade OnSelect. Depois de selecionar o botão, ele precisa nos levar para a página de lista de produtos criada na etapa anterior. Substitua false pelo seguinte código:

    Navigate(Products,ScreenTransition.Cover, {ID:1});

    Captura de tela da navegação na página de sofás

    Observação

    A ID é uma variável de contexto com algum valor atribuído. Esse valor é passado para a página de destino mencionada na função Navegar. O valor atribuído à variável filtra os produtos com base na Categoria do Produto.

  5. Repita o mesmo procedimento para os outros três botões. Novamente, forneça nomes de tela adequados na função Navegar, por exemplo, para configurar a propriedade OnSelect dos botões Cadeiras, Mesas e Tapetes use a função Navegar da seguinte maneira:

    Navigate(Products,ScreenTransition.Cover, {ID:2});

    Navigate(Products,ScreenTransition.Cover, {ID:3});

    Navigate(Carpets,ScreenTransition.Cover)

    Dica

    Para salvar o progresso, selecione a guia Arquivo na parte superior e selecione a opção Salvar. Você também pode usar Ctrl+S para salvar seu progresso.

    Observação

    A sintaxe padrão da função Navegar é: Navegar(Tela [, Transição [, UpdateContextRecord]])

    • Tela: Obrigatório. A tela a ser exibida.
    • Transição: Opcional. A transição visual a ser usada entre a tela atual e a próxima tela. O valor padrão é None.
    • UpdateContextRecord: Opcional. Um registro que contém o nome de, pelo menos, uma coluna e um valor para cada coluna. Esse registro atualiza as variáveis de contexto da nova tela como se passadas para a função UpdateContext.

    Dica

    Você pode testar seu aplicativo pressionando a tecla F5 no teclado ou clicando no botão Reproduzir no canto superior direito do Power Apps Studio.

Agora que adicionamos as categorias de produtos, exibiremos a lista de produtos em cada categoria. No Power Apps, usamos o controle de Galeria para ver um registro dos dados.

  1. Na tela Produtos, na guia Inserir, selecione Galeria>Vertical para adicionar o Controle de Galeria à tela.

    Captura de tela da adição da galeria

  2. Renomeie como Gallery_products. Na guia Propriedades do painel esquerdo, configure a propriedade Itens da seguinte maneira:

    If(
ID = 1,
Filter('Easy Sales',(ProductCategory = "Sofa")),
ID = 2,
Filter('Easy Sales',(ProductCategory = "Chair")),
ID = 3,
Filter('Easy Sales',(ProductCategory = "Table")),
ID = 4,
Filter('Easy Sales',(ProductCategory = "Carpet")))

    Captura de tela da conexão com o SharePoint

    Filtramos os Produtos armazenados na lista do SharePoint com base na Categoria do Produto. As variáveis de contexto são usadas para o processo de filtragem.

  3. Configure a propriedade Galeria>Campos no painel Propriedades selecionando Editar:

    • Atribua o Preço ao cabeçalho Subtitle1.

    • Atribua o Título ao cabeçalho Title1.

      Captura de tela da configuração dos campos na página de produtos

    Ao atribuir os campos anteriores, você observará que os dados serão refletidos na Galeria.

  4. Ajuste o tamanho dos Gallery_products conforme necessário. Para adicionar o ImageLink ao cabeçalho image1, selecione a Imagem na galeria e configure a propriedade Imagem na guia Propriedade adicionando esta linha de código:

    ThisItem.ImageLink

    Captura de tela da configuração da propriedade imagem na página do produto

  5. Agora, vamos inserir um rótulo na parte superior da tela selecionando a opção Rótulo. Em seguida, personalize a posição, a cor e a exibição do texto, conforme mostrado na figura:

    Captura de tela da adição de rótulo na página do produto

  6. Adicione um ícone Voltar sobre o Rótulo adicionado anteriormente para ajudar o usuário a navegar pela Home Page quando necessário. Para adicionar o ícone Voltar, expanda o menu suspenso Ícones e selecione o ícone Voltar.

    Captura de tela da adição do ícone voltar na home page

  7. Posicione o ícone Voltar corretamente e altere a cor de exibição, se necessário. Configure a propriedade OnSelect adicionando o seguinte:

    Navigate('Home Page',ScreenTransition.Cover)

    Captura de tela da configuração da propriedade OnSelect

  8. Siga o mesmo procedimento para a página Tapetes. Configure a propriedade Itens da galeria adicionada à página Tapetes do seguinte modo:

    Filter('Easy Sales',ProductCategory = "Carpet")

    Captura de tela seguindo o mesmo procedimento para a página tapetes

    Dica

    Para salvar o progresso, selecione a guia Arquivo na parte superior e selecione a opção Salvar. Você também pode usar Ctrl+S para salvar seu progresso.

Depois de implementar as etapas anteriores, seu aplicativo deve estar assim. O aplicativo incluirá uma excelente tela inicial, uma home page e um inventário de produtos para pesquisa.

demonstração do aplicativo depois de se conectar a uma fonte de dados.