Laboratório de prática 3 – Criar um aplicativo de tela

Neste laboratório, você projetará e criará um aplicativo de tela em branco, adicionará uma fonte de dados e uma galeria.

O que você aprenderá

  • Como criar um aplicativo de tela com uma galeria vinculada a uma fonte de dados
  • Como formatar campos com fórmulas do Power Fx

Macroetapas do laboratório

  • Criar um aplicativo de tela em branco
  • Adicionar uma fonte de dados ao aplicativo
  • Adicionar uma galeria ao aplicativo
  • Configurar os campos na galeria

Pré-requisitos

  • É necessário ter concluído Laboratório 2: Modelo de dados

Etapas detalhadas

Exercício 1 – Criar um aplicativo de tela

Tarefa 1.1 – Criar 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 + Criar no menu de navegação à esquerda.

  4. Selecione o bloco Começar com uma tela em branco em Criar seus aplicativos.

  5. Selecione Tamanho da tabela.

  6. Aguarde a criação do aplicativo em branco.

  7. Selecione Salvar no canto superior direito do Power Apps Studio, insira Booking Request app e selecione Salvar.

Tarefa 1.2 – Adicionar fonte de dados

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

    Captura de tela do painel Dados.

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

    Captura de tela da fonte de dados selecionada.

  3. Selecione a tabela Solicitações de reserva do Microsoft Dataverse.

Tarefa 1.3 – Configurar a tela principal

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

  2. Escolha Tela1 no modo de exibição de árvore, selecione as reticências (…) e depois Renomear.

  3. Digite MainScreen.

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

  5. Selecione Retângulo.

  6. Arraste o retângulo para o canto superior esquerdo da tela.

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

  8. Renomeie o retângulo como HeaderRect.

  9. Defina as propriedades do retângulo na barra de fórmulas da seguinte maneira:

    1. X=0
    2. Y=0
    3. Altura=80
    4. Largura=Parent.Width

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

  11. Selecione Rótulo de texto.

  12. Arraste o rótulo para o canto superior esquerdo da tela.

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

  14. Renomeie o rótulo como HeaderLabel.

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

    1. X=0
    2. Y=0
    3. Altura=80
    4. Largura=Parent.Width
    5. Alinhamento=Align.Center
    6. Tamanho=24
    7. Texto="Booking Request"
    8. Cor=Color.White

    Captura de tela da tela principal com cabeçalho.

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

Tarefa 1.4 – Adicionar uma galeria

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

  2. Selecione Galeria vertical.

    Captura de tela da adição de uma galeria.

  3. Selecione Solicitações de Reserva como a fonte de dados.

    Captura de tela das propriedades da galeria.

  4. Na guia Propriedades, em Layout, selecione Título, subtítulo e corpo.

  5. Selecione 7 selecionados ao lado de Campos.

  6. Selecione Custo para Corpo1.

    OBSERVAÇÃO: os nomes de campo podem ser mostrados como nomes de esquema com um prefixo não relacionado ao nome de exibição.

  7. Selecione Decisão para Subtítulo2.

  8. Selecione Nome do animal de estimação para Título2.

    Captura de tela dos campos da galeria.

  9. Feche o painel Dados.

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

  11. Renomeie a galeria como BookingRequestList.

  12. Se uma caixa de diálogo pop-up de sugestões for exibida, selecione Cancelar.

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

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

Tarefa 1.5 – Formatar o campo de moeda

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

  2. Expanda a galeria BookingRequestList.

  3. Selecione Body1.

    Captura de tela do campo do corpo selecionado.

  4. Na barra de fórmulas, defina a propriedade Texto para a seguinte fórmula:

     Text(Value(ThisItem.Cost), "$#,##0.00")

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

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