Capítulo 3: Criar um protótipo com pouco código

Nota

O Capítulo 2 referenciava a aplicação móvel utilizada pelos engenheiros e técnicos no terreno, e a aplicação de computador utilizada pelo pessoal no local. Os capítulos seguintes focam-se na estrutura e na implementação das aplicações móveis criadas com o Power Apps. As aplicações de computador são deixadas como um exercício para o leitor.

A Kiana está cética em relação às soluções de pouco código e ao Power Apps. No entanto, Kiana e Maria decidem criar uma aplicação em conjunto para ajudar os técnicos de campo a verificarem o inventário (e encomendar peças, se necessário), consultar a base de dados conhecimentos e consultar o próximo compromisso quando estão fora do escritório em chamadas de serviço. Kiana e Maria planeiam usar esta experiência para explorar como adicionar controlos e usar fórmulas no Power Apps.

Apesar de a criação inicial de um protótipo de pouco código ser normalmente uma tarefa do programador cidadão, Kiana decide prestar atenção ao processo para compreender como a aplicação é criada. Kina precisa desta informação para ajudar a Maria a integrar as origens de dados do mundo real, as APIs Web e outros serviços necessários na aplicação.

Item 1: Gestão de inventário no terreno

O objetivo inicial de Maria é criar uma aplicação de tela que apresente uma lista de peças e permita ao utilizador ver os detalhes de qualquer peça. No final, o utilizador também deve ser capaz de encomendar uma peça; no entanto, esta versão inicial da aplicação será simplesmente um protótipo e ainda não será ligada a um back-end. Depois de obter comentários de Caleb, o principal técnico no terreno, Maria trabalhará com Kiana na integração da aplicação de tela com o sistema de inventário em execução no local.

Maria está muito familiarizada com o sistema de gestão de inventário existente e compreende a informação que contém. Maria começa por criar um livro do Excel que contém as tabelas que guardam dados fictícios com detalhes para algumas peças de exemplo. Os campos na tabela são ID, Nome, CategoryID, Preço, Descrição geral, NumberInStock e Imagem (um URL que referencia uma imagem peça). Este livro pode ser utilizado para criar e testar a aplicação de tela a fim de garantir que apresenta corretamente os dados necessários. Maria armazena este livro numa conta do OneDrive com o nome BoilerParts.xlsx.

Nota

Pode encontrar uma cópia deste livro na pasta Ativos no repositório do Git para este guia.

Se for um estruturador de bases de dados relacionai, irá constatar que o livro do Excel apresenta uma vista desnormalizada dos dados. Por exemplo, numa base de dados relacional, CategoryID seria mais provavelmente um identificador numérico que faz referência a uma tabela separada que contém os detalhes da categoria, incluindo o nome.

Nota

Os URLs na coluna Imagem são atualmente apenas marcadores de posição. Na aplicação concluída, estes URLs serão substituídos pelos endereços de ficheiros de imagem reais.

Siga estes passos para criar a aplicação com o Power Apps.

1. Inicie sessão no Power Apps.

2. Na página Home page, em Começar a partir de dados, selecione Excel Online.

   

3. Na página Ligações, selecione OneDrive para Empresas e, em seguida, selecione Criar.

   

4. Na página OneDrive para Empresas, selecione o ficheiro BoilerParts.xlsx.

   

5. Selecione a tabela no ficheiro do Excel (Maria criou a tabela com o nome predefinido, Table1) e, em seguida, selecione Ligar.

   

6. Aguarde enquanto o Power Apps gera a aplicação.

   

7. Quando a aplicação tiver sido gerada, verá o ecrã Procurar apresentando os campos CategoryID, ID e Imagem de cada linha da tabela de peças no livro.

   

8. Os campos que são atualmente apresentados não são muito úteis para ajudar um engenheiro a selecionar um produto. No painel que apresenta o ecrã Procurar, selecione a etiqueta Permutador de Calor na primeira linha de dados. Na barra de fórmulas, selecione a propriedade Texto a partir da lista pendente. Altere o valor desta propriedade para ThisItem.Name. O texto no primeiro campo de cada linha mudará para apresentar o nome da peça.

   Nota

   Na imagem seguinte, a etiqueta Permutador de Calor apresentada originalmente no formulário mudou para o nome do produto, Aquecedor 3,5 W/S.

   

