Laboratório prático 6 — Formulários

Neste laboratório, você usará formulários para criar e editar registros em uma fonte de dados.

O que você aprenderá

  • Como adicionar telas
  • Como navegar entre telas
  • Como usar um formulário para criar um registro em uma fonte de dados
  • Como usar um formulário para editar um registro em uma fonte de dados
  • Como excluir um registro de uma fonte de dados
  • Como vincular um formulário a uma galeria

Macroetapas do laboratório

  • Criar telas
  • Navegar para uma tela quando um registro é selecionado em uma galeria
  • Navegar entre telas
  • Exibir um registro com um formulário
  • Excluir um registro
  • Editar um registro com um formulário
  • Criar um registro com um formulário

Pré-requisitos

  • Precisa ter concluído o Laboratório 5: Dados externos

Etapas detalhadas

Exercício 1 — Adicionar telas e a navegação

Tarefa 1.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 1.2 — Adicionar telas

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

  2. Na barra de ações do Power Apps Studio, escolha Nova tela.

    Captura da nova tela.

  3. Selecione Em branco.

  4. Renomeie a tela como EditScreen.

  5. Na barra de ações do Power Apps Studio, escolha Nova tela.

  6. Selecione Cabeçalho e rodapé.

  7. Renomeie a tela como DetailScreen.

Tarefa 1.3 — Adicionar a navegação

  1. No modo de exibição de árvore, expanda BookingRequestList na MainScreen.

  2. Escolha NextArrow em BookingRequestList.

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

     Collect(colRequests, ThisItem);Navigate(DetailScreen, ScreenTransition.Cover);

  4. Selecione EditScreen.

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

  6. Expanda Ícones.

  7. Selecione Seta para trás.

  8. Defina a propriedade OnSelect do ícone como:

     Back()

  9. No modo de exibição de árvore, selecione o ícone e os Comandos (…) e escolha Copiar.

  10. Expanda DetailScreen.

  11. Expanda ScreenContainer.

  12. Selecione HeaderContainer e os Comandos (…) e escolha Colar.

Exercício 2 — Tela Detalhes

Tarefa 2.1 — Adicionar formulário de exibição

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

  2. Expanda DetailScreen.

  3. Expanda ScreenContainer1.

  4. Selecione MainContainer1.

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

  6. Expanda Entrada.

  7. Selecione Exibir formulário.

    Captura de tela da adição de um formulário de exibição.

  8. Nas propriedades do FormViewer, selecione Solicitações de Reserva em Fonte de dados.

  9. Clique em 8 selecionados ao lado de Campos.

    Captura de tela dos campos de formulário padrão.

  10. Remova os campos Status e Observações clicando nas reticências (…) ao lado dos campos e clicando em Remover.

  11. Clique em + Adicionar campo e escolha o campo:

    1. Decisão

    Captura de tela da adição de campos ao formulário.

  12. Selecione Adicionar.

  13. Arraste os campos para a seguinte ordem:

    1. Nome do Animal de Estimação
    2. Nome do Proprietário
    3. Email do Proprietário
    4. Data de Início
    5. Data de Término
    6. Decisão
    7. Custo

    Captura de tela da classificação dos campos de formulário.

  14. Feche o painel Campos.

  15. Defina a propriedade Item do controle de visualizador de formulários na barra de fórmulas como:

     BookingRequestList.Selected

Tarefa 2.2 — Adicionar rótulo

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

  2. Expanda DetailScreen.

  3. Expanda ScreenContainer1.

  4. Selecione FooterContainer1.

  5. Selecione + dentro do contêiner Rodapé.

    Captura de tela da adição de um controle ao contêiner.

  6. Selecione Rótulo de texto

  7. Defina a propriedade Text do rótulo como:

     BookingRequestList.Selected.'Pet Name'

Tarefa 2.3 — Adicionar o botão Excluir

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

  2. Expanda DetailScreen.

  3. Expanda ScreenContainer1.

  4. Selecione FooterContainer1.

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

  6. Selecione Botão.

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

  8. Renomeie o botão como Deletebtn.

  9. Defina a propriedade Text do botão como:

     "Delete"

  10. Defina a propriedade OnSelect do botão como:

     Remove('Booking Requests', BookingRequestList.Selected); Back();

Exercício 3 — Editar tela

Tarefa 3.1 — Adicionar a opção Editar formulário

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

  2. Selecione EditScreen.

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

  4. Selecione Editar formulário.

  5. Nas propriedades do formulário, selecione Solicitações de Reserva em Fonte de dados.

  6. Clique em 8 selecionados ao lado de Campos.

  7. Remova os campos Decisão e Observações clicando nas reticências (…) ao lado dos campos e clicando em Remover.

  8. Arraste os campos para a seguinte ordem:

    1. Nome do Animal de Estimação
    2. Nome do Proprietário
    3. Email do Proprietário
    4. Data de Início
    5. Data de Término
    6. Custo

  9. Feche o painel Campos.

  10. Defina a propriedade Item do controle de formulário como:

     BookingRequestList.Selected

  11. No menu de criação do aplicativo, selecione o modo de exibição de árvore.

  12. Renomeie o formulário como BookingRequestForm.

  13. Defina as propriedades do formulário da seguinte maneira:

    1. X=0
    2. Y=125
    3. Altura=500
    4. Width=Parent.Width
    5. Columns=1
    6. Layout=Horizontal

    Captura de tela do formulário de solicitação de reserva configurado.

Tarefa 3.2 — Adicionar o botão de envio

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

  2. Selecione EditScreen.

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

  4. Selecione Botão.

  5. Arraste o botão abaixo do formulário.

  6. No menu de criação do aplicativo, selecione o modo de exibição de árvore.

  7. Renomeie o botão como Submitbtn.

  8. Defina a propriedade Text do botão como:

     "Submit"

  9. Defina a propriedade OnSelect do botão como:

     SubmitForm(BookingRequestForm)

  10. Selecione BookingRequestForm.

  11. Defina a propriedade OnSuccess do formulário como:

     Navigate(MainScreen, ScreenTransition.UnCover)

Tarefa 3.3 — Adicionar a navegação à tela de edição

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

  2. Expanda DetailScreen.

  3. Expanda ScreenContainer.

  4. Selecione HeaderContainer.

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

  6. Expanda Ícones.

  7. Selecione Editar.

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

  9. Renomeie o ícone como EditIcon.

  10. Defina a propriedade OnSelect do ícone como:

     Navigate(EditScreen, ScreenTransition.Cover)

Tarefa 3.4 — Novo registro

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

  2. Selecione MainScreen.

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

  4. Expanda Ícones.

  5. Selecione Adicionar.

  6. No menu de criação do aplicativo, selecione o modo de exibição de árvore.

  7. Renomeie o ícone como NewIcon.

  8. Defina as propriedades do ícone da seguinte maneira:

    1. X=0
    2. Y=0
    3. Altura=80
    4. Width=80
    5. Color=Color.White

  9. Defina a propriedade OnSelect do ícone como:

     NewForm(BookingRequestForm);Navigate(EditScreen, ScreenTransition.Cover)

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

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