Office 365 PowerApps

Alterando ícones dinamicamente no PowerApps

Olá pessoal!

Hoje uma dica bem legal de um recurso lançado recentemente, vamos ver como podemos alterar o ícone de um controle Icon em nosso aplicativo do powerapps de forma dinâmica!

Antigamente, ao adicionar um controle do tipo Icon, teríamos que utilizar o recurso de esconder/mostrar para alterar a exibição de um ícone existente na página, e agora temos a possibilidade de alterar uma propriedade desse controle para dizer qual ícone queremos exibir.

Um exemplo prático seria termos um ícone para cada status de aprovação de um documento, esse é o exemplo que vamos fazer nesse post.

Abre o PowerApps e adicione um controle do tipo DropDown, usaremos esse controle para dizer para nosso aplicativo qual o status de aprovação.

Vá em Insert > Controls > DropDown;

Na barra de propriedades do controle, vá em Items e, na barra de fórmulas, vamos adicionar algumas opções, colocando a seguinte fórmula:

["Pendente", "Aprovado"]

Pronto, agora vamos adicionar um ícone, podemos escolher a opção de Document padrão para quando o ícone está pendente:

Insert > Icon > Document

Perceba que temos uma opção para trocar o ícone manualmente agora:

Para deixar nossa aplicação mais dinâmica, vamos utilizar as fórmulas para definir qual ícone será apresentado nesse controle de Icon, então selecione o controle Icon, vá na barra de propriedades e procure pela propriedade Icon:

Vamos digitar uma fórmula nesse campo agora para que dinamicamente seja alterado qual o ícone a ser exibido.

Na barra de fórmulas, digite:

If(Dropdown1.Selected.Value = "Pendente", Icon.Document, Icon.DockCheckProperties)

Basiscamente essa fórmula está validando se o valor selecionado do Dropdown for igual a Pendente, usa o Icon.Document (que é o ícone do Documento em branco), do contrário, usa o Icon.DockCheckProperties (que é o ícone do documento com um checkmark no meio)

Assim, podemos ter diferentes ícones para cada ação do nosso aplicativo. O resultado deve ficar assim:

Espero que tenha ajudado e até a próxima!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

Este site utiliza o Akismet para reduzir spam. Saiba como seus dados em comentários são processados.

%d blogueiros gostam disto: