Exercício: criar o aplicativo de tela Dive Center

  • 18 minutos

Neste exercício, você aplica o conhecimento adquirido criando um aplicativo de tela Dive Center.

Cenário

Você trabalha no Dive Center. Você gerencia o ambiente Dataverse da organização.

Os funcionários do departamento de serviço precisam de um aplicativo do Power Apps que lhes permita prosseguir com os processos de check-in e check-out para clientes que trazem equipamentos de mergulho para reparos.

Para dar suporte a esses processos, os funcionários precisam dos seguintes recursos:

  • Uma lista de clientes para os serviços de reparo

  • A capacidade de armazenar check-ins

  • Uma lista de equipamentos de mergulho para identificar o tipo de equipamento a ser registrado

Os usuários expressaram outras solicitações, e você também pode incluir os seguintes recursos:

  • Habilitar a capacidade de prosseguir com check-outs para solicitações de serviço concluídas.

  • Criar um novo equipamento de mergulho com imagem, cor e tipo de equipamento especificado.

  • Capturar fotos e o tipo de serviço no momento do check-in.

  • Capturar uma assinatura para concluir um check-out.

  • Criar novos clientes.

Exercício

Pré-requisito: solução e a fonte de dados mencionadas neste exercício são explicadas na unidade anterior, Exercício: preparar-se para o aplicativo de tela Dive Center.

Em um ambiente Dataverse que contém uma solução em que a fonte de dados para o aplicativo de tela é definida, siga estas etapas:

  1. Crie um novo aplicativo de tela chamado Dive Center App.

    Captura de tela de uma solução do Dataverse. O foco está na opção de menu Novo aplicativo de tela.

    Selecione telefone como o formato do aplicativo de tela.

    Captura de tela do novo aplicativo de tela do formulário em branco. O foco está no nome do aplicativo, no formato do telefone e no botão Criar.

  2. No estúdio de tela do Power Apps, insira uma imagem para usar como logotipo principal. Posicione e dimensione a imagem com base na tela disponível e em outros componentes a serem incluídos no aplicativo. Você também pode ajustar a tela de fundo para a cor do logotipo usando a propriedade Fill.

    Captura de tela do estúdio do aplicativo de tela. O foco está no controle Imagem e nas propriedades do controle.

  3. Para fornecer navegação para as telas subsequentes, adicione três botões para Check-in, Check-out e Sair. Defina cores, posições e tamanho com base na experiência do usuário esperada.

    Captura de tela do estúdio do aplicativo de tela. O foco está no controle Botão e nas propriedades do controle.

  4. Renomeie os controles e as telas padrão usando nomes que representem seu uso. Essa é a prática recomendada para identificá-los mais facilmente.

    Captura de tela do estúdio do aplicativo de tela. O foco está na opção Renomear para os componentes da tela.

  5. Crie a tela de check-in selecionando Duplicar Tela na Tela Inicial que você renomeou.

    Captura de tela do estúdio do aplicativo de tela. O foco está na opção Duplicar Tela.

  6. Remova os botões da nova tela e redimensione a imagem principal a fiim de fornecer espaço para o formulário adicionado para o processo de check-in. Renomeie os componentes com nomes relevantes para seu uso.

    Captura de tela do estúdio do aplicativo de tela. O foco está na opção Excluir dos controles e nas propriedades da imagem.

  7. Adicione o formulário de edição de check-in, renomeie-o como frmCheckIn e conecte a fonte de dados à tabela Solicitações de Serviço. Defina a propriedade Default mode do formulário como New.

    Captura de tela do estúdio do aplicativo de tela. O foco está em Editar formulário e na propriedade da fonte de dados do controle.

  8. No formulário, remova os campos que não são obrigatórios.

    Captura de tela do estúdio do aplicativo de tela. O foco está na propriedade Edit fields e na opção Remover para um campo de um formulário.

  9. Adicione campos ao formulário necessários para o processo de check-in e organize-os em uma sequência lógica para os usuários do aplicativo. Defina a posição e o tamanho do formulário para tornar todos os campos visíveis.

    Captura de tela do estúdio do aplicativo de tela. O foco está na opção Adicionar campo para um controle de formulário.

  10. Para fornecer funcionalidade de atualização e navegação aos usuários, adicione dois botões na parte inferior da tela.

    Captura de tela do estúdio do aplicativo de tela. O foco está nos controles Botão e nas propriedades dos controles.

  11. Para atualizar o formulário quando o botão btnSaveCheckIn for selecionado e permitir que um novo check-in seja processado, insira o seguinte script PowerFx na propriedade OnSelect do botão:

    SubmitForm(frmCheckIn); NewForm(frmCheckIn);

  12. Para navegar de volta para HOME SCREEN quando o botão btnBackCheckIn estiver selecionado, insira o seguinte script PowerFx na propriedade OnSelect do botão:

    Navigate('HOME SCREEN',ScreenTransition.Fade);

  13. Para navegar para a tela CHECKIN de HOME SCREEN quando o botão btnCheckIn de HOME SCREEN for selecionado, digite o seguinte script PowerFx na propriedade OnSelect do botão:

    Navigate(CHECKIN,ScreenTransition.Fade);

  14. Para permitir que os usuários fechem o aplicativo quando o botão btnExit de HOME SCREEN for selecionado, digite o seguinte script PowerFx na propriedade OnSelect do botão:

    Exit();

  15. Nesse ponto, você pode salvar e reproduzir o aplicativo para testar a navegação entre as telas e a criação de novas entradas de check-in.

