Capítulo 3: Criando um protótipo com low-code

  • Artigo

Observação

O capítulo 2 referenciou o aplicativo móvel usado pelos técnicos e engenheiros de campo e o aplicativo de desktop usado pela equipe da local. Os capítulos a seguir se concentram no design, na implementação e no lançamento dos aplicativos móveis criados com o Power Apps. Os aplicativos de desktop são deixados como um exercício para o leitor.

Kiana é cética em relação a soluções low-code e ao Power Apps. Contudo, Kiana e Maria decidem criar um aplicativo juntas para ajudar os técnicos de campo a verificar o inventário (e solicitar peças, se necessário), consultar a base de dados de conhecimento e verificar o próximo compromisso enquanto estão fora do escritório em chamadas de serviço. Kiana e Maria planejam usar essa experiência para explorar como adicionar controles e usar fórmulas no Power Apps.

Embora criar um protótipo inicial low-code seja normalmente uma tarefa do desenvolvedor cidadão, Kiana decide prestar atenção ao processo para entender como o aplicativo é construído. Kiana precisa dessas informações para ajudar Maria a integrar as fontes de dados reais, as APIs Web e outros serviços necessários ao aplicativo.

Item 1: Gerenciamento de inventário de campo

O objetivo inicial de Maria é criar um aplicativo de tela que exibe uma lista de peças e permite ao usuário visualizar os detalhes de qualquer peça. Eventualmente, o usuário também deve ser capaz de solicitar uma peça; no entanto, esta versão inicial do aplicativo será simplesmente um protótipo e não será conectada a um back-end ainda. Depois de obter os comentários de Caleb, o técnico de campo principal, Maria trabalhará com Kiana na integração do aplicativo de tela com o sistema de inventário em execução no local.

Maria conhece muito bem o sistema de gerenciamento de inventário existente e entende as informações que ele contém. Maria começa criando uma pasta de trabalho do Excel que contém tabelas com dados simulados com detalhes de algumas peças de exemplo. Os campos da tabela são ID, Nome, CategoryID, Preço, Visão geral, NumberInStock e Imagem (uma URL que faz referência a uma imagem da peça). Essa pasta de trabalho pode ser usada para criar e testar o aplicativo de tela, a fim de garantir que ele exiba os dados necessários corretamente. Maria armazena essa pasta de trabalho apostila em uma conta do OneDrive com o nome BoilerParts.xlsx.

Observação

É possível encontrar uma cópia desta pasta de trabalho na pasta Ativos no repositório Git deste guia.

Planilha de peças da caldeira, mostrando uma lista de peças com as colunas Id, Nome, CategoryId, Preço, Visão geral, NumberInStock e Imagem.

Se você for um designer de banco de dados relacional, notará que a pasta de trabalho do Excel apresenta uma exibição desnormalizada dos dados. Por exemplo, em um banco de dados relacional, CategoryID provavelmente seria um identificador numérico que referencia uma tabela separada que contém os detalhes da categoria, incluindo o nome.

Observação

Atualmente, as URLs na coluna Imagem são apenas espaços reservados. No aplicativo concluído, essas URLs serão substituídas pelos endereços de arquivos de imagens reais.

Siga estas etapas para criar o aplicativo com o Power Apps.

  1. Entre no Power Apps.

  2. Na Página Inicial, em Iniciar pelos dados, selecione Excel Online.

    Home page do Power Apps Studio.

  3. Na página Conexões, selecione OneDrive for Business e Criar.

    Nova conexão do OneDrive.

  4. Na página OneDrive for Business, selecione o arquivo BoilerParts.xlsx.

    Conecte-se à pasta de trabalho do Excel.

  5. Selecione a tabela no arquivo Excel (Maria criou a tabela usando o nome padrão, Table1) e selecione Conectar.

    Conecte-se à tabela do Excel.

  6. Espere enquanto o Power Apps gera o aplicativo.

    Gere o aplicativo.

  7. Quando o aplicativo for gerado, você verá a tela Procurar, que exibe os campos CategoryID, ID e Imagem de cada linha da tabela de peças na pasta de trabalho.

    Peças mostradas na tela Procurar.

  8. Os campos que são exibidos atualmente não são muito úteis para ajudar um engenheiro a selecionar um produto. No painel que exibe a tela Procurar, selecione o rótulo Trocador de Calor na primeira linha de dados. Na barra de fórmulas, selecione a propriedade Texto na lista suspensa. Altere o valor desta propriedade para ThisItem.Name. O texto no primeiro campo de cada linha mudará para exibir o nome da peça.

    Observação

    Na imagem a seguir, o rótulo Trocador de Calor originalmente exibido no formulário mudou para o nome do produto: Aquecedor 3,5 W/S.

    Altere o texto de um controle de rótulo.

  9. Repita a etapa anterior para os rótulos ID e Imagem. Altere a propriedade Texto do campo ID para CategoryID, e a propriedade Texto do campo Imagem para Visão geral. A tela Procurar agora deve se parecer com a imagem a seguir, que um engenheiro de campo provavelmente achará útil para selecionar peças.

    Uma lista de itens que mostra o nome de uma peça, a categoria em que ela se encontra e uma visão geral descritiva.

  10. O recurso de pesquisa da tela Procurar usa como padrão os campos que foram inicialmente selecionados quando a tela foi gerada — nesse caso, CategoryID, ID e Imagem. Os resultados são classificados por CategoryID. Faz sentido mudar isso para os campos Nome, CategoryID e Visão geral, com resultados classificados por Nome. Selecione o controle BrowseGallery1 no painel Exibição de árvore. Na lista suspensa do lado esquerdo da barra de fórmula, selecione a propriedade Itens. Arraste a borda inferior da barra de fórmula para baixo, a fim de que a fórmula fique completamente visível. A fórmula contém a seguinte expressão:

    **SortByColumns(Search([\@Table1], TextSearchBox1.Text, "CategoryID","ID","Image"), "CategoryID", If(SortDescending1, Descending, Ascending))

    Classifique e pesquise campos.

  11. Altere a expressão Pesquisar para fazer referência aos campos Nome, CategoryID e Visão geral usando a seguinte fórmula:

    SortByColumns(Search([\@Table1], TextSearchBox1.Text, "Name", "CategoryID", "Overview"), "Name", If(SortDescending1, Descending, Ascending))

  12. O título no cabeçalho do formulário não é útil, e o tema padrão não corresponde à aparência corporativa da VanArsdel. Na tela Procurar, selecione o rótulo Table1 e, na barra Fórmula, altere a propriedade Texto do rótulo para "Procurar peças" (inclua as aspas duplas no valor).

  13. Na barra de ferramentas, selecione Tema (pode ser necessário expandir a barra de ferramentas para exibir mais itens) e selecione o tema Floresta. As cores e o estilo da tela Procurar mudarão para combinar com o tema.

    Selecione o tema.

