Tela de detalhes e tela de formulário do MS Power Apps

Neste tutorial, vamos falar sobre como criar a tela de detalhes e a tela de formulário no Power Apps do zero.

Como o Power Apps foi criado para facilitar o uso, ele vem prontamente com modelos que possuem telas, galerias e outros elementos básicos existentes. No entanto, haverá momentos em que você precisará criar seu próprio aplicativo do zero, sabendo que pode ter objetivos exclusivos ao criá-lo.

É por isso que é importante entender os blocos de construção que compõem um aplicativo. A tela é uma delas.

Índice

• Criando a tela de detalhes no MS Power Apps
• Vinculando a galeria à tela de detalhes
• Navegando entre a galeria e a tela de detalhes
• Criando a tela Editar formulário
• Tornando o botão Enviar funcional
• Navegação entre a tela de edição e a tela de detalhes
• Criando uma nova tela de formulário no MS Power Apps
• Alternando entre o novo formulário e o formulário de edição no MS Power Apps
• Usando a função Voltar
• Conclusão

Criando a tela de detalhes no MS Power Apps

Uma tela de detalhes contém todas as informações que acompanham cada registro de sua fonte de dados.

No exemplo abaixo, você verá uma galeria exibindo diferentes registros. A galeria contém apenas uma visualização desse registro. Nesse caso, você verá o nome, o sobrenome, a localização e o nível VIP se olhar a entrada de Viki Darling.

Mas esta entrada vem com muitos outros detalhes. Se olharmos para a fonte de dados, veremos que também há um número de cliente, data de ingresso, número do passaporte e nome do agente.

É para isso que serve a tela de detalhes. É uma tela que os usuários acessarão no momento em que clicarem em qualquer ponto de entrada na galeria. É aqui que verão todos os outros detalhes que não estão visíveis na galeria.

Para começar a criar a tela de detalhes, vamos voltar para a MasterScreen e duplicá-la.

Partir de uma tela mestre foi algo que discutimos em um tutorial sobre como criar um aplicativo do zero. Ter uma tela mestre que contém os elementos básicos do seu aplicativo facilita manter todas as suas telas uniformes em termos de aparência e layout.

Vamos renomear a tela duplicada como DetailScreen.

Vamos também alterar a etiqueta na parte superior e escrever os Detalhes do cliente.

Embora estejamos criando essa tela do zero, não há necessidade de adicionar manualmente todos os detalhes. O Power Apps automatizou todo esse processo para nós.

Começaremos adicionando um formulário de exibição, o que pode ser feito na faixa de opções Inserir.

Como esta tela realmente não terá outra utilidade além de exibir os dados do cliente, podemos deixar que o formulário preencha toda a tela arrastando os cantos.

A tela de detalhes precisa de uma fonte de dados. Podemos vincular uma fonte de dados aqui no painel direito em Propriedades. Para este aplicativo, estamos usando Table1.

Agora que temos uma fonte de dados de onde extraímos os detalhes, é hora de decidir quais detalhes queremos mostrar na tela. Isso pode ser feito clicando em Editar campos.

Podemos adicionar campos marcando todos os campos que consideramos aplicáveis ​​ao nosso propósito. Nesse caso, vamos adicionar todos esses campos.

O Power Apps carregará todos os campos que escolhemos no formulário que acabamos de criar, que é FormViewer1.

Se clicarmos nele, mostra que configurou automaticamente os cartões de dados para cada uma das diferentes colunas da nossa fonte de dados.

E para cada cartão de dados, ele realmente configurou uma chave, que contém o nome do cartão de dados.

Ele também configurou um valor, que mostrará o valor real associado a essa coluna.

No momento, este formulário ainda não exibe nenhum valor. Isso porque ainda não vinculamos nossa galeria à DetailScreen. Novamente, o objetivo aqui é que os detalhes sejam exibidos somente após um registro ter sido escolhido em nossa galeria.

Vinculando a galeria à tela de detalhes