9. Repita o passo anterior para as etiquetas ID e Imagem. Altere a propriedade Texto do campo ID para CategoryID e a propriedade Texto do campo Imagem para Descrição geral. O ecrã Procurar deve agora parecer como a seguinte imagem, que é mais que um engenheiro no terreno considere útil para selecionar peças.

   

10. A funcionalidade de pesquisa do ecrã Procurar assume por omissão a utilização dos campos inicialmente selecionados quando o ecrã foi gerado, neste caso CategoryID, ID e Imagem. Os resultados são ordenador por CategoryID. Faz sentido mudar isto para os campos Nome, CategoryID e Descrição geral, com os resultados ordenados por Nome. Selecione o controlo BrowseGallery1 no painel the Vista de árvore. Na lista pendente no lado esquerdo da barra de fórmulas, selecione a propriedade Itens. Arraste a extremidade inferior da barra de fórmulas para baixo para a fórmula ficar totalmente visível. A fórmula contém a seguinte expressão:

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

    

11. Altere a expressão Procurar para fazer referência aos campos Nome, CategoryID e Descrição geral através da 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 predefinido não corresponde ao aspeto e funcionalidade empresarial da VanArsdel. No ecrã Procurar, selecione a etiqueta Table1 e, na barra Fórmula, altere a propriedade Texto da etiqueta para "Procurar peças" (inclua as aspas duplas no valor).

13. Na barra de ferramentas, selecione Tema (poderá ter de expandir a barra de ferramentas para apresentar mais itens) e, em seguida, selecione o tema Floresta. As cores e o estilo para o ecrã Procurar mudarão para corresponder ao tema.

    

Tornar o ecrã Detalhes mais útil

Criou a aplicação básica e modificou o ecrã Procurar para apresentar os campos que um engenheiro pode usar para identificar uma peça. A aplicação também contém um ecrã Detalhes, que mostra todas as informações para uma peça selecionada. Os campos neste ecrã não são apresentados atualmente numa sequência lógica, pelo que deve reordená-los. Também pode eliminar o campo ID deste ecrã, porque esta informação é irrelevante para um engenheiro.

1. No painel Vista de árvore, desloque-se para baixo e selecione DetailScreen1. Este ecrã apresenta os detalhes sobre a peça que um utilizador seleciona no ecrã Procurar.

   

2. No cabeçalho do ecrã Detalhes no painel central, selecione a etiqueta Table1. No painel direito, no separador Propriedades, altere a propriedade Texto para Detalhes da peça.

   Nota

   Em muitos casos, pode conseguir os mesmos resultados utilizando a barra de fórmulas que o painel Propriedades. No entanto, algumas propriedades só estão disponíveis através do painel Propriedades.

   

3. No painel Vista de árvore, em DetailScreen1, selecione DetailForm1. No painel direito, no separador Propriedades, selecione Editar campos junto a Campos. No painel central, selecione e arraste os campos para serem apresentados exibidos pela seguinte ordem, de cima para baixo:

   • Nome
   • CategoryID
   • Descrição geral
   • Preço
   • NumberInStock
   • Imagem
   • ID

   

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

   

5. No painel Vista de árvore, em DetailForm1, selecione CategoryID_DataCard1. Este elemento é um controlo DataCard que apresenta o nome de um campo (denominado chave) e o respetivo valor.

   

   No painel direito, no separador Avançadas, selecione Desbloquear para alterar propriedades. Na secção Dados, altere o campo DisplayName para "Categoria" (inclua as aspas).

   Nota

   Tal como acontece com o separador Propriedades, muitas das propriedades no separador Avançadas também estão acessíveis através da barra de fórmulas. Para definir estas propriedades, pode utilizar a barra de fórmulas, se preferir.

   

6. Repita o passo anterior para alterar a chave para NumberInStock_DataCard1 para "Número em Stock" (inclua as aspas).

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

   

   A expressão Parent.Defaultreferencia o item de dados ao qual o controlo principal (o DataCard) está vinculado, neste caso, a coluna Preço. A função Texto reformata este valor utilizando o formato especificado como segundo argumento; neste exemplo, esta é a moeda local com duas casas decimais.

8. O cartão de dados da imagem deve apresentar uma imagem da peça em vez do URL do ficheiro de imagem. No painel Vista de árvore, em DetailForm1, em Image_DataCard1, selecione DataCardValue3 e, depois, selecione Eliminar para remover este controlo.

9. Selecione Image_DataCard1. No painel esquerdo, selecione + Inserir. No painel Inserir, expanda Suporte de dados e selecione Imagem.

   

10. Regresse ao painel Vista de árvore e verifique se o controlo de texto Image1 foi adicionado ao controlo Image_DataCard1.

    

11. No painel Vista de árvore, selecione Image_DataCard1. No painel direito, no separador Avançadas, altere Altura para 500, para permitir espaço suficiente para uma imagem ser apresentada.

    

12. No painel Vista de árvore, selecione Image1. Defina as seguintes propriedades:

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

    Nota

    A imagem apresentada está atualmente vazia porque o URL no livro do Excel é apenas um marcador de posição. Resolva este problema e obtenha um URL real quando vincula a aplicação a uma API Web num capítulo posterior.

A aplicação também contém um ecrã Editar, que permite a um utilizador alterar a informação para uma peça. Um engenheiro não deve ser capaz de alterar os detalhes de uma peça, criar peças novas ou eliminar peças do catálogo.

1. No painel Vista de árvore, selecione EditScreen1. Selecione o botão de reticências e, em seguida, selecione Eliminar para remover este ecrã.

   

2. No painel Vista de árvore, selecione DetailsScreen1. Tenha em atenção que o Power Apps Studio apresenta uma mensagem de erro para este ecrã. Este erro ocorre porque o DetailsScreen contém expressões que referenciam o ecrã EditScreen1, que já não existe.

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

   

4. No painel Vista de árvore, selecione IconEdit1 e, depois, selecione Eliminar. Este ícone já não é necessário.

5. Selecione IconDelete1 e, depois, selecione Eliminar. Este ícone é utilizado para eliminar a peça atual e também não é necessário.

   

6. Tenha em atenção que o texto Detalhes da Peça desapareceu do cabeçalho do ecrã, e em vez disso o Power Apps Studio apresenta uma mensagem de erro. Isto aconteceu porque é calculada a largura do controlo de etiqueta que apresenta o texto. No painel Vista 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.

   

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 do ecrã.

8. No painel Vista de árvore, selecione BrowseScreen1. Este ecrã também apresentará uma mensagem de erro. O ícone + na barra de ferramentas (IconNewItem1) permite ao utilizador adicionar uma nova peça. A propriedade OnSelect para este ícone referencia o ecrã EditScreen1.

   

9. Selecione IconNewItem1 e, depois, selecione Eliminar. Como antes, o texto no cabeçalho para o ecrã desaparece e é apresentada uma mensagem de erro, e pelo mesmo motivo.

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

    

11. Continua a existir um problema com o cabeçalho. Apesar de o texto Procurar Peças ter reaparecido, está a ser apresentado um erro e os ícones de atualização e ordenação estão no local errado. No painel Vista de árvore, selecione IconSortUpDown1. Localize a propriedade X para este controlo. Esta propriedade determina a posição horizontal do ícone no cabeçalho. Atualmente, é calculada com base na largura do controlo IconNewItem1.

    

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

13. No painel Vista de árvore, selecione IconRefresh1. Altere a expressão da propriedade X para Parent.Width - IconSortUpDown1.Width - Self.Width. Os erros devem desaparecer todos.

Guardar e testar a aplicação

Agora pode guardar e testar a aplicação.

1. Selecione Ficheiro > Guardar como.

2. Em Guardar como, selecione A cloud, introduza o nome VanArsdelApp e, em seguida, selecione Guardar.

   

3. Selecione a seta para trás para voltar ao ecrã Home page.

   

4. Selecione F5 para pré-visualizar a aplicação. Na página Procurar Peças, selecione o parêntesis angular direito (>) à direita de qualquer peça. Aparece o ecrã Detalhes para a peça.

   

5. Selecione o parêntesis angular esquerdo (<) no cabeçalho do ecrã Detalhes para voltar ao ecrã Procurar.

6. No ecrã Procurar Peças, introduza texto na caixa Procurar. À medida que se escreve, os itens serão filtrados para mostrar apenas os que têm texto correspondente nos campos Nome, CategoryID ou Descrição geral.

   

7. Feche a janela de pré-visualização e regresse ao Power Apps Studio.

Item 2: Base de dados de conhecimento no terreno

Para obterem acesso à base de dados de conhecimento, Maria e Caleb (o técnico) preveem ter uma interface simples onde o utilizador introduz um termo de pesquisa e a aplicação apresenta todos os artigos da base de dados de conhecimento que mencionam o termo. Maria sabe que este processo vai envolver o Azure Cognitive Search, mas não precisa, nem quer, compreender como funciona. Assim, a Maria decide fornecer apenas a interface de utilizador básica e trabalhar com Kiana posteriormente para adicionar a funcionalidade real.

Maria decide criar um novo ecrã baseado no modelo Lista disponível no Power Apps Studio.

1. Na barra de ferramentas do ecrã Home page do Power Apps Studio, selecione Novo Ecrã e, depois, selecione Lista.

   

2. No cabeçalho do ecrã, selecione a etiqueta que apresenta o texto [Title]. Altere a propriedade Texto para "Consulta" (incluir as aspas).

   

3. No cabeçalho do ecrã, selecione o sinal de adição (+) e selecione Eliminar. O ícone + destina-se a permitir ao utilizador adicionar mais itens à lista. A base de dados de conhecimento é só de consulta, pelo que esta funcionalidade não é necessária.

   

   Tenha em atenção que remover este ícone causa um erro no cabeçalho devido à forma como a localização e as larguras dos outros itens são calculadas. Viu isto mais anteriormente com o ecrã de gestão de inventário, e a solução é a mesma, conforme descrito nos passos seguintes.

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

   

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

6. No painel Vista de árvore, selecione IconRefresh2. Modifique a propriedade X para Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. Isto deve resolver todos os erros com o ecrã.

7. Selecione Ficheiro > Guardar.

8. Na caixa Nota da versão, introduza o texto OI da base de dados de conhecimento adicionada e selecione Guardar.

9. Regresse ao ecrã Home page e selecione F5 para pré-visualizar o novo ecrã. Deve ter o aspeto da seguinte imagem:

   

   Note que, se selecionar o ícone > junto a qualquer uma das entradas fictícias, a funcionalidade de detalhes não funciona atualmente. Aborde isto mais tarde quando integrar o Azure Cognitive Search na aplicação.

10. Feche a janela de pré-visualização e regresse ao Power Apps Studio.

Item 3: Agendamento e notas no terreno

Maria trabalha com Malik, o rececionista do escritório, para conceber a interface para a parte dos compromissos e do agendamento no terreno parte da aplicação. Malik fornece um livro do Excel com alguns dados de exemplo que Maria pode usar para criar o ecrã de compromissos. O livro contém uma tabela com as seguintes colunas:

• ID (o ID do 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á a ter)
• Número de Contacto
• Estado
• Data do Compromisso
• Hora do Compromisso
• Notas (uma descrição do texto com quaisquer notas adicionadas pelo engenheiro)
• Imagem (uma fotografia da aplicação, seja em condições de funcionamento após a reparação ou como imagem suplementar para as notas do engenheiro)

Nota

Tal como acontece com os dados de gestão do inventário no terreno, este livro apresenta uma vista desnormalizada dos dados. No sistema de compromissos existente, estes dados são armazenados em tabelas separadas que contêm os dados dos compromissos e os dados dos clientes.

Maria armazena este ficheiro numa conta do OneDrive com o nome Appointments.xlsx. Lembrando-se de que anteriormente o nome predefinido para a tabela foi utilizado no livro e o título teve de ser alterado nos vários ecrãs que foram gerados, Maria muda o nome da tabela no livro para Compromissos.

Nota

Este livro está disponível na pasta Ativos do repositório do Git para este guia.

Maria quer criar a secção de compromissos da aplicação diretamente a partir do ficheiro do Excel. Maria decide seguir uma abordagem semelhante à da funcionalidade de gestão do inventário no terreno, exceto que desta vez o engenheiro terá permissão para criar e editar os compromissos.

Maria decide criar os ecrãs de compromissos inicialmente como uma aplicação separada. Desta forma, Maria pode usar o Power Apps Studio para gerar grande parte da aplicação automaticamente. Atualmente, o Power Apps Studio não permite gerar ecrãs adicionais a partir de uma ligação de dados numa aplicação existente. Após criar e testar os ecrãs, a Maria irá copiá-los para o inventário no terreno e para a aplicação da base de dados de conhecimento.

Nota

Uma abordagem alternativa consiste em adicionar a tabela Compromissos no ficheiro do Excel como uma segunda origem de dados à aplicação existente e, em seguida, criar manualmente os ecrãs para compromissos. A Maria optou por gerar os novos ecrãs a partir do livro e copiar os ecrãs. Atualmente, a Maria está mais familiarizada com os conceitos de copiar e colar do que com a criação manual dos ecrãs e irá gradualmente aprender a criar ecrãs de raiz à medida que o processo de criação desta aplicação progride.

Para criar a aplicação de compromissos

1. Na barra de menus do Power Apps Studio, selecione Ficheiro.

   

2. No painel esquerdo, selecione Novo. No painel principal, selecione a caixa OneDrive para Empresas - Esquema de telefone.

   

3. No painel Ligações, selecione Appointments.xlsx.

   

4. No ficheiro do Excel, selecione a tabela Compromissos e, em seguida, selecione Ligar.

   

5. Aguarde enquanto a aplicação é gerada. Quando a nova aplicação aparecer, conterá um ecrã Procurar, um ecrã Detalhes e um ecrã Editar através do tema predefinido.

   

6. No painel Vista de árvore, na secção BrowseScreen1, em BrowseGallery1, selecione Image1 e, depois, selecione Delete. O ecrã Procurar deve apenas listar os compromissos, e não quaisquer imagens a eles associadas.

   

   Tenha em atenção que remover o controlo Image1 causa vários erros no ecrã porque as larguras e a localização do controlo Title1 referenciam o controlo Imagem. Corrija estes problemas no passo seguinte.

7. No painel Vista 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. Isto deve resolver todos os erros para o ecrã.

8. No painel Vista de árvore, em BrowseGallery1, selecione Body1. Este controlo apresenta atualmente os dados telefónicos de contacto para o cliente. Altere o valor na propriedade Texto para ThisItem.'Customer Name' (incluir as plicas).

   

   Os detalhes no nome do ecrã Procurar mostram agora o nome do cliente.

9. No painel Vista de árvore, selecione BrowseGallery1. Através da barra de fórmulas, examine a expressão na propriedade Itens. O controlo procura compromissos através da data, hora e número de contacto do compromisso. Altere esta fórmula para procurar o nome do cliente em vez do número de contacto:

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

   Tenha em atenção que os compromissos são ordenados por data e, e, seguida, por hora (os dois primeiros campos apresentados).

10. No painel Vista de árvore, elimine IconNewItem1. Só os funcionários no local podem reservar novos compromissos para engenheiros e técnicos. Tenha em atenção que esta ação resulta em erros no formulário porque a largura e a posição dos outros controlos no cabeçalho referenciam o ícone que acaba de remover.

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

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

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

14. No painel Vista de árvore, selecione BrowseScreen1 e, depois, selecione o botão de reticências (...). No menu pendente que aparece, selecione Mudar nome e altere o nome do ecrã para BrowseAppointments.

    

15. Através da mesma técnica, altere o nome do controlo BrowseGallery1 para BrowseAppointmentsGallery.

Isto completa o ecrã Procurar.

Para criar o ecrã de detalhes

Pode agora chamar a sua atenção para o ecrã Detalhes.

1. No painel Vista de árvore, desloque-se para a secção DetailsScreen1. Pode ver que os detalhes são apresentados por ordem alfabética por nomes de campo, e algumas informações úteis, como o campo Notas, não são sequer apresentadas.

   

2. No painel Vista de árvore, selecione DetailForm1. No painel direito, no separador Propriedades, selecione Editar campos junto a Campos. No painel central, selecione cada um dos seguintes campos e, em seguida, selecione Eliminar:

   • Data do Compromisso
   • Hora do Compromisso
   • ID do Cliente
   • ID

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

   • Notas
   • Detalhes do Problema
   • Estado

   

4. Arraste cada campo para ser apresentado na seguinte ordem, de cima para baixo:

   • Nome do Cliente
   • Endereço do Cliente
   • Número de Contacto
   • Detalhes do Problema
   • Estado
   • Notas
   • Imagem

5. No painel Vista de árvore, selecione Notes_DataCard1. Altere a propriedade Altura para 320.

   

6. No painel Vista de árvore, elimine 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. Através da técnica descrita anteriormente, altere o nome de DetailsScreen1 para AppointmentDetails.

Para editar o ecrã Editar

O último ecrã para onde olhar, por enquanto, é o ecrã Editar.

1. No painel Vista de árvore, selecione EditScreen1.

2. No painel Vista de árvore, na secção EditScreen1, selecione EditForm1. No painel direito, no separador Propriedades, selecione Editar campos junto a Campos.