Torne a tela Detalhes mais útil

Você criou o aplicativo básico e modificou a tela Procurar para exibir campos que um engenheiro pode usar para identificar uma peça. O aplicativo também contém uma tela Detalhes, que mostra todas as informações de uma peça selecionada. Os campos nesta tela não são exibidos em uma sequência lógica, portanto, será necessário reorganizá-los. Você também pode excluir o campo ID desta tela, porque esta informação é irrelevante para um engenheiro.

  1. No painel Exibição de árvore, role para baixo e selecione DetailScreen1. Esta tela exibe detalhes sobre a peça que um usuário seleciona na tela Procurar.

    Tela de detalhes das peças.

  2. No cabeçalho da tela Detalhes no painel do meio, selecione o rótulo Table1. No painel direito, na guia Propriedades, altere a propriedade Texto para Detalhes da Peça.

    Observação

    Em muitos casos, você pode obter os mesmos resultados usando a barra de fórmulas como o painel Propriedades. No entanto, algumas propriedades estão disponíveis apenas por meio do painel Propriedades.

    Altere o cabeçalho da tela Procurar peças.

  3. No painel Exibição de árvore, em DetailScreen1, selecione DetailForm1. No painel direito, na guia Propriedades, selecione Editar campos ao lado de Campos. No painel do meio, selecione e arraste os campos para que sejam exibidos na seguinte ordem, de cima para baixo:

    • Nome
    • CategoryID
    • Visão Geral
    • Preço
    • NumberInStock
    • Imagem
    • ID

    Organize campos na tela de detalhes.

  4. Selecione o campo ID, selecione as reticências que aparecem no lado direito do campo e selecione Remover no menu suspenso que aparece. Esta ação remove o campo ID do formulário.

    Remova o campo ID do formulário.

  5. No painel Exibição de árvore, em DetailForm1, selecione CategoryID_DataCard1. Este elemento é um controle DataCard que exibe o nome de um campo (chamado de chave) e seu valor.

    Controle de cartão de dados CategoryID.

    No painel direito, na guia Avançado, selecione Desbloquear para alterar as propriedades. Na seção Dados, altere o campo DisplayName para "Categoria" (inclua as aspas).

    Observação

    Tal como acontece com a guia Propriedades, muitas das propriedades na guia Avançado também podem ser acessadas por meio da barra de fórmulas. Para definir essas propriedades, você pode usar a barra de fórmulas, se preferir.

    Altere o nome de exibição do campo de detalhes CategoryID.

  6. Repita a etapa anterior para alterar a chave de NumberInStock_DataCard1 para "Número em inventário" (inclua as aspas).

  7. É necessário ajustar a formatação do campo Preço para exibir os dados como um valor de moeda. No painel Exibição de árvore, em DetailForm1, em Price_DataCard1, selecione DataCardValue7. Este é o campo que exibe o valor do campo Preço. No painel DataCardValue7 à direita, na guia Avançado, altere a propriedade Texto para Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

    Formate o preço como moeda.

    A expressão Parent.Default refere-se ao item de dados ao qual o controle pai (o DataCards) está vinculado — neste caso, a coluna Preço. A função Texto reformata esse valor usando o formato especificado como o segundo argumento; neste exemplo, esta é a moeda local com duas casas decimais.

  8. O cartão de dados da imagem deve exibir uma imagem da peça em vez da URL do arquivo de imagem. No painel Exibição de árvore, em DetailForm1, em Image_DataCard1, selecione DataCardValue3 e selecione Excluir para remover este controle.

  9. Selecione Image_DataCard1. No painel esquerdo, selecione + Inserir. No painel Inserir, expanda Mídia e selecione Imagem.

    Substitua uma URL de imagem por uma imagem.

  10. Retorne para o painel Exibição de árvore e verifique se o controle de texto Image1 foi adicionado ao controle Image_DataCard1.

    Verifique se o controle de imagem foi adicionado.

  11. No painel Exibição de árvore, selecione Image_DataCard1. No painel direito, na guia Avançado, altere Altura para 500, para permitir espaço suficiente para a exibição de uma imagem.

    Defina a altura do cartão de dados da imagem.

  12. No painel Exibição de árvore, selecione Image1. Defina as seguintes propriedades:

    • Imagem: Parent.Default
    • ImagePosition: ImagePosition.Fit
    • Largura: 550
    • Altura: 550

    Observação

    A imagem exibida está vazia porque a URL na pasta de trabalho do Excel é apenas um espaço reservado. Você resolverá esse problema e buscará uma URL real ao vincular o aplicativo a uma API Web em um capítulo posterior.

