SOLVED

Conditional icon

Iron Contributor

I need my PowerApps icon control to display either a red cross or a green check depending on a condition. How can I achieve this in PowerApps? The icon control forces me to pick a specific icon.

4 Replies
You have to use 2 icons. Stacked. And opposite visibility. I prefer using local variables to set it to and set that variable with an onclick event or onchange etc.

So use updatecontext({saveicon:false}) on your screen visable property.
Then onclick or onselect of the value your wanting to determine the icon state you use an if statement to set it. So If(yourvalue > 50,updatecontext({saveicon:true}),updatecontext({saveicon:false}))

Set your visible properties of one icon to saveicon variable and the other to !saveicon which takes the opposite of it.

When your action happens the variable is set to true or false. Which shows the icon when true for one and false shows for the other.
You could technically do it with if statements on each visible property too but I like the variable method because you can use it for other controls quickly and easily.

But if that’s all you use it for to use if on the visable you would do the same formula but opposite. So if you need to check value of a drop down would be something like this is green Check icon visable property.
If(dropdown.selected.value = x,true,false)

Then on red icon
If(dropdown.selected.value = x,false,true)

This should accomplish same thing.
best response confirmed by Christophe Humbert (Iron Contributor)
Solution

The icon property of the icon control displays as a drop-down when we look at the standard properties, but I found out that if I switch to advanced properties it allows me to enter a function.

 

In my case I was able to use a switch statement:

Switch(ThisItem.Status.Value,"Success",Check,"Fail",Cancel)

 

where Check and Cancel are the icon names.

 

@ChrisWebbTech 's method would work too, but requires two controls for each icon (I have a bunch of them on my dashboard).

 

It seems that another method would have been to use html/JavaScript to insert graphics in a html control. I found some documentation but didn't test it.

Hey thanks for coming back with that response. Learned something new with that :).
1 best response

Accepted Solutions
best response confirmed by Christophe Humbert (Iron Contributor)
Solution

The icon property of the icon control displays as a drop-down when we look at the standard properties, but I found out that if I switch to advanced properties it allows me to enter a function.

 

In my case I was able to use a switch statement:

Switch(ThisItem.Status.Value,"Success",Check,"Fail",Cancel)

 

where Check and Cancel are the icon names.

 

@ChrisWebbTech 's method would work too, but requires two controls for each icon (I have a bunch of them on my dashboard).

 

It seems that another method would have been to use html/JavaScript to insert graphics in a html control. I found some documentation but didn't test it.

View solution in original post