O melhor das galerias no Power Apps é que elas possuem uma propriedade chamada Selected. Ele basicamente vincula a galeria à tela de detalhes para que toda vez que selecionarmos um registro na galeria, ela mostre apenas os detalhes dessa entrada específica.

Para fazer isso, vamos destacar FormViewer1 e ir para a propriedade Item.

Certifique-se de estar referenciando a galeria correta aqui, especialmente se seu aplicativo usar várias galerias. Neste caso, queremos usar Gallery2.

Voltando à barra de fórmulas da tela de detalhes, digitaremos Gallery2.Selected e pressionaremos Enter.

Agora, estamos vendo detalhes aqui provenientes do que foi selecionado por último na galeria.

Vamos voltar para a tela Visualizar clientes e escolher Viki Darling em nossa galeria.

Depois de clicar nele, você verá que os detalhes na tela de detalhes também foram alterados e agora estão exibindo informações para o Viki Darling.

Isso enfatiza a relação entre essas telas e os elementos nela. Os campos da tela de detalhes são orientados pela propriedade do item no visualizador de formulários, que, por sua vez, é orientado pelo registro selecionado na galeria.

Navegando entre a galeria e a tela de detalhes

No momento, só podemos ver os detalhes se escolhermos uma entrada na galeria e passarmos manualmente para a tela de detalhes. Idealmente, os usuários devem ser direcionados automaticamente para a tela de detalhes no momento em que clicam em uma entrada. Então, vamos adicionar alguma navegação entre as telas.

Vamos começar com a navegação desde a tela de detalhes voltando para a galeria. Adicionaremos uma seta para a esquerda no botão Ícones na faixa de opções Inserir.

Vamos mudar a cor para branco para garantir que ela corresponda aos outros elementos na tela.

Com o ícone destacado, vamos usar a função Navegar e referenciar a tela onde queremos que o ícone fique. Neste caso, é o ViewCustomersScreen.

Para torná-lo mais atraente visualmente conforme passamos de uma tela para outra, vamos usar a transição Fade.

Em seguida, pressionamos Enter para bloquear essa fórmula. Depois de fazer isso, tudo o que precisamos fazer é clicar no ícone.

Isso nos levará à tela Exibir clientes.

Desta vez, vamos da tela Visualizar Clientes para a tela de detalhes.

Desta vez, estamos lidando com registros diferentes dentro da galeria. Mas isso não significa que temos que criar uma ação diferente para cada item. Só precisamos destacar a galeria e escolher OnSelect no menu suspenso de propriedades.

Usaremos a função Navigate novamente e referenciaremos o DetailScreen. Usaremos a mesma transição que usamos antes. Em seguida, pressione Enter para bloquear essa fórmula.

Agora que definimos a fórmula, vamos clicar no registro de Megan Rohman.

Agora, nos leva direto para a tela de detalhes com os detalhes de Megan Rohman preenchidos automaticamente na tela.

E como configuramos a navegação da tela de detalhes para a tela de visualização de clientes, um simples clique no ícone de seta o levará de volta à galeria.

Criando a tela Editar formulário

Embora nossa fonte de dados forneça todas as informações para nós, há momentos em que precisamos atualizar as informações do cliente. Isso significa que também precisaremos de uma tela de edição de formulário.

Então, vamos criar outra duplicata da tela mestre e renomeá-la para EditScreen.

Vamos usar a mesma tela para adicionar novos clientes também, então vamos mudar o rótulo para Novos/Editar clientes.

Para esta tela, vamos inserir um formulário de edição.

Assim como o formulário de exibição que adicionamos anteriormente, ainda precisamos adicionar uma fonte de dados. Vamos escolher Table1 novamente.

Adicionar um campo dependerá dos dados que você possui e do usuário final que você tem em mente. Por exemplo, o número do passaporte de um cliente não mudará realmente. Então você pode querer deixar isso fora do formulário.

Por enquanto, vamos adicionar tudo. Desta vez, você verá que há espaços abaixo de cada campo.

Esses espaços também podem ser editados. Por exemplo, em DateJoined, não precisaremos realmente do tempo. Precisamos apenas da data.

