Exercício - Adicione uma fonte de dados ao aplicativo de tela e crie páginas funcionais

  • 8 minutos

No Power Apps, pode ligar os seus dados a uma aplicação já existente ou a uma aplicação que esteja a criar a partir do zero. Seu aplicativo pode se conectar ao SharePoint, Microsoft Dataverse, Salesforce, OneDrive ou qualquer outra fonte de dados.

Usaremos o SharePoint como nossa principal fonte de dados para este aplicativo. Você pode se conectar ao site do SharePoint para gerar automaticamente um aplicativo a partir 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 as credenciais da sua organização Microsoft.

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

    Captura de tela mostrando para criar 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 escolha é site de Comunicação ou Site de Equipa. Selecione o 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 de idioma da sua escolha na lista suspensa.

  4. Selecione Finalizar para criar um site do SharePoint para carregar os seus dados.

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

Um site moderno do SharePoint é criado e está pronto para uso em segundos. Agora você pode criar uma lista, biblioteca de documentos, 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 lista do SharePoint

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

Para a nossa aplicação Easy Sales, vamos criar uma lista contendo detalhes de todas as categorias de produtos: Sofás, Cadeiras, Mesase Tapetes.

  1. No site do SharePoint recém-criado com o nome Easy Sales, selecione a lista suspensa + Novo e, em seguida, selecione Lista para criar a sua lista do SharePoint.

    Captura de tela da lista de seleção.

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

    Captura de ecrã a mostrar a seleção de 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 marcada a caixa de seleção Mostrar na navegação do site.

    • Selecione Criar.

      Captura de tela do painel Criar.

Adicionar dados à sua lista do SharePoint

Uma vez que a lista é criada, é hora de adicionar os dados. Aqui, "dados" significa os detalhes de qualquer produto em particular. Os detalhes do produto incluem as seguintes informações: Nome, Imagem, Preço, Dimensões, Peso, Cor, Material Primário, Área, Altura e modelo/imagem 3D do produto a ser visualizado em realidade mista.

  1. Na lista Fácil de vendas criada, selecione + Adicionar coluna para adicionar uma coluna de tipo específico. A lista abaixo mostra as colunas que precisam ser criadas, com seus nomes e tipos neste formato: Nome da coluna - Tipo de coluna.

    • Nome: Linha única de texto
    • ImageLink: Linha única de texto
    • Preço: Linha única de texto
    • Dimensões: Linha única de texto
    • Peso: Texto em linha única
    • 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, selecione Linha única de texto.

    Captura de ecrã de selecionar linha única de texto.

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

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

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

    Observação

    Depois de criar uma lista do SharePoint , é criada uma coluna padrão que você pode renomear como Nome.

  2. Depois de adicionar as colunas, temos que adicionar os dados reais sob essas colunas. Comece a adicionar dados às colunas baixando a pasta personalizada que inclui todos os detalhes do produto para todas as quatro listas. Para aceder aos dados, selecione a seguinte ligação, selecione o botão mais ações de arquivo (...) na parte superior direita da página e selecione Download.

    pasta personalizada do Power Apps

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

    Captura de ecrã que mostra a seleção de Novo ou Editar na vista de grelha para adicionar novos itens.

    Observação

    A vista de grelha permite-lhe adicionar informações livremente a diferentes linhas ou colunas.

  4. Comece a adicionar seus dados em suas respetivas colunas, como mostra a figura:

    Captura de tela da lista do sharepoint com detalhes adicionados

    Observação

    Se você quiser incluir imagens próprias, você pode adicionar os links de imagens de imagens públicas disponíveis na Internet sob a 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

    Não precisará dos valores de altura, profundidade e largura para a lista da categoria Carpete. Esta categoria de produto utilizará o valor da área medido durante a Medida de na sessão de em MR e indicará o preço do tapete em função da área calculada. No entanto, adicionámos a coluna Preço/cm2 para auxiliar o processo de cálculo.

Criar conexão

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

  1. Para começar a criar uma ligação, faça login no Power Apps e selecione Ligações na barra de navegação à esquerda. Em seguida, selecione + Nova conexão perto do canto superior esquerdo.

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

    Captura de tela mostrando a seleção do Sharepoint.

  3. Para se conectar ao SharePoint Online, selecione Conectar diretamente (serviços de nuvem)e, em seguida, selecione Criare, se solicitado, forneça credenciais.

    Captura de tela mostrando a seleção Criar.

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

    Observação

    Mesmo que a conexão seja criada, você ainda pode adicionar, editar e excluir dados armazenados em sua lista do SharePoint. Todas as alterações são refletidas no aplicativo através da conexão.

Vamos começar a criar o aplicativo Easy Sales com base nos dados do SharePoint e, em seguida, adicionar dados de outras fontes, se desejado. Seguindo este procedimento, você será capaz de projetar 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 os dados armazenados na lista do SharePoint por meio do controle de galeria do Power Apps.