O aplicativo também contém uma tela Editar, que permite ao usuário alterar as informações de uma peça. Um engenheiro não deve ser capaz de alterar os detalhes de uma peça, criar novas peças ou excluir peças do catálogo.

  1. No painel Exibição de árvore, selecione EditScreen1. Selecione o botão de reticências e, em seguida, selecione Excluir para remover esta tela.

    Exclua a tela Editar.

  2. No painel Exibição de árvore, selecione DetailsScreen1. Note que o Power Apps Studio exibe uma mensagem de erro para esta tela. Este erro ocorre porque a DetailsScreen1 contém expressões que fazem referência à tela EditScreen1, que não existe mais.

  3. No cabeçalho da DetailsScreen1, selecione o ícone de lápis (IconEdit1). A propriedade OnSelect deste controle contém a expressão EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None). Quando o ícone Editar é selecionado, esta expressão é executada e tenta mover-se para a tela EditScreen1.

    Edite a propriedade OnSelect.

  4. No painel Exibição de árvore, selecione IconEdit1 e, em seguida, selecione Excluir. Este ícone não é mais necessário.

  5. Selecione IconDelete1 e, em seguida, selecione Excluir. Este ícone é usado para excluir a peça atual e também não é necessário.

    Remova os ícones de exclusão e edição.

  6. Observe que o texto Detalhes da Peça desapareceu do cabeçalho da tela e, em vez disso, o Power Apps Studio exibe uma mensagem de erro. Isso aconteceu porque a largura do controle de rótulo que exibe o texto é calculada. No painel Exibição de árvore, selecione LblAppName2. Examine a propriedade Largura. O valor desta propriedade é o resultado da expressão Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

    Controle LblAppName2 exibindo um erro de largura.

  7. Altere a expressão da propriedade Largura para Parent.Width - Self.X. O erro deve desaparecer, e o texto Detalhes da Peça deve reaparecer no cabeçalho da tela.

  8. No painel Exibição de árvore, selecione BrowseScreen1. Esta tela também exibirá uma mensagem de erro. O ícone + na barra de ferramentas (IconNewItem1) permite que o usuário adicione uma nova peça. A propriedade OnSelect deste ícone faz referência à telaEditScreen1.

    Novo ícone de item exibindo um erro.

  9. Selecione IconNewItem1 e, em seguida, selecione Excluir. Como antes, o texto no cabeçalho da tela desaparece e é exibida uma mensagem de erro, pelo mesmo motivo.

  10. No painel Exibição de árvore, em BrowseScreen1, selecione LblAppName1. Modifique a expressão da propriedade Largura removendo a referência a IconNewItem1.Width. A nova expressão deve ser Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

    Altere a largura do rótulo.

  11. Ainda há um problema com o cabeçalho. Embora o texto Procurar Peças tenha reaparecido, um erro está sendo exibido, e os ícones de atualização e classificação estão no lugar errado. No painel Exibição de árvore, selecione IconSortUpDown1. Encontre a propriedade X deste controle. Esta propriedade determina a posição horizontal do ícone no cabeçalho. Atualmente, ela é calculada com base na largura do controle IconNewItem1.

    Erro de ícone de classificação.

  12. Altere a expressão da propriedade X para Parent.Width - Self.Width.

  13. No painel Exibição de árvore, selecione IconRefresh1. Altere a expressão da propriedade X para Parent.Width - IconSortUpDown1.Width - Self.Width. Todos os erros devem desaparecer.

Salvar e testar o aplicativo

Agora você pode salvar e testar o aplicativo.

  1. Selecione Arquivo > Salvar como.

  2. Em Salvar como, selecione A nuvem, digite o nome VanArsdelApp e, em seguida, selecione Salvar.

    Salve o aplicativo.

  3. Selecione a seta para retornar à Página Inicial.

    Volte à tela inicial.

  4. Selecione F5 para visualizar o aplicativo. Na página Procurar Peças, selecione o colchete angular direito (>) à direita de qualquer peça. A tela Detalhes da peça aparece.

    Execução inicial do aplicativo.

  5. Selecione o colchete angular esquerdo (<) no cabeçalho da tela Detalhes para retornar à tela Procurar.

  6. Na tela Procurar Peças, digite o texto na caixa Pesquisar. Conforme você digita, os itens são filtrados para mostrar apenas aqueles que têm texto correspondente nos campos Nome, CategoryID ou Visão geral.

    Pesquise na tela Procurar Peças.

  7. Feche a janela de visualização e retorne ao Power Apps Studio.