Você também notará que os campos não têm espaços. Isso é uma coisa que podemos mudar também. Podemos dizer First Name em vez de FirstName.

We’ll deal with those changes later. For now, we need to make sure that the details of the customer we choose from the View Customers screen show up in this edit form screen.

With Form2 highlighted, let’s go to the Items property and equate that with Gallery2.Selected.

Now, it shows the details of one of our customers on the form.

Once we start editing, we’re going to need a button to click to submit the changes. So let’s add a button through the Insert ribbon.

Label the button and write Submit.

Forms have three modes — edit, new and view. At the moment, this form is in edit mode. This means we’re able to go to any of these fields and change the entries.

In contrast to this, the detail screen is technically a display gallery. That’s why if you look at the properties on the right pane, it does’t give us the option to edit even if this is also a form.

The display form is similar to how this edit screen will work if it’s in view mode. It locks in all the items so that none of them can be edited.

That’s why if we need to change any of the entries in our gallery, we need our form to be in edit mode. We’ll also need the submit button at the bottom to be functional so that it actually submits the form and updates the underlying records.

Making The Submit Button Functional

To lock in an action each time we click on the submit button, we need to go to the OnSelect property and write SubmitForm on the formula bar.

SubmitForm is a function that aggregates all the updates in the form and submits those changes. It also takes the actual form that we want to submit, which in this case is Form2.

Vamos ver o que acontece agora que a fórmula foi bloqueada. No momento, a localização de Coy Newell está aparecendo como Estados Unidos.

Vamos alterá-lo para o Canadá e clicar em enviar.

Agora, quando voltamos para a tela de detalhes, ela mostra o Canadá como o local.

Vamos voltar para a tela de edição e desta vez, vamos mudar o sobrenome. Então, em vez de Newell, vamos mudar isso para Smith e clicar em enviar.

Novamente, se formos para a tela de detalhes, veremos que as alterações também foram feitas aqui.

Se formos para a tela de visualização do cliente, também mostra que Coy Newell agora é Coy Smith, e o local agora é Canadá em vez de Estados Unidos.

Isso mostra que enquanto trabalhamos, as coisas vão se atualizando em segundo plano e vão mudando os dados em todas as telas vinculadas ao que estamos trabalhando no momento. Isso torna muito mais fácil alterar qualquer informação que temos.

Navegação entre a tela de edição e a tela de detalhes

Agora que temos uma tela de edição, queremos ter os meios para acessar essa página vindo da tela de detalhes. Então, vamos adicionar o ícone de edição.

Novamente, vamos mudar a cor para que fique uniforme com todos os outros elementos.

Com o ícone destacado, vamos escolher a propriedade OnSelect, usar a função Navigate e referenciar a tela onde queremos que este ícone conduza, que é a tela de edição. Não vamos adicionar uma transição de tela desta vez.

Agora, também queremos poder voltar para a tela de detalhes assim que terminarmos de enviar as alterações que fizemos aqui na tela de edição. Então, vamos adicionar o ícone de volta e usar a mesma fórmula, mas desta vez, voltando para a DetailScreen.

Com a navegação adicional, será mais fácil para os usuários finais ir de uma tela para outra assim que nosso aplicativo for publicado.

Criando uma nova tela de formulário no MS Power Apps

Agora que temos a tela de edição do formulário, também devemos permitir que os usuários adicionem registros que ainda não existem na galeria. Desta vez, não vamos adicionar um novo formulário. Em vez disso, vamos usar o existente, já que rotulamos a última tela Novo/Editar clientes.

Mencionamos anteriormente que os formulários no Power Apps permitem que você não apenas entre no modo de edição e exibição, mas também no novo modo.

Basicamente, entrar no novo modo significa que todas as caixas de texto estão vazias. Se escrevermos qualquer coisa nas caixas e clicarmos em enviar, ele adicionará o registro em vez de editar uma entrada existente.

Então, o que precisamos fazer é mudar o modo deste formulário de editar para novo e depois de novo para editar dependendo da necessidade.

Vamos começar pela tela inicial, que criamos em um tutorial anterior sobre como criar telas mestras . Como você pode ver, já temos um botão aqui para adicionar novos clientes.