Abrir uma aplicação em branco

  1. Aceda à página inicial do Power Apps e, em seguida, selecione Criar no menu esquerdo. Selecione aplicação em brancoe, em seguida, selecione Criar em aplicação de tela em branco.

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

  2. Especifique um nome para seu aplicativo; por exemplo, Easy-Sales. Selecione Telefonee, em seguida, selecione Criar.

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

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

    Observação

    Embora você possa criar um aplicativo do zero para vários dispositivos, este tópico se concentra na criação de um aplicativo para telefones.

  3. Se a caixa de diálogo Bem-vindo ao Power Apps Studio for aberta, selecione Ignorar.

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

Conectar-se aos dados

Para incluir dados no seu Power App, deve ligar-se aos dados usando os conectores da sua aplicação. Como armazenamos todos os dados em uma lista de do SharePoint, selecionaremos SharePoint como um dos conectores.

  1. À esquerda do Power Apps Studio, selecione a opção de dados.

  2. Depois de abrir o painel Data, selecione o botão Adicionar dados para se conectar aos dados.

  3. Na janela Selecione 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á criámos uma ligaçã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 ecrã da seleção de Vendas Fáceis.

  5. Depois de selecionar o site Easy Sales SharePoint, todas as listas criadas nesse site são exibidas. Em seguida, selecione a lista do SharePoint criada em relação ao aplicativo e clique em Connect.

    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 o ecrã inicial

  1. Selecione a opção modo de exibição Árvore à esquerda do Power Apps Studio. Você já deve ter uma tela em branco no Power Apps Studio; caso contrário, no separador Página Inicial, selecione a seta para baixo junto a novo ecrã que abre a lista de tipos de ecrã. 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 mostrando a renomeação da tela.

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

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

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

  5. Defina a posição da imagem como Ajustar para que a imagem inteira se ajuste ao tamanho especificado. A opção Ajustar redimensiona proporcionalmente a imagem e não a corta.

    Captura de ecrã a mostrar a adição do logótipo Easy Sales ao ecrã inicial.

  6. Na guia Inserir, expanda a lista suspensa de Entrada e selecione Timer. Em seguida, arraste o botão na tela e coloque-o onde quiser.

    Captura de ecrã a mostrar a adição do temporizador.

  7. Para editar algumas das propriedades do temporizador, pode usar a lista suspensa Propriedade no canto superior esquerdo ou usar o painel Propriedades. Defina as seguintes propriedades:

    • AutoStart: true

    • Duração: 2000

    • visível : falso

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

      Observação

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

  8. Queremos que a tela inicial fique visível por apenas dois segundos e, em seguida, faça a transição para a página inicial. Crie uma tela de em branco como fizemos na etapa anterior e renomeie-a como Página Inicial. Mais tarde, selecione o botão de temporizador adicionado à tela Splash e configure a propriedade OnTimerEnd. Substitua falso 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 selecione Salvar.

Criar a página inicial

  1. Selecione a Página Inicial criada anteriormente. Para inserir quatro botões, navegue até a da 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_buttone 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 de 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 em Categoria de Produto. Crie duas novas telas em branco e renomeie-as Produtos e Tapetes.

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

  4. Selecione o botão Sofas_button recém-criado 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 o false pelo seguinte código:

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

    Screenshot da navegação da 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 em Categoria de Produto.

  5. Repita o mesmo procedimento para os outros três botões. Novamente, certifique-se de fornecer nomes de tela apropriados na função Navegar; por exemplo, para configurar a propriedade OnSelect dos botões Cadeiras, Mesase 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 seu progresso, selecione a guia File 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(Screen [, Transition [, UpdateContextRecord]])

    • Screen: 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 fossem 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 controlo Galeria para ver um registo de dados.

  1. No ecrã Produtos, na guia Inserir, selecione Galeria>Verticais para adicionar o controlo de Galeria ao seu ecrã.

    Captura de ecrã a mostrar a adição da galeria de

  2. Renomeie-o para 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 ligação ao SharePoint

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

  3. Configure a Gallery>Fields propriedade no painel Propriedades selecionando Editar:

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

    • Atribua o título Título ao cabeçalho Título1.

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

    Ao atribuir os campos anteriores, você observará os dados sendo refletidos em seu Galeria.

  4. Ajuste o tamanho do Gallery_products conforme necessário. Para adicionar o ImageLink ao título Image1, selecione a Image na galeria e configure a propriedade Image no separador Property, adicionando esta linha de código:

    ThisItem.ImageLink

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

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

    Captura de ecrã a mostrar a adição de etiqueta na página de produtos

  6. Adicione um ícone de Voltar sobre o Rótulo adicionado anteriormente para ajudar o utilizador a navegar até à Página Inicial quando necessário. Para adicionar o ícone Voltar, expanda a lista suspensa Ícones e selecione o ícone Voltar.

    Captura de tela mostrando o ícone de adição de volta na página inicial

  7. Posicione o ícone Voltar corretamente e altere a sua cor de exibição, caso 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. Configurar a propriedade Items da galeria adicionada à página Carpets da seguinte maneira:

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

    Captura de ecrã de seguir o mesmo procedimento na página de tapetes

    Dica

    Para salvar seu progresso, selecione a guia File 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, veja como seu aplicativo deve parecer. O aplicativo incluirá um excelente ecrã de abertura, uma página iniciale um inventário de produtos para navegar.

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