Item 2: Base de dados de conhecimento de campo

Para ter acesso à base de dados de conhecimento, Maria e Caleb (o técnico) imaginam uma interface simples em que o usuário insere um termo de pesquisa e o aplicativo exibe todos os artigos da base de dados de conhecimento que mencionam o termo. Maria sabe que esse processo envolverá a Pesquisa Cognitiva do Azure, mas não precisa — ou nem mesmo deseja — entender como funciona. Portanto, Maria decide fornecer apenas a interface de usuário básica e trabalhar com Kiana posteriormente para adicionar a funcionalidade real.

Maria decide criar uma nova tela com base no modelo Lista disponível no Power Apps Studio.

  1. Na barra de ferramentas da tela Página Inicial do Power Apps Studio, selecione Nova Tela e, em seguida, selecione Lista.

    O modelo de lista.

  2. No cabeçalho da tela, selecione o rótulo que exibe o texto [Title]. Altere a propriedade Texto para "Consulta" (inclua as aspas).

    Modifique o texto do cabeçalho da tela de consulta.

  3. No cabeçalho da tela, selecione o sinal de mais (+) e, em seguida, selecione Excluir. O ícone + destina-se a permitir que o usuário adicione mais itens à lista. A base de dados de conhecimento é apenas para consulta, portanto, esse recurso não é necessário.

    Remova o ícone +.

    Observe que a remoção deste ícone causa um erro no cabeçalho devido à forma como a localização e as larguras dos outros itens são calculadas. Você viu isso anteriormente com a tela de gerenciamento de inventário, e a solução é a mesma, conforme descrito nas etapas a seguir.

  4. No painel Exibição de árvore, role para baixo até a seção Screen1 e selecione LblAppName3. Altere a propriedade Largura para a fórmula Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

    Modifique a largura do cabeçalho da tela de consulta.

  5. No painel Exibição de árvore, selecione IconSortUpDown2. Modifique a propriedade X para a fórmula Parent.Width - IconSortUpDown2.Width.

  6. No painel Exibição de árvore, selecione IconRefresh2. Modifique a propriedade X para a fórmula Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. Isso deve resolver todos os erros com a tela.

  7. Selecione Arquivo > Salvar.

  8. Na caixa Nota de versão, digite o texto IU da base de dados de conhecimento adicionada e, em seguida, selecione Salvar.

  9. Retorne para a tela Página Inicial e selecione F5 para visualizar a nova tela. Ela deve ser semelhante à seguinte imagem.

    Tela de consulta em execução.

    Observe que se você selecionar o ícone > próximo a qualquer uma das entradas fictícias, a funcionalidade de detalhes não funciona no momento. Você resolverá isso mais tarde, ao integrar a Pesquisa Cognitiva do Azure ao aplicativo.

  10. Feche a janela de visualização e retorne ao Power Apps Studio.

Item 3: Agendamento de campo e notas

Maria trabalha com Malik, recepcionista do escritório, para projetar a interface para o agendamento de campo e parte dos compromissos do aplicativo. Malik fornece uma pasta de trabalho do Excel com alguns dados de exemplo que Maria pode usar para criar a tela de compromissos. A pasta de trabalho contém uma tabela com as seguintes colunas:

  • ID (a ID de compromisso)
  • ID do cliente (um identificador exclusivo para o cliente)
  • Nome do Cliente
  • Endereço do Cliente
  • Detalhes do problema (uma descrição de texto do problema que o cliente está enfrentando)
  • Número do contato
  • Status
  • Data do compromisso
  • Horário do Compromisso
  • Notas (uma descrição de texto com quaisquer notas adicionadas pelo engenheiro)
  • Imagem (uma fotografia do dispositivo, em condições de funcionamento após a reparação ou como uma imagem complementar para as notas do engenheiro)

Pasta de trabalho de compromissos.

Observação

Tal como acontece com os dados de gerenciamento de inventário de campo, esta pasta de trabalho apresenta uma visão desnormalizada dos dados. No sistema de compromissos existente, esses dados são armazenados em tabelas separadas que contêm dados de compromissos e dados do cliente.

Maria armazena esse arquivo em uma conta do OneDrive com o nome Appointments.xlsx. Lembrando que anteriormente usava-se o nome padrão para a tabela da pasta de trabalho e que o título precisou ser alterado em várias telas que foram geradas, Maria renomeou a tabela da pasta de trabalho para Appointments.

Observação

Esta pasta de trabalho está disponível na pasta Ativos do repositório Git deste guia.

Maria deseja criar a seção de compromissos do aplicativo diretamente no arquivo Excel. Maria decide seguir uma abordagem semelhante à da funcionalidade de gerenciamento de inventário de campo, exceto que, desta vez, o engenheiro terá permissão para criar e editar compromissos.

