Power-apps: como criar um popup de confirmação antes de deletar um registro?

 

Hoje você vai aprender como fazer um pop up dentro do power apps!

Para quem não sabe o que é um pop-up, basicamente é uma janela que pula na frente da telapedindo para o usuário ver um dado ou confirmar alguma coisa, geralmente com sim ou não.

Pop-up de confirmação

E por que esse pop-up é tão útil?

Um bom exemplo para explicar a utilidade desse pop-up seria uma confirmação para deletar algum dado.

Nesse registro exemplificado aqui embaixo, existe a função de deletar mas logo depois do usuário clicar em deletar, o app não dá uma segunda chance para ele decidir se quer deletar ou não.

Esse é um exemplo que mostra o quanto esses pop-ups são úteis nessas situações.

Nesse artigo você vai aprender como criar esse pop-up de confirmação, para evitar que um dado seja deletado de forma errada.

Primeiramente vamos ao básico, e veremos como esses pop-ups são construídos.

Como criar um pop-up do zero?

Vá para uma tela em branco.

Depois da tela em branco ter sido criada, o próximo passo é criar botões de sim e não

Em seguida, crie uma Label com o texto perguntando: você realmente deseja apagar esse registro?

Dentro do pop-up basicamente terão esses 3 elementos.

Agora, vamos fazer a opção de mostrar e esconder o pop-up.

Para isso você deve selecionar todos os elementos e agrupá-los para ficar mais fácil de os mover dentro do projeto.

Faça isso selecionando todos os elementos, clicando com o botão direito e selecionando a função agrupar.

Em seguida, pressionando novamente o botão direito acima dos itens selecionados e agora agrupados, é preciso colocá-los dentro de um Container.

Adicionar esses elementos dentro de um Container é mais fácil e mais ágil para conseguir movê-los.

Agora vamos adicionar aquele x, que tem a função de fechar o pop-up.

Para isso você seleciona o Container, vai até a opção inserir ícones, e escolhe o ícone de “cancelar”.

Em seguida, insira o x bem no cantinho do Container.

Logo após colocar o x, selecione o Container e redimensione o seu tamanho para que ocupe todas as dimensões da tela.

Isso vai permitir com que o pop-up fique à frente da tela, mas o usuário consiga saber o que está por trás da tela.

Em seguida, insira mais um elemento, que é o quadrado.

Clique sobre o quadrado com o botão direito, e o envie para trás dos outros elementos.

Troque a cor do quadrado para uma tonalidade mais clara, e em seguida altere o seu modo de exibição para: desabilitado.

Depois de trocar as cores, centralize os botões e coloque bordas nesse quadrado.

Nesse caso a janelinha do pop-up já está pronta e dentro do Container.

Agora o próximo passo é fazer esse pop-up aparecer e desaparecer quando o botão for clicado.

Como isso é feito?

O que você precisa fazer é colocar uma variável, que vai ser responsável por fazer esse Container aparecer e desaparecer.

 

Como adicionar o pop-up a tela do aplicativo?

Selecione todo o Container para que você possa movê-lo para a outra tela onde o pop-up será mostrado.

Assim que você estiver na tela onde existe o dado que deseja ser excluído, e o pop-up precisa aparecer, cole o Container.

Como ele já está selecionado é só apertar CTRL V.

Logo em seguida o contêiner com o pop-up vai aparecer na frente de todos os elementos, porém, sem aquele efeito de esconder a tela de trás.

 

Como colocar o fundo transparente no pop-up?

Para adicionar esse efeito é preciso alterar o preenchimento do Container, e escolher a cor do Container em si, de toda a tela de fundo do Container.

É importante definir a transparência do plano de fundo do Container, entre 80 a 90% de saturação.

A parte visual do pop-up já está pronta, porém ele ainda não está configurado para fazer nada.

 

Como criar a variável UpdateContext para esconder o pop-up?

Ou seja, o botão de X não está funcionando, e também ainda não existe o botão que faça ele aparecer.

O próximo passo é criar essa variável, que vai ser colocada na parte visível do Container.

Obviamente, ao clicar no X a intenção é de que o Container seja escondido.

Então, vamos criar a variável no botão X, estando selecionada a propriedade OnSelect do ícone X.

Agora iremos colocar uma fórmula paraatribuir uma variável a esse botão e colocar o valor nela.

Quando a variável for falsa, esconder o Container do pop-up, e quando a variável for verdadeira, irá mostrar o Container do pop-up.

A forma correta de fazer isso é criando uma variável local utilizando a função “UpdateContext” essa função cria uma variável acessada apenas dentro dessa página específica.