Recursos opcionais

A seção a seguir fornece as etapas necessárias para prosseguir com os recursos opcionais do aplicativo. Alguns desses recursos requerem tabelas e colunas definidas na unidade Exercício: preparar-se para o aplicativo de tela Dive Center, anteriormente neste módulo.

Recurso de check-out

Para fornecer a funcionalidade de check-out aos usuários do aplicativo, siga estas etapas:

  1. Crie uma duplicata da tela CHECKIN e renomeie-a como CHECKOUT. Renomeie os componentes da tela e execute as seguintes ações:

    1. Edite as propriedades frmCheckOut para remover o campo Nome.

    2. Adicione o campo Anexos opcional.

    3. Defina o tamanho e a posição a fim de alocar espaço para um componente extra acima do formulário.

    4. Defina o Modo padrão como Exibir para que o formulário seja exibido como Somente Leitura.

    Captura de tela do estúdio do aplicativo de tela. O foco está nas propriedades de um controle de formulário e nos componentes renomeados de uma tela.

  2. Para fornecer uma lista de solicitações de serviço que estão disponíveis para check-out, inclua uma entrada Lista suspensa na tela e execute as seguintes ações:

    1. Renomeie o menu suspenso como ddServiceRequestForCheckOut.

    2. Defina o tamanho e a posição acima do formulário frmCheckOut.

    3. Defina a propriedade Items para a tabela Solicitações de Serviço.

    4. Defina a propriedade Value como a coluna Name.

    Captura de tela do estúdio do aplicativo de tela. O foco está no controle Lista suspensa e nas propriedades do controle.

  3. Para exibir a Solicitação de Serviço selecionada no controle suspenso, insira o seguinte script PowerFx na propriedade Item do formulário frmCheckOut:

    ddServiceRequestForCheckOut.Selected

  4. Para exibir apenas a lista de solicitações de serviço que estão disponíveis para registro, insira o seguinte script PowerFx na propriedade Items da entrada suspensa:

    Filter('Service Requests',IsBlank('Actual Completion'))

  5. Assim, a solicitação de serviço é exibida como com check-out quando o botão btnSaveCheckOut é selecionado; digite o seguinte script PowerFx na propriedade OnSelect do botão:

    Patch('Service Requests',ddServiceRequestForCheckOut.Selected,{'Actual Completion':Now()});

  6. Para navegar de volta para HOME SCREEN quando o botão btnBackCheckOut estiver selecionado, insira o seguinte script PowerFx na propriedade OnSelect do botão:

    Navigate('HOME SCREEN',ScreenTransition.Fade);

  7. Para navegar para a tela CHECKOUT de HOME SCREEN quando o botão btnCheckOut de HOME SCREEN for selecionado, digite o seguinte script PowerFx na propriedade OnSelect do botão:

    Navigate(CHECKOUT,ScreenTransition.Fade);

  8. Nesse ponto, você pode salvar e jogar o aplicativo para testar a navegação entre as telas e o processo de check-out.

Criar recurso de equipamento de mergulho