Maria decide criar as telas de compromissos inicialmente como um aplicativo separado. Dessa forma, Maria pode usar o Power Apps Studio para gerar grande parte do aplicativo automaticamente. Atualmente, o Power Apps Studio não permite gerar telas adicionais a partir de uma conexão de dados em um aplicativo existente. Depois de criar e testar as telas, Maria copiará para o inventário de campo e o aplicativo de base de dados de conhecimento.

Observação

Uma abordagem alternativa é adicionar a tabela Compromissos no arquivo do Excel como uma segunda fonte de dados para o aplicativo existente e, em seguida, criar manualmente as telas de compromissos. Maria optou por gerar as novas telas direto da pasta de trabalho e copiar as telas. No momento, Maria está mais familiarizada com os conceitos de copiar e colar do que de criar telas manualmente, e aprenderá gradualmente a criar telas do zero à medida que o processo de criação desse aplicativo avançar.

Como criar o aplicativo de compromissos

  1. Na barra de menu do Power Apps Studio, selecione Arquivo.

    Menu do arquivo.

  2. No painel esquerdo, selecione Novo. No painel principal, selecione a caixa OneDrive for Business - Layout de telefone.

    Crie um aplicativo.

  3. No painel Conexões, selecione Appointments.xlsx.

    Novo aplicativo da pasta de trabalho de compromissos.

  4. No arquivo do Excel, selecione a tabela Compromissos e, em seguida, selecione Conectar.

    Selecione a tabela de compromissos.

  5. Aguarde enquanto o aplicativo é gerado. Quando o novo aplicativo aparecer, ele conterá uma tela Procurar, uma tela Detalhes e outra tela Editar, usando o tema padrão.

    O aplicativo de compromissos gerado.

  6. No painel Exibição de árvore, na seção BrowseScreen1 em BrowseGallery1, selecione Image1 e, em seguida, selecione Excluir. A tela Procurar deve apenas listar os compromissos, não as imagens associadas a eles.

    Exclua o controle de imagem.

    Observe que remover o controle Image1 causa vários erros na tela porque as larguras e a localização do controle Title1 fazem referência ao controle Imagem. Você corrigirá esses problemas na etapa seguinte.

  7. No painel Exibição de árvore, em BrowseGallery1, selecione Title1. Altere o valor na propriedade X para 16. Altere a fórmula na propriedade Largura para Parent.TemplateWidth - 104. Isso deve resolver todos os erros da tela.

  8. No painel Exibição de árvore, em BrowseGallery1, selecione Body1. Atualmente, esse controle exibe os detalhes do telefone de contato do cliente. Altere o valor na propriedade Texto para ThisItem.'Customer Name' (inclua as aspas simples).

    Altere o controle Body1 para o nome do cliente.

    Os detalhes na tela Procurar agora exibem o nome do cliente.

  9. No painel Exibição de árvore, selecione BrowseGallery1. Usando a barra de fórmulas, examine a expressão na propriedade Itens. O controle procura compromissos usando a data, a hora e o número de contato do compromisso. Altere esta fórmula para pesquisar o nome do cliente em vez do número de contato:

    SortByColumns(Search([@Appointments], TextSearchBox1.Text, "Appointment_x0020_Date","Appointment_x0020_Time","Customer_x0020_Name"), "Appointment_x0020_Date", If(SortDescending1, Descending, Ascending)).

    Observe que os compromissos são ordenados por data e hora (os primeiros dois campos exibidos).

  10. No painel Exibição de árvore, exclua IconNewItem1. Apenas a equipe local pode agendar novos compromissos para engenheiros e técnicos. Observe que essa ação resulta em erros no formulário porque a largura e a posição de outros controles no cabeçalho fazem referência ao ícone que você acabou de remover.

  11. No painel Exibição de árvore, selecione LblAppName1. Altere a fórmula da propriedade Largura. para Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

  12. No painel Exibição de árvore, selecione IconRefresh1. Altere o valor da propriedade X para Parent.Width - IconSortUpDown1.Width - Self.Width.

  13. No painel Exibição de árvore, selecione iconSortUpDown1. Altere o valor da propriedade X para Parent.Width - Self.Width.

  14. No painel Exibição de árvore, selecione BrowseScreen1 e, em seguida, selecione o botão de reticências (...). No menu suspenso que aparece, selecione Renomear e mude o nome da tela para BrowseAppointments.

    Renomeie a tela Procurar.

  15. Usando a mesma técnica, altere o nome do controle BrowseGallery1 para BrowseAppointmentsGaleria.

Isso completa a tela Procurar.

Como criar a tela de detalhes