3. Remover os seguintes campos:

   • Endereço do Cliente
   • ID
   • ID do Cliente
   • Data do Compromisso
   • Hora do Compromisso

4. Adicionar os seguintes campos:

   • Detalhes do Problema
   • Estado
   • Notas

5. Arraste cada campo para ser apresentado na seguinte ordem, de cima para baixo:

   • Nome do Contacto
   • Número de cliente
   • Detalhes do Problema
   • Estado
   • Notas
   • Imagem

6. Selecione o campo Nome do Cliente e expanda-o para ver as respetivas propriedades. Altere o Tipo de controlo para Ver texto. Esta alteração transformar o controlo em só de leitura; é útil ver o nome do cliente no ecrã Editar, mas um engenheiro não deve ser capaz de alterá-lo.

   

7. Selecione o campo Número de Contacto e expanda-o para ver as respetivas propriedades. Altere o Tipo de controlo para Ver texto. Este campo também deve ser só de leitura.

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

9. Selecione o campo Estado, expanda-o e altere o Tipo de controlo para Valores Permitidos.

10. No painel Vista de árvore, selecione Status_DataCard5. No painel direito, no separador Propriedades, selecione Desbloquear para alterar propriedades. Desloque-se para baixo para a propriedade AllowedValues e altere o texto para ["Fixed", "Parts Ordered", "Unresolved"] (incluir os parêntesis retos). O engenheiro no terreno só pode definir o Estado como um destes valores definidos.

    

11. No painel Vista de árvore, mude o nome de EditScreen1 para EditAppointment.

Pode agora guardar e testar a aplicação.

1. Selecione Ficheiro > Guardar como.

2. Em Guardar como, selecione A cloud, introduza o nome VanArsdelAppointments e, em seguida, selecione Guardar.

3. Selecione a seta para trás na barra de ferramentas do Power Apps Studio para voltar ao ecrã Home page.

4. Selecione F5 para pré-visualizar a aplicação. Na página Compromissos, selecione o ícone > junto a qualquer compromisso. Deve aparecer o ecrã Detalhes para o compromisso. No cabeçalho, selecione Editar para atualizar o compromisso. Verifique o seguinte:

   • Os campos de nome do cliente e número de contacto são só de leitura.
   • O campo de estado está limitado aos valores na lista pendente.
   • Pode introduzir notas que abrangem várias linhas.
   • Pode carregar um ficheiro de imagem para o campo de imagem.

   Nota

   Uma melhoria que irá adicionar mais tarde permitir-lhe-á tirar uma fotografia com o telemóvel a partir da aplicação e adicioná-la ao campo de imagem.

   

Combinar os ecrãs numa única aplicação

Maria criou duas aplicações, mas quer combiná-las numa única aplicação. Para isso, a Maria copia os ecrãs da aplicação de compromissos para a aplicação de base de dados de conhecimento e gestão do inventário no terreno, da seguinte forma:

1. Abra uma nova janela do browser e inicie sessão no Power Apps Studio com os detalhes da sua conta.

2. No painel esquerdo, selecione Aplicações, selecione VanArdselApp e, em seguida, selecione Editar.

   

3. Na barra de ferramentas, selecione Novo ecrã e, em seguida, selecione Em branco. Esta ação irá adicionar um novo ecrã à aplicação na qual irá copiar os controlos para o ecrã Procurar para a aplicação VanArsdelAppointments.

   

4. O nome do novo ecrã será mudado para Screen2. No painel Vista de árvore, mude o respetivo nome para BrowseAppointments.

5. Repita o passo anterior mais duas vezes para adicionar mais dois ecrãs em branco (Screen3 e Screen4).

6. Mude o nome do Screen3 para AppointmentDetails e mude o nome do rename Screen4 para EditAppointment.

7. Na barra de ferramentas esquerda do Power Apps Studio, selecione o ícone Dados. No painel Dados, selecione Adicionar dados. Na lista pendente Selecionar uma origem de dados, no campo Procurar, introduza OneDrive e selecione OneDrive para Empresas.

   

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

9. Mude para a janela do browser que mostra a aplicação VanArsdelAppointments.

10. Na barra de ferramentas, selecione Tema (poderá ter de expandir a barra de ferramentas para apresentar mais itens) e, em seguida, selecione o tema Floresta. Este é o mesmo tema usado pela aplicação VanArsdel.