No momento, este botão ainda não leva a nenhuma tela. Então, vamos destacar o botão, ir para OnSelect e usar a função Navigate para levá-lo ao EditScreen.

Agora, vamos para a tela de edição sempre que clicarmos nesse botão na página inicial.

O problema é que esta tela ainda contém todos os detalhes que estávamos editando antes. Como estamos adicionando um novo cliente, preferimos ter uma tela em branco.

Então, vamos voltar para a tela inicial para adicionar outra função chamada NewForm. NewForm coloca o formulário em um novo modo antes de chegarmos a ele.

Esta função precisa do formulário real que queremos mudar para o novo modo, então estamos referenciando o Form2.

Observe que usamos um ponto e vírgula entre as duas funções. Basicamente, um ponto e vírgula determina a ordem de execução dessas funções. Ele executa a função NewForm primeiro e, uma vez feito isso, é a única vez que executa a função Navigate.

Agora que corrigimos a fórmula, clicar no botão Adicionar novo cliente nos levará a um formulário em branco.

Alternando entre o novo formulário e o formulário de edição no MS Power Apps

Vamos voltar para nossa galeria e clicar no registro para Viki Darling.

Digamos que queremos editar alguns dos campos aqui. Então, vamos clicar no ícone de edição.

O problema é que estamos chegando a um novo formulário e não a um formulário de edição. Isso porque deixamos isso de forma nova quando criamos a navegação para o botão Adicionar Novo Cliente.

Portanto, desta vez, queremos que o ícone de edição mude o formulário para o modo de edição antes de chegarmos a essa tela. Para que isso aconteça, vamos usar a mesma fórmula que usamos para o novo formulário, mas vamos usar a função EditForm.

A função EditForm altera o formulário que está sendo referenciado de seu modo atual para o modo de edição. Assim que tivermos isso definido, sempre que clicarmos no ícone de edição na tela de detalhes, iremos para a tela de edição no modo de edição.

Isso também significa que, quando enviarmos o botão Enviar, ele atualizará o registro existente em vez de adicionar uma nova entrada.

Usando a função Voltar

Agora que temos os formulários de que precisamos, vamos verificar novamente nossa navegação para garantir que nossos usuários finais cheguem às telas certas.

Digamos que estamos na tela inicial e decidimos adicionar um novo cliente. Clicamos no botão que nos leva a um formulário em branco. Mas então mudamos de ideia e clicamos no botão Voltar.

Mas quando fazemos isso, não nos leva de volta à tela inicial. Em vez disso, nos leva à tela de detalhes.

Para descobrir o que aconteceu, vamos ao ícone de trás e observamos a ação anexada a ele. Acontece que definimos o botão Voltar para navegar para a tela de detalhes por padrão.

O que queremos que aconteça aqui é que aterrissemos na tela anterior em que estávamos antes de aterrissar aqui. Isso significa que, em vez de usar a função Navegar e referenciar uma tela específica, precisamos alternar para a função Voltar.

Esta função não exige que façamos referência a nenhuma tela. Seu comportamento muda dependendo da tela de onde viemos. Isso significa que, quer tenhamos vindo da tela inicial ou da tela de detalhes, clicar na função voltar agora nos levará à última tela que visitamos.

Introdução ao Power Apps: Definição, recursos, funções e importância
Ambientes do Power Apps: Configurando os elementos do aplicativo corretamente
Funções e fórmulas do PowerApps | Uma introdução

Conclusão

Com as telas de detalhamento, edição e novas telas de formulário instaladas, nosso aplicativo está lentamente tomando forma e está quase pronto para ser publicado. Essa é a grande vantagem do Power Apps. Quer optemos por começar com um modelo ou criar um aplicativo do zero, tudo é simples e fácil de criar.

Também vimos como é importante garantir que a navegação entre as páginas funcione bem. Isso desempenha um papel vital para garantir que nosso aplicativo seja intuitivo o suficiente para os usuários finais assim que for lançado.

Tudo de bom,

henrique