O que evita confusões quando formos alterar outras páginas.

Dentro da variável do botão X, você vai colocar falso, ou seja eu não quero mostrar o meu Container.

Depois da variável ter sido criada,então quando um clique for dado no X, essa variável “LocMostrarPopupDeletar” vai ser salva como falsa.

Perceba que é muito importante colocar a nomenclatura da variável de uma forma que ao ser lida, o próprio nome já mostre o que a variável faz.

Isso inclusive deixa muito mais fácil uma futura manutenção feita dentro do app.

Em seguida, copie o nome da variável, no caso, “LocMostrarPopupDeletar” para ficar mais fácil.

Selecione o Container, e na parte visível, cole essa variável.

Nesse momento a variável vai esconder o pop-up, porque ela está setada como false.

Porém, iremos fazer ela virar True, e então vou Container irá aparecer.

 

Como fazer o pop-up abrir depois de clicar em deletar?

Para exemplificarmos como você pode fazer isso, eu vou colocar um botão aqui para demonstrar.

Mas depois, vamos colocar na latinha de lixo que será responsável por excluir os dados.

Crie um botão bem grande.

No On-Select dele nós vamos atualizar essa variável para true, fazer ficar verdade e o Container vai aparecer.

Então para atualizar a variável a mesma função: UpdateContext, abre parênteses, abre chaves, entra o nome da variável que é LocMostrarPopupDeletar, dois pontos,True, fecha chaves, fecha parênteses.

Isso vai fazer a variável ficar True e vai mostrar o pop-up.

Porém o botão ficou na frente, porque na árvore de objetos ele está na frente.

Então, eu preciso fazer com que o pop-up fique na frente de tudo.

Para isso é só fazer o seguinte:

Agora nesse momento o pop-up está na frente de todos os objetos.

Quando um clique for dado no X, irá setar a variável para false, e vai esconder todo o Container.

Ok, agora iremos configurar a função para deletar os dados quando o clique for dado no sim.

 

Como fazer o pop-up deletar o item depois de clicar no botão X?

Copie a fórmula para mostrar o Container, e coloque-a na latinha de lixo.

Atualmente essa lata de lixo estava removendo o item selecionado da galeria da lista de equipamentos, da lista de detalhes, mas eu não quero que isso aconteça, eu quero que ele mostre o pop-up.

Então nós vamos colar aqui a fórmula de mostrar o popup.

E a fórmula de remover, vai ser colocada lá dentro do pop-up, na opção “sim”.

Agora dentro da opção “Sim” no On-Select,você inclui a fórmula para remover os dados.

O próximo passo é trocar o “ThisItem” por uma variável local que se refere ao elemento clicável lá da galeria.

Por isso novamente será necessário criar a variável para informar qual é o item que será deletado.

Dentro da lata de lixo, vamos criar mais uma variável que é “LocItemParaDeletar”.

E aí sim vai se referir ao “ThisItem”, porque ele está dentro da galeria, e ao clicar na lata de lixo eu sei que o item que deve ser deletado é o item que eu acabei de clicar, ou seja, o "ThisItem”.

E aí esse item “LocItemParaDeletar” como ele é uma variável que é possível de acessar na página toda, ela vai estar disponível fora da galeria.

Clique na latinha de lixo e você verá, quer realmente excluir esse registro?

No botão “Sim” você vai trocar o “ThisItem”, para “LocItemParaDeletar”.

Basicamente:eu quero remover da tabela “detalhes do equipamento” o item “LocItemParaDeletar” o que foi definido ao clicar lá na latinha de lixo dentro da galeria.

 

Como esconder um pop-up depois de clicar no botão “não”?

Agora para caso a pessoa clique em “não”, isso também feche o pop-up, o que você vai fazer é pegar a mesma fórmula do botão X, e colocar a variável de mostrar o pop-up em false no OnSelect.

O próximo passo é atualizar a variável para fechar o pop-up após ter removido o item.

No idioma em inglês, é preciso colocar 1“;” (um ponto e vírgula) e no idioma em português serão 2 “;;” (dois ponto e vírgula).

Em seguida resta apenas colar a mesma fórmula que vai definir a variável como false, e vai fazer fechar o Container.

Após isso seu pop-up estará pronto, e por hoje é só.

Espero que você tenha gostado do conteúdo de hoje e espero que tenha conseguido configurar pop-up da forma correta através desse tutorial bastante detalhado.

Obrigado pela sua presença até aqui, e nos vemos no próximo tutorial!