11. Na barra de ferramentas esquerda, selecione o ícone de Vista de árvore, selecione o ecrã BrowseAppointments e selecione Ctrl+A. Esta ação seleciona todos os controlos no ecrã.

12. Selecione Ctrl+C para copiar estes controlos para a área de transferência.

13. Regresse à janela do browser que mostra a aplicação VanArsdelApp.

14. Na barra de ferramentas esquerda, selecione o ícone de Vista de árvore e, depois, selecione o ecrã BrowseAppointments.

15. Selecione Ctrl+V para colar os controlos no ecrã.

    Nota

    Por vezes, o cabeçalho do ecrã aparece demasiado baixo. Para corrigir este problema, selecione os controlos IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1 e RectQuickActionBar1_1 no painel Vista de árvore (mantenha premida a tecla Shift enquanto clica para selecionar mais de um controlo de cada vez) e, em seguida, utilize o rato ou as teclas de seta para movê-los para cima no painel de vista de estrutura.

16. Regresse à janela do browser que mostra a aplicação VanArsdelAppointments e, em seguida, selecione e copie os controlos no ecrã AppointmentDetails para a área de transferência (Ctrl+A seguido por Ctrl+C).

17. Regresse à janela do browser que mostra a aplicação VanArsdelApp, selecione o ecrã AppointmentDetails e cole os controlos (Ctrl+V). Ajuste a posição dos controlos no cabeçalho do ecrã, se for necessário.

    Nota

    Verá um erro reportado no cabeçalho do ecrã AppointmentDetails. Este erro ocorre porque o ecrã referencia controlos no ecrã EditAppointment, que ainda não foi copiado. Os próximos passos devem resolver este erro.

18. Regresse à janela do browser que mostra a aplicação VanArsdelAppointments e, em seguida, selecione e copie os controlos no ecrã EditAppointment para a área de transferência.

19. Regresse à janela do browser que mostra a aplicação VanArsdelApp, selecione o ecrã EditAppointment e cole os controlos. Uma vez mais, mova os controlos no cabeçalho do ecrã, se for necessário.

20. No painel Vista de árvore, selecione o ecrã AppointmentDetails e verifique se o erro indicado anteriormente já desapareceu.

21. No painel Vista de árvore, selecione o ecrã BrowseScreen1. Mude o nome deste ecrã para BrowseParts.

22. Mude o nome do ecrã DetailsScreen1 para PartDetails.

23. Mude o nome do ecrã Screen1 para Knowledgebase.

    Nota

    É uma boa prática mudar o nome dos ecrãs para refletirem a sua função, em vez de utilizar os nomes predefinidos gerados pelo Power Apps Studio, sobretudo se uma aplicação contiver vários ecrãs. Isto pode ajudar a evitar confusão mais tarde se a aplicação for modificada por outro programador.

Adicionar um ecrã Home page à aplicação

A fase final consiste em adicionar um ecrã Home page à aplicação. O ecrã Home page permitirá ao engenheiro mover-se entre as diferentes pelas da aplicação (gestão de inventário, base de dados de conhecimento e compromissos).

1. Na aplicação VanArsdelApp na barra de ferramentas, selecione Novo ecrã e, em seguida, selecione Em branco.

2. No painel Vista de árvore, mude o nome de Screen2 para Home page.

3. Na barra de ferramentas, selecione Inserir. Na lista de controlos, expanda Suporte de dados e, em seguida, selecione Imagem. O controlo será adicionado ao ecrã.

   

4. Defina a posição X do controlo 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.

   

5. No separador Propriedades, na lista pendente Imagem, selecione + Adicionar um ficheiro de imagem e, em seguida, carregue a imagem VanArsdelLogo.png para o controlo.

   Nota

   O ficheiro de imagem está disponível na pasta Ativos no repositório do Git para este guia.

   

6. A partir da lista de controlos, adicione quatro controlos Etiqueta de texto à forma e posicione-os para que serem empilhados sob o logótipo da VanArsdel.

   

7. Selecione o controlo Etiqueta de texto mais alto. No painel direito, no separador Propriedades, defina a propriedade Texto como Compromisso Seguinte. Defina o Tamanho do Tipo de Letra como 30 e utilize o selecionador de cores para definir a cor do tipo de letra como verde (para combinar com o logótipo).

   