Agora você pode voltar sua atenção para a tela Detalhes.

  1. No painel Exibição de árvore, role para baixo até a seção DetailsScreen1. Você pode ver que os detalhes são apresentados em ordem alfabética pelos nomes dos campos, e algumas informações úteis — tais como o campo Notas — não são exibidas.

    Layout da tela de detalhes do compromisso.

  2. No painel Exibição de árvore, selecione DetailForm1. No painel direito, na guia Propriedades, selecione Editar campos ao lado de Campos. No painel do meio, selecione cada um dos campos a seguir e, em seguida, selecione Excluir:

    • Data do compromisso
    • Horário do Compromisso
    • ID do Cliente
    • ID

  3. Selecione + Adicionar campo e adicione os seguintes campos:

    • Notas
    • Detalhes do Problema
    • Status

    Adicione campos à tela de detalhes.

  4. Arraste cada campo para que sejam exibidos na seguinte ordem, de cima para baixo:

    • Nome do Cliente
    • Endereço do Cliente
    • Número do contato
    • Detalhes do Problema
    • Status
    • Notas
    • Imagem

  5. No painel Exibição de árvore, selecione Notes_DataCard1. Altere a propriedade Altura para 320.

    Modifique o tamanho do campo de notas.

  6. No painel Exibição de árvore, exclua IconDelete1. Os engenheiros não devem ser capazes de remover compromissos do sistema.

  7. Selecione LblAppName2 e altere a propriedade Largura para Parent.Width - Self.X - IconEdit1.Width.

  8. Usando a técnica descrita anteriormente, altere o nome de DetailsScreen1 para AppointmentDetails.

Como editar a tela de edição

A última tela a ser analisada, por enquanto, é a tela Editar.

  1. No painel Exibição de árvore, selecione EditScreen1.

  2. No painel Exibição de árvore, na seção EditScreen1, selecione EditForm1. No painel direito, na guia Propriedades, selecione Editar campos ao lado de Campos.

  3. Remova os seguintes campos:

    • Endereço do Cliente
    • ID
    • ID do Cliente
    • Data do compromisso
    • Horário do Compromisso

  4. Adicione os seguintes campos:

    • Detalhes do Problema
    • Status
    • Notas

  5. Arraste cada campo para que sejam exibidos na seguinte ordem, de cima para baixo:

    • Nome do Contato
    • Número do Cliente
    • Detalhes do Problema
    • Status
    • Notas
    • Imagem

  6. Selecione o campo Nome do Cliente e expanda-o para ver suas propriedades. Altere o Tipo de controle para Exibir texto. Essa alteração torna o controle somente leitura. É útil ver o nome do cliente na tela Editar, mas um engenheiro não deve ser capaz de alterá-lo.

    Torne o nome do cliente somente leitura.

  7. Selecione o campo Nome de Contato e expanda-o para ver suas propriedades. Altere o Tipo de controle para Exibir texto. Este campo também deve ser somente leitura.

  8. Selecione o campo Notas, expanda-o e altere o Tipo de controle para Editar texto multilinha. Esta configuração permite que o engenheiro adicione notas detalhadas que podem abranger várias linhas.

  9. Selecione o campo Status, expanda-o e altere o Tipo de controle para Valores permitidos.

  10. No painel Exibição de árvore, selecione Status_DataCard5. No painel direito, na guia Propriedades, selecione Desbloquear para alterar as propriedades. Role para baixo até a propriedade AllowedValues e altere o texto para ["Fixed", "Parts Ordered", "Unresolved"] (inclua os colchetes). O engenheiro de campo só pode definir o Status como um desses valores definidos.

    Defina os valores de status permitidos.

  11. No painel Exibição de árvore, renomeie EditScreen1 como EditAppointment.

Agora você pode salvar e testar o aplicativo.

  1. Selecione Arquivo > Salvar como.

  2. Em Salvar como, selecione A nuvem, digite o nome VanArsdelAppointments e, em seguida, selecione Salvar.

  3. Selecione a seta para voltar na barra de ferramentas do Power Apps Studio para retornar à tela Página Inicial.

  4. Selecione F5 para visualizar o aplicativo. Na página Compromissos, selecione o ícone > ao lado de qualquer compromisso. A tela Detalhes do compromisso deve aparecer. No cabeçalho, selecione Editar para atualizar o compromisso. Verifique o seguinte:

    • Os campos de nome do cliente e número de contato são somente leitura.
    • O campo de status é limitado aos valores da lista suspensa.
    • É possível inserir notas que abrangem várias linhas.
    • É possível carregar um arquivo de imagem no campo de imagem.

    Observação

    Um aprimoramento que será adicionado posteriormente permitirá que você tire uma foto com seu telefone no aplicativo e adicione-a ao campo de imagem.

    O aplicativo de compromissos em execução.

Combinando as telas em um único aplicativo

