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 em um centro de mergulho prestando serviços e vendendo equipamentos de mergulho. 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 o 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. Inicie em seu ambiente intitulado Aplicativo Dive Center, em que as tabelas do aplicativo Dataverse já residem.

  1. Na barra de comandos da tela do ambiente, selecione Novo > Aplicativo > Aplicativo de tela para criar um novo aplicativo de tela chamado Solicitação de Serviço.

    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. Em seguida, selecione Criar.

    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.

  3. 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.

  4. 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.

  5. Renomeie os controles e as telas padrão usando nomes que representem seu uso. Essa é a prática recomendada para identificá-los mais facilmente. Você pode clicar duas vezes em cada controle na Exibição de árvore para renomeá-la ou usar as reticências ao lado do controle e selecionar Renomear.

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

  6. Crie a tela de check-in selecionando Duplicar Tela na Tela Inicial e renomear a nova tela "CHECKIN".

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

  7. Remova os botões da nova tela e redimensione a imagem principal para fornecer espaço para o formulário adicionado para o processo de check-in.

  8. Insira um formulário Editar, conecte a fonte de dados à tabela do Dataverse Solicitações de Serviço, defina a propriedade Default mode do formulário como Novo e altere seu nome para frmCheckIn.

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

  9. No formulário, mova-o e redimensione-o para usar a propriedade real da tela e selecione a opção Editar campos no painel Propriedades para modificar os campos do formulário.

  10. O Copilot sugere automaticamente quais campos devem ser incluídos e os ordena de acordo, mas vamos organizá-los para o processo de check-in da seguinte maneira, arrastando-os e soltando-os no painel Campos da seguinte forma, de cima para baixo (você pode consultar a imagem abaixo): Nome, Cliente, Equipamentos, Detalhes e Conclusão estimada. (Você pode posicionar campos opcionais abaixo desses campos).

    Se você não vir esses campos no formulário, selecione o botão + Adicionar campo para localizá-los/adicioná-los.

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

    Você precisará adicionar dados à sua tabela de Equipamentos de Mergulho, e talvez à sua tabela de Contatos também, para ver os resultados em sua caixa de combinação dentro da parte Equipamentos e Cliente do formulário.

  11. Verifique os campos de controle da caixa de combinação para o cartões Cliente e Equipamentos no formulário. Eles podem não mostrar os dados corretos, então você pode precisar desbloquear esses Cartões e fazer alguns ajustes. Para a caixa de combinação Cliente, verifique se você atualizou a propriedade DisplayFields para mostrar [fullname] e, para a caixa de combinação Equipamentos, defina a propriedade DisplayFields como ["msft_name"].

  12. Para fornecer funcionalidade de atualização e navegação aos usuários, adicione dois botões na parte inferior da tela. Atualize o texto para eles para "SAVE" e "BACK" e renomeie-os como btnSaveCheckIn e btnBackCheckIn, respectivamente.

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

  13. 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);

  14. 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);

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

    Navigate(CHECKIN,ScreenTransition.Fade);

  16. Para permitir que os usuários fechem o aplicativo quando selecionam o botão btnExit da HOME SCREEN, digite o seguinte script PowerFx na propriedade OnSelect do botão:

    Exit();

  17. 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. Altere o botão "SAVE" para que mostre "CHECK OUT".

    2. Edite os campos frmCheckOut para remover o campo Nome.

    3. Adicionar/mover o campo opcional Anexos para logo abaixo do campo Conclusão Estimada.

    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 no alto da tela e execute as seguintes ações:

    1. Renomeie o menu suspenso como ddServiceRequestForCheckOut.

    2. Posicione a lista suspensa acima do formulário frmCheckOut (redimensione seu formulário de acordo).

    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 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);

  7. 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ê compilou, desbloqueie as propriedades do cartão de dados para o campo Equipamentos do formulário frmCheckIn na tela CHECKIN. 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 Adicionar:

    Navigate(DIVEGEAR,ScreenTransition.Fade);

  6. Para garantir que a lista de equipamento seja atualizada quando um novo equipamento for criado, altere a propriedade da data source 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. Verifique se você adicionou 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 um contêiner à tela CHECKOUT e estique o contêiner para caber na tela inteira. Defina a propriedade Fill do contêiner como: RGBA(149,149,149,0.4)

  2. Adicione os seguintes rótulos ao controle de contêiner

    Nome Texto Posição/tamanho Outras informações
    lbl_SignatureCapture <vazio> X: 0
    Y: 338
    Largura: 640
    Altura: 384    		 Preenchimento: RGBA(255, 255, 255, 1)
    lbl_SignatureLine <vazio> X: 0
    Y: 587
    Largura: 640
    Altura: 13    		 Preenchimento: RGBA(0,0,0,1)
    lbl_CustomerSignature Assinatura do Cliente X: 21
    Y: 600
    Largura: 560
    Altura: 70    		 Tamanho da fonte: 21
    lbl_OK OK X: 388
    Y: 599
    Largura: 60
    Altura: 70    		 Tamanho da fonte: 21
    lbl_Cancel Cancelar X: 492
    Y: 599
    Largura: 122
    Altura: 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.

  3. Adicione os seguintes controles de Ícones ao contêiner na tela CHECKOUT. Eles aparecerão à esquerda dos rótulos Cancelar e OK e poderão ser selecionados.

    Nome Ícone Posição/tamanho Cor
    ico_Cancel Cancelar X: 448
    Y: 615
    Largura: 35
    Altura: 39    		 RGBA(255,0,0,1)
    ico_OK Verificação X: 346
    Y: 615
    Largura: 35
    Altura: 39    		 RGBA(51,176,75,1)

  4. Para capturar a assinatura do cliente, adicione um controle Entrada da caneta no seu contêiner. 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.

  5. Adicionaremos uma variável para exibir e ocultar o contêiner com 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);

  6. Para exibir e ocultar o contêiner com os controles relacionados à assinatura com base no status da variável flgSignature, defina a propriedade Visible do contêiner como:

    flgSignature

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

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

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

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

  9. 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 você deseja fornecer aos usuários, como Nome, Sobrenome, Email e Telefone Celular.

    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 do Dive Center usando o Dataverse como fonte de dados. Em seguida, você aprenderá a criar um aplicativo baseado em modelo.