Para permitir que os usuários criem novos equipamentos de mergulho com cor, tipo de equipamento e uma imagem, siga estas etapas:

  1. Crie uma duplicata da tela CHECKIN e renomeie-a como DIVEGEAR. Renomeie os componentes da tela e execute as seguintes ações:

    1. Edite as propriedades frmGear para usar a tabela Dive Gear como fonte de dados

    2. Selecione os diferentes campos que deseja fornecer aos usuários, inclusive o campo Imagem.

    Captura de tela do estúdio do aplicativo de tela. O foco está nas propriedades do controle de formulário e nos componentes renomeados da tela.

  2. Para criar o equipamento de mergulho quando o botão btnSaveGear estiver selecionado e permitir a criação de um novo equipamento de mergulho, insira o seguinte script PowerFx na propriedade OnSelect do botão:

    `SubmitForm(frmGear); NewForm(frmGear); Refresh ('Dive Gear');

  3. Para navegar de volta para a tela CHECKIN quando o botão btnBackGear estiver selecionado, insira o seguinte script PowerFx na propriedade OnSelect do botão:

    Navigate(CHECKIN,ScreenTransition.Fade);

  4. Para navegar de CHECKIN para a nova criação de equipamento de mergulho que você criou, desbloqueie as propriedades do cartão de dados para o campo Tipo de Serviço do formulário frmCheckIn. Redimensione a caixa de combinação do cartão de dados para fornecer espaço para inserir um ícone Adicionar próximo a ele.

    Captura de tela do estúdio do aplicativo de tela. O foco está no controle Ícones e nas propriedades do controle.

  5. Para navegar até a tela DIVEGEAR, insira o seguinte script PowerFx na propriedade OnSelect do ícone:

    Navigate(DIVEGEAR,ScreenTransition.Fade);

  6. Para garantir que a lista de equipamento seja atualizada quando um novo equipamento for criado, altere a propriedade da fonte de dados da caixa de combinação para a tabela Dive Gear.

    Captura de tela do estúdio do aplicativo de tela. O foco está na propriedade Fonte de dados de uma caixa de combinação.

  7. Nesse ponto, você pode salvar e reproduzir o aplicativo para testar a navegação entre as telas e a criação de novos equipamentos de mergulho.

Recurso para capturar fotos e tipo de serviço

Para permitir que os usuários capturem fotos e tipo de serviço no momento do check-in, siga estas etapas:

  1. Adicione Tipo de serviço, Anexos e Aceito em como campos ao formulário frmCheckin.

    Captura de tela do estúdio do aplicativo de tela. O foco está nos campos de um formulário.

  2. Para definir o valor Aceito em para a data e hora em que a solicitação de serviço é criada, desbloqueie o cartão de dados Aceito em e defina a propriedade Update com o seguinte script PowerFx:

    Now()

  3. Nesse ponto, você pode salvar e reproduzir o aplicativo para testar a adição de imagens como anexos à solicitação de serviço.

Recurso de captura de assinatura

Para permitir que os usuários capturem uma assinatura para concluir um check-out, siga estas etapas:

  1. Adicione os seguintes controles Text label à tela CHECKOUT.

    Nome Texto Position/Size Outras informações
    lbl_greyout <empty> X: 0
    Y: 0
    Width: 640
    Height: 1136    		 Fill: RGBA(149,149,149,0.4)
    lbl_SignatureCapture <empty> X: 0
    Y: 338
    Width: 640
    Height: 384    		 Fill: RGBA(255, 255, 255, 1)
    lbl_SignatureLine <empty> X: 0
    Y: 587
    Width: 640
    Height: 13    		 Fill: RGBA(0,0,0,1)
    lbl_CustomerSignature Assinatura do Cliente X: 21
    Y: 600
    Width: 560
    Height: 70    		 Tamanho da fonte: 21
    lbl_OK OK X: 388
    Y: 599
    Width: 60
    Height: 70    		 Tamanho da fonte: 21
    lbl_Cancel Cancelar X: 492
    Y: 599
    Width: 122
    Height: 70    		 Tamanho da fonte: 21

    O resultado deve ser semelhante à captura de tela a seguir.

    Captura de tela do estúdio do aplicativo de tela. O foco está no controle Text label e nos vários controles de rótulo de uma tela.

  2. Adicione os seguintes controles Ícones à tela CHECKOUT.

    Nome Ícone Position/Size Cor
    ico_Cancel Cancelar X: 448
    Y: 615
    Width: 35
    Height: 39    		 RGBA(255,0,0,1)
    ico_OK Verificação X: 346
    Y: 615
    Width: 35
    Height: 39    		 RGBA(51,176,75,1)

    O resultado deve ser semelhante à captura de tela a seguir.

    Captura de tela do estúdio do aplicativo de tela. O foco está nos ícones adicionados.

  3. Para capturar a assinatura do cliente, adicione um controle Entrada da caneta. Renomeie-o como PenCustomerSignature e defina as propriedades de Show controls como Off. Defina a posição e o tamanho para que fique acima do controle lbl_SignatureLine.

    Captura de tela do estúdio do aplicativo de tela. O foco está no controle Entrada da caneta e nas propriedades do controle.

  4. Uma variável é usada para exibir e ocultar os controles relacionados à assinatura com base no estágio do processo. Substitua a propriedade OnSelect atual do botão btnSaveCheckOut pelo seguinte script PowerFx:

    Set(flgSignature, true);

  5. Para exibir e ocultar os controles relacionados à assinatura com base no status da variável flgSignature, defina a propriedade Visible com o seguinte script PowerFx:

    flgSignature

  6. Para fornecer a opção de cancelar a captura da assinatura e voltar para a tela CHECKOUT, defina a propriedade OnSelect de icoCancel com o seguinte script PowerFx:

    Reset(PenCustomerSignature);Set(flgSignature, false);

  7. Para atualizar a Solicitação de Serviço com a assinatura capturada e concluir o processo de check-out, defina a propriedade OnSelect de icoOK com o seguinte script PowerFx:

    Patch('Service Requests',ddServiceRequestForCheckOut.Selected,{'Actual Completion':Now(),'Customer Signature':PenCustomerSignature.Image}); Reset(PenCustomerSignature); Set(flgSignature, false);

  8. Nesse ponto, você pode salvar e reproduzir o aplicativo para testar a captura de assinatura ao verificar uma solicitação de serviço.

Recurso para criar novos clientes

Para permitir que os usuários criem novos clientes na tela CHECKIN, siga estas etapas:

  1. Crie uma duplicata da tela CHECKIN e renomeie-a como CUSTOMER. Renomeie os componentes da tela e siga estas etapas:

    1. Edite as propriedades frmCustomer para usar a tabela Contacts como Fonte de dados

    2. Selecione os diferentes campos que deseja fornecer aos usuários.

    Captura de tela do estúdio do aplicativo de tela. O foco está nas propriedades do controle de formulário e nos componentes renomeados da tela.

  2. Para criar o cliente quando o botão btnSaveCustomer for selecionado e permitir que novos clientes sejam criados, digite o seguinte script PowerFx na propriedade OnSelect do botão:

    SubmitForm(frmCustomer); NewForm(frmCustomer); Refresh(Contacts);

  3. Para navegar de volta para a tela CHECKIN quando o botão btnBackCustomer estiver selecionado, insira o seguinte script PowerFx na propriedade OnSelect do botão:

    Navigate(CHECKIN,ScreenTransition.Fade);

  4. Para navegar de CHECKIN para este, desbloqueie as propriedades do cartão de dados para o campo Customer do formulário frmCheckIn. Redimensione a caixa de combinação do cartão de dados para fornecer espaço para inserir um ícone Adicionar próximo a ele.

    Captura de tela do estúdio do aplicativo de tela. O foco está no controle Ícones e nas propriedades do controle.

  5. Para navegar até a tela CUSTOMER, insira o seguinte script PowerFx na propriedade OnSelect do ícone:

    Navigate(CUSTOMER,ScreenTransition.Fade);

  6. Para garantir que a lista de clientes seja atualizada quando um novo cliente for criado, altere a propriedade da fonte de dados da caixa de combinação para a tabela Contacts.

    Captura de tela do estúdio do aplicativo de tela. O foco está na propriedade Data source da caixa de combinação.

  7. Nesse ponto, você pode salvar e reproduzir o aplicativo para testar a navegação entre as telas e a criação de novos equipamentos de mergulho.

Próximas etapas

Agora você aprendeu a criar um aplicativo de tela Dive Center. Em seguida, você aprenderá a criar um aplicativo baseado em modelo.