Maria criou dois aplicativos, mas deseja combiná-los em um único aplicativo. Para fazer isso, Maria copia as telas do aplicativo de compromissos para o aplicativo de gerenciamento de inventário de campo e de base de dados de conhecimento, da seguinte maneira:

  1. Abra uma nova janela do navegador e faça login no Power Apps Studio com os detalhes da sua conta.

  2. No painel esquerdo, selecione Aplicativos, selecione VanArsdelApp e, em seguida, selecione Editar.

    Abra o aplicativo VanArsdel.

  3. Na barra de ferramentas, selecione Nova tela e, em seguida, selecione Em branco. Esta ação adicionará uma nova tela ao aplicativo para a qual você copiará os controles para a tela Procurar do aplicativo VanArsdelAppointments.

    Adicione uma tela em branco.

  4. A nova tela será nomeada como Screen2. No painel Exibição de árvore, renomeie-a como BrowseAppointments.

  5. Repita a etapa anterior mais duas vezes, para adicionar mais duas telas em branco (Screen3 e Screen4).

  6. Renomeie Screen3 como AppointmentDetails e renomeie Screen4 como EditAppointment.

  7. Na barra de ferramentas esquerda do Power Apps Studio, selecione o ícone Dados. No painel Dados, selecione Adicionar dados. Na lista suspensa Selecionar uma fonte de dados, no campo Procurar, digite OneDrive e, em seguida, selecione OneDrive for Business.

    Selecione a fonte de dados.

  8. Selecione o arquivo do Excel Appointments.xlsx, selecione a tabela Compromissos e, em seguida, selecione Conectar.

  9. Mude para a janela do navegador que mostra o aplicativo VanArsdelAppointments.

  10. Na barra de ferramentas, selecione Tema (pode ser necessário expandir a barra de ferramentas para exibir mais itens) e selecione o tema Floresta. Este é o mesmo tema usado pelo aplicativo VanArsdel.

  11. Na barra de ferramentas esquerda, selecione o ícone Exibição de árvore, selecione a tela BrowseAppointments e, em seguida, selecione Ctrl+A. Esta ação seleciona todos os controles na tela.

  12. Selecione Ctrl+C para copiar esses controles para a área de transferência.

  13. Volte para a janela do navegador que mostra o aplicativo VanArsdelAppointments.

  14. Na barra de ferramentas esquerda, selecione o ícone Exibição de árvore e, em seguida, selecione a tela BrowseAppointments.

  15. Selecione Ctrl+V para colar os controles na tela.

    Observação

    Às vezes, o cabeçalho da tela aparece um pouco baixo demais. Para corrigir este problema, selecione os controles IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1 e RectQuickActionBar1_1 no painel Exibição de árvore (mantenha pressionado Shift enquanto clica para selecionar mais de um controle por vez) e, em seguida, use o mouse ou as teclas de seta para movê-los para cima no painel de visualização do projeto.

  16. Volte para a janela do navegador que mostra o aplicativo VanArsdelAppointments e, em seguida, selecione e copie os controles na tela AppointmentDetails para a área de transferência (Ctrl+A seguido por Ctrl+C).

  17. Volte para a janela do navegador que mostra o aplicativo VanArsdelApp, selecione a tela AppointmentDetails e cole os controles (Ctrl+V). Ajuste a posição dos controles no cabeçalho da tela, se necessário.

    Observação

    Você verá um erro relatado no cabeçalho da tela AppointmentDetails. Este erro ocorre porque a tela faz referência a controles na tela EditAppointment, que ainda não foram copiados. As próximas etapas devem resolver esse erro.

  18. Volte para a janela do navegador que mostra o aplicativo VanArsdelAppointments e, em seguida, selecione e copie os controles na tela EditAppointment para a área de transferência.

  19. Volte para a janela do navegador que mostra o aplicativo VanArsdelApp, selecione a tela EditAppointment e cole os controles. Novamente, mova os controles no cabeçalho da tela, se necessário.

  20. No painel Exibição de árvore, selecione a tela AppointmentDetails e verifique se o erro indicado anteriormente desapareceu.

  21. No painel Exibição de árvore, selecione a tela BrowseScreen1. Renomeie esta tela como BrowseParts.

  22. Renomeie a tela DetailsScreen1 como PartDetails.

  23. Renomeie a tela Screen1 como Base de dados de conhecimento.

    Observação

    É uma boa prática renomear as telas para refletir a função, em vez de usar os nomes padrão gerados pelo Power Apps Studio, especialmente se um aplicativo contém várias telas. Isso pode ajudar a evitar confusão posteriormente, se o aplicativo for modificado por outro desenvolvedor.

Adicionando uma tela Página Inicial ao aplicativo

O estágio final é adicionar uma tela Página Inicial ao aplicativo. A tela Página Inicial permitirá que o engenheiro se mova entre as diferentes partes do aplicativo (gerenciamento de inventário, base de dados de conhecimento e compromissos).

  1. No aplicativo VanArsdelApp na barra de ferramentas, selecione Nova tela e, em seguida, selecione Em branco.

  2. No painel Exibição de árvore, renomeie Screen2 como Página Inicial.

  3. Na barra de ferramentas, selecione Inserir. Na lista de controles, expanda Mídia e, em seguida, selecione Imagem. O controle será adicionado à tela.

    Adicione um controle de imagem à tela Página Inicial.

  4. Defina a posição X do controle como 16, e a posição Y como 22. Altere a Largura para 605, e a Altura para 127. Altere a Posição da imagem para Preencher.

    Defina o tamanho e a posição da imagem.

  5. Ainda na guia Propriedades, na lista suspensa Imagem, selecione + Adicionar um arquivo de imagem e, em seguida, carregue a imagem VanArsdelLogo.png no controle.

    Observação

    O arquivo de imagem está disponível na pasta Ativos no repositório Git deste guia.

    Adicione um logotipo à imagem.

  6. Na lista de controles, adicione quatro controles Rótulo do texto ao formulário e posicione-os de forma que fiquem empilhados sob o logotipo da VanArsdel.

    Adicione controles de rótulo de texto.

  7. Selecione o controle Rótulo do texto superior. No painel direito, na guia Propriedades, defina a propriedade Texto como Próximo Compromisso. Defina Tamanho da Fonte como 30 e use o seletor de cores para definir a cor da fonte como verde (para corresponder ao logotipo).

    Defina a cor da fonte.

  8. Selecione o segundo controle Rótulo do texto. Altere o valor da propriedade Texto para First(Appointments).'Customer Name' (inclua as aspas). Esta fórmula recupera o nome do cliente na primeira linha da tabela de compromissos.

    Exiba o nome do cliente.

    Observação

    Atualmente, essa fórmula atua apenas como um espaço reservado. Você modificará o rótulo posteriormente para recuperar o próximo compromisso do engenheiro, em vez de sempre exibir o primeiro.

  9. Selecione o terceiro controle Rótulo do texto e defina a propriedade Texto como First(Appointments).'Appointment Date'.

  10. Defina a propriedade Texto do quarto controle de rótulo como First(Appointments).'Appointment Time'. Defina a propriedade Tamanho da fonte como 30.

  11. Na lista de controles, adicione um Retângulo ao controle. Defina as seguintes propriedades para este controle:

    • Modo de exibição: Exibição
    • X: 0
    • Y: 632
    • Largura: 635
    • Altura: 1

    Esse controle atua como um separador visual no meio da tela.

  12. Adicione três controles Botão à tela, dispostos verticalmente e espaçados uniformemente abaixo do separador. Defina a propriedade Texto do botão superior como Compromissos, a propriedade Texto do botão do meio como Peças e a propriedade Texto do botão inferior como Base de Dados de Conhecimento.

    Botões da tela Página Inicial.

  13. Selecione o botão Compromissos. Altere a expressão na ação OnSelect para a fórmula Navigate(BrowseAppointments, ScreenTransition.Fade). Esta ação muda a exibição para a tela de compromissos quando o usuário seleciona o botão.

    Botão de compromissos.

  14. Defina a ação OnSelect do botão Peças como Navigate(BrowseParts, ScreenTransition.Fade).

  15. Defina a ação OnSelect do botão Base de Dados de Conhecimento como Navigate(Knowledgebase, ScreenTransition.Fade).

Além de navegar da tela Página Inicial para as outras telas do sistema, as telas Compromissos, Peças e Base de Dados de Conhecimento precisam de uma maneira de permitir que o usuário retorne à tela Página Inicial. Maria decide adicionar botões Voltar a essas telas.

  1. No painel Exibição de árvore, selecione a tela BrowseParts.

  2. Selecione o controle RectQuickActionBar1 para dar o foco.

  3. Selecione o menu Inserir e selecione Adicionar ícone. Mova o ícone à esquerda do controle RectQuickActionBar1. Observe que o ícone obscurecerá parte do rótulo Procurar Peças.

    Adicione um ícone.

  4. No menu Exibição de árvore, altere o nome do novo controle de ícone para IconReturn1.

  5. Altere a fórmula da ação OnSelect para a expressão Back(ScreenTransition.Fade). A função Voltar leva o usuário à tela anterior que ele visitou.

  6. Na guia Propriedades, altere a propriedade do ícone para < Left.

  7. No cabeçalho da tela, selecione o rótulo Procurar Peças. Altere a propriedade X para IconReturn1.Width + 20. O rótulo Procurar peças não deve mais estar parcialmente obscurecido.

    Mova o rótulo Procurar Peças.

  8. Seguindo o processo descrito nas etapas 16 a 22, adicione um ícone chamado IconReturn2 ao controle RectQuickActionBar3 na tela Base de Dados de Conhecimento.

  9. Da mesma forma, adicione um ícone chamado IconReturn3 ao controle RectQuickActionBar1_1 na tela BrowseAppointments.

  10. No painel Exibição de árvore, selecione o objeto App. Altere a propriedade StartScreen para a expressão Home. Esta ação garante que a tela Página Inicial seja exibida sempre que o aplicativo for iniciado:

    Defina a fórmula do aplicativo OnStart.

    Observação

    Se você não especificar qual tela exibir quando o aplicativo for iniciado, a tela que aparece na parte superior do painel Exibição de árvore será usada. Para mover uma tela para o início da lista, clique com o botão direito na tela do painel Exibição de árvore e selecione Mover para cima até que esteja no topo.

Finalmente, você pode testar o aplicativo.

  1. Selecione Arquivo > Salvar. Na caixa Notas de versão, insira Versão completa com a tela Página Inicial e, em seguida, selecione Salvar.

  2. Selecione a seta para trás para retornar à tela Página Inicial e, em seguida, selecione F5 para executar o aplicativo.

  3. Verifique se a tela Página Inicial do aplicativo aparece.

  4. Selecione Compromissos. A tela de compromissos deve aparecer.

  5. Selecione a seta para retornar à Página Inicial.

  6. Selecione Peças. O navegador de peças deve aparecer.

  7. Selecione a seta para retornar à Página Inicial.

  8. Selecione Base de Dados de Conhecimento. A tela de consulta da base de dados de conhecimento deve aparecer.

  9. Selecione a seta para retornar à Página Inicial.

  10. Feche a janela de visualização e retorne ao Power Apps Studio.

O aplicativo protótipo agora está completo.

Anterior Próximo