8. Selecione o segundo controlo Etiqueta de texto. Altere o valor da propriedade Texto para First(Appointments).'Customer Name' (incluir as aspas). Esta fórmula obtém o nome do cliente da primeira fila da tabela de compromissos.

   

   Nota

   Atualmente, esta fórmula funciona apenas como marcador de posição. Irá modificar a etiqueta mais tarde para obter o compromisso seguinte para o engenheiro, em vez de apresentar sempre o primeiro.

9. Selecione o terceiro controlo Etiqueta de texto e defina a propriedade Text como First(Appointments).'Appointment Date'.

10. Defina a propriedade Text do quatro controlo label como First(Appointments).'Appointment Time'. Defina a propriedade Tamanho do tipo de letra como 30.

11. A partir da lista de controlos, adicione um controlo Retângulo. Defina as propriedades seguintes para este controlo:

    • Modo de apresentação: Ver
    • X: 0
    • Y: 632
    • Largura: 635
    • Altura: 1

    Este controlo funciona como um separador visual no meio do ecrã.

12. Adicione três controlos Botão ao ecrã, dispostos verticalmente e espaçados uniformemente sob o separador. Defina a propriedade Texto para o botão superior para Compromissos, a propriedade Texto para o botão do meio para Peças e a propriedade Texto para o botão inferior para Base de dados de conhecimento.

    

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 apresentação para o ecrã de compromissos quando o utilizador seleciona o botão.

    

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

15. Defina a ação OnSelect para o botão Base de dados de conhecimento para Navigate(Knowledgebase, ScreenTransition.Fade).

Além de navegar do ecrã Home page para os outros ecrãs no sistema, os ecrãs Compromissos, Peças e Base de dados de conhecimento precisam de uma forma que permita ao utilizador regressar ao ecrã Home page. Maria decide adicionar botões para regressar a estes ecrãs.

1. No painel Vista de árvore, selecione o ecrã BrowseParts.

2. Selecione o controlo RectQuickActionBar1 para lhe dar foco.

3. Selecione o menu Inserir e selecione Adicionar ícone. Mova o ícone para a esquerda do controlo RectQuickActionBar1. Note que o ícone irá obscurecer parte da etiqueta Procurar Peças.

   

4. No menu Vista de árvore, altere o nome do novo controlo de ícone para IconReturn1.

5. Alterar a fórmula para a ação OnSelect para a expressão Back(ScreenTransition.Fade). A função Anterior faz o utilizador navegar para o ecrã anterior que visitou.

6. No separador Propriedades, altere a propriedade Ícone para < Esquerda.

7. No cabeçalho do ecrã, selecione a etiqueta Procurar Peças. Altere a propriedade X para IconReturn1.Width + 20. A etiqueta Procurar Peças já não deve estar parcialmente obscura.

   

8. Após o processo descrito nos passos 16 a 22, adicione um ícone chamado IconReturn2 ao controlo RectQuickActionBar3 no ecrã Knowledgebase.

9. Da mesma forma, adicione um ícone denominado IconReturn3 ao controlo RectQuickActionBar1_1 no ecrã BrowseAppointments.

10. No painel Vista de árvore, selecione o objeto Aplicação. Altere a propriedade StartScreen para a expressão Home page. Isto garante que o ecrã Home page é apresentado sempre que a aplicação é iniciada:

    

    Nota

    Se não especificar o ecrã a apresentar quando a aplicação é iniciada, será utilizado o ecrã que aparece no início do painel Vista de árvore. Para mover um ecrã para o início da lista, clique com o botão direito do rato no painel Vista de árvore e selecione Mover para cima até estar no início.

Finalmente, pode testar a aplicação.

1. Selecione Ficheiro > Guardar. Na caixa Notas de versão, introduza Versão completa com o ecrã Home page e selecione Guardar.

2. Selecione a seta para trás para voltar ao ecrã Home page e selecione F5 para executar a aplicação.

3. Verifique se o ecrã Home page para a aplicação é apresentado.

4. Selecione Compromissos. Deve aparecer o ecrã de compromissos.

5. Selecione a seta para trás para voltar ao ecrã Home page.

6. Selecione Peças. Deve aparecer o explorador de peças.

7. Selecione a seta para trás para voltar ao ecrã Home page.

8. Selecione Base de dados de conhecimento. Deve aparecer o ecrã de consulta da base de dados de conhecimento.

9. Selecione a seta para trás para voltar ao ecrã Home page.

10. Feche a janela de pré-visualização e regresse ao Power Apps Studio.

A aplicação protótipo está agora concluída.

Anterior Seguinte