Laboratório prático 5 – Dados externos

Neste laboratório, você adicionará uma fonte de dados externa.

O que você aprenderá

• Como adicionar uma lista do SharePoint ao seu aplicativo de tela
• Como usar coleções
• Como usar o Patch
• Como usar o conector Office365Users

Macroetapas do laboratório

• Criar uma lista do SharePoint para reservas
• Adicionar a lista do SharePoint como uma galeria
• Armazenar registros selecionados de uma galeria
• Use o Patch para definir a decisão de uma solicitação de reserva
• Use o conector Office365User para exibir os detalhes do usuário.

Pré-requisitos

• Precisa ter concluído o Laboratório 4: Criar a interface do usuário

Etapas detalhadas

Exercício 1 – Criar uma lista do SharePoint

Tarefa 1.1 Criar um site do SharePoint

1. No portal dos criadores de Power Apps, https://make.powerapps.com, selecione o Inicializador de aplicativos no canto superior esquerdo da janela do navegador e selecione SharePoint.

2. Se a caixa de diálogo pop-up Bem-vindo(a) à Página Inicial do SharePoint for exibida, selecione ✖ para fechá-la.

3. No SharePoint, selecione + Criar site.

4. Escolha Site de equipe, selecione o modelo Equipe padrão e escolha Usar modelo.

5. Insira Pet boarding em Nome do site e selecione Avançar.

6. Selecione Criar site.

7. Selecione Concluir.

8. Se a caixa de diálogo pop-up Comece a projetar seu site for exibida, feche-a.

Tarefa 1.2 Criar uma lista do SharePoint

1. No site do SharePoint, selecione + Novo e escolha Lista.

   

2. Selecione Lista em branco

3. Insira Bookings em Nome e escolha Criar.

4. Selecione + Adicionar coluna, escolha Texto e selecione Avançar.

5. No painel Criar uma coluna, insira ou selecione os seguintes valores:

   1. Nome: Pet Name
   2. Tipo de dados: Linha única de texto

6. Selecione Salvar.

7. Selecione + Adicionar coluna, escolha Texto e selecione Avançar.

8. No painel Criar uma coluna, insira ou selecione os seguintes valores:

   1. Nome: Owner Name
   2. Tipo de dados: Linha única de texto

9. Selecione Salvar.

10. Selecione + Adicionar coluna, escolha Data e hora e selecione Avançar.

11. No painel Criar uma coluna, insira ou selecione os seguintes valores:

    1. Nome: Start Date
    2. Tipo de dados: Data e hora

12. Selecione Salvar.

13. Selecione + Adicionar coluna, escolha Data e hora e selecione Avançar.

14. No painel Criar uma coluna, insira ou selecione os seguintes valores:

    1. Nome: End Date
    2. Tipo de dados: Data e hora

15. Selecione Salvar.

16. Copie a primeira parte da URL do site do SharePoint, por exemplo, https://m365x99999999.sharepoint.com/sites/Petboarding/

Exercício 2 – Adicionar lista do SharePoint ao aplicativo de tela

Tarefa 2.1 — Editar o aplicativo

1. Navegue até o portal do Power Apps Maker https://make.powerapps.com

2. Verifique se você está no ambiente Dev One.

3. Selecione a guia Aplicativos no menu de navegação à esquerda.

4. Escolha o aplicativo Solicitação de Reserva, selecione os Comandos (…) e escolha Editar > Editar em uma nova guia.

Tarefa 2.2 – Adicionar o SharePoint como uma fonte de dados

1. No menu de criação de aplicativo, selecione Dados.

2. Selecione o cursor suspenso ao lado de Adicionar dados e insira SharePoint em Pesquisa.

   

3. Selecione SharePoint.

4. Selecione Conectar diretamente (serviços de nuvem) e selecione Conectar.

5. Insira a URL do site do SharePoint criado anteriormente neste laboratório.

   

6. Selecione Conectar.

7. Selecione Reservas.

   

8. Selecione Conectar.

Tarefa 2.3 – Adicionar galeria para lista do SharePoint

1. No menu de criação do aplicativo, selecione Inserir (+).

2. Selecione Galeria vertical.

3. Selecione Reservas para fonte de dados.

4. Selecione Título e subtítulo para Layout.

5. Selecione 6 selecionados ao lado de Campos

6. Selecione Nome do animal de estimação para Título3.

7. Selecione Data de Início para Subtítulo3.

8. Feche o painel Dados.

9. No menu de criação do aplicativo, selecione o Modo de exibição de árvore.

10. Renomeie a galeria como BookingList.

11. Defina as propriedades da galeria na barra de fórmulas da seguinte maneira:

    1. X=1000
    2. Y=80
    3. Altura=575
    4. Largura=250

Exercício 3 – Coleções

Tarefa 3.1 Criar Coleção

1. No menu de criação do aplicativo, selecione o Modo de exibição de árvore.

2. Expanda BookingRequestList.

3. Selecione NextArrow.

4. Defina a propriedade OnSelect de NextArrow na barra de fórmulas como:

    Collect(colRequests, ThisItem)
   

5. No menu de criação do aplicativo, selecione o Modo de exibição de árvore.

6. Selecione o objeto App.

7. Defina a propriedade OnStart na barra de fórmulas como:

    Clear(colRequests)
   

Exercício 4 – Patch

Tarefa 4.1 Recusar pedido de reserva

1. No menu de criação do aplicativo, selecione o Modo de exibição de árvore.

2. Selecione BookingRequestList.

3. Selecione o ícone de lápis no canto superior esquerdo do controle da galeria.

   

4. No menu de criação do aplicativo, selecione Inserir (+).

5. Expanda Ícones.

6. Escolha Bloqueado. O ícone será adicionado a cada linha na galeria.

7. Defina as propriedades do ícone na barra de fórmulas da seguinte maneira:

   1. X=150
   2. Y=40
   3. Altura=30
   4. Largura=30

   

8. No menu de criação do aplicativo, selecione o Modo de exibição de árvore.

9. Renomeie o ícone como DeclineIcon.

10. Defina a propriedade OnSelect de DeclineIcon na barra de fórmulas como:

     Patch('Booking Requests', ThisItem, {Decision: 'Decision (Booking Requests)'.Declined})
    

Exercício 5 – Usuários do Office 365

Tarefa 5.1 Adicionar usuários do Office 365 como uma fonte de dados

1. No menu de criação de aplicativo, selecione Dados.

2. Selecione o cursor suspenso ao lado de Adicionar dados e insira Office 365 em Pesquisa.

3. Selecione Usuários do Office 365.

4. Selecione Conectar.

Tarefa 5.2 Exibir o país do usuário

1. Selecione fora da galeria na tela em branco ou selecione a Tela principal no Modo de exibição de árvore.

2. No menu de criação do aplicativo, selecione Inserir (+).

3. Selecione Rótulo de texto.

4. Arraste o rótulo para o canto superior direito da tela ao lado do UserLabel.

5. No menu de criação do aplicativo, selecione o Modo de exibição de árvore.

6. Renomeie o rótulo como UserDetailsLabel.

7. Defina a propriedade Texto de UserDetailsLabel na barra de fórmulas como:

    Office365Users.MyProfile().Country
   

8. Defina as propriedades do rótulo na barra de fórmulas da seguinte maneira:

   1. X=930
   2. Y=20
   3. Tamanho=18
   4. Cor=Color.White

9. Selecione Salvar no canto superior direito do Power Apps Studio.

10. Selecione o botão <- Voltar no canto superior esquerdo da barra de comandos e selecione Sair para sair do aplicativo.