Answered

How to Toggle the color of an icon based on a column value.

(0) Share

Report

Posted on by Community Power Pla... Microsoft Employee

Hello fellow Power Appers,

I am having trouble toggling the color of an icon based on a "true/false" text value in a data column.

My Sharepoint list, 'Progress Note Data' contains a text Column 'IsApproved' "true/false" (as string). I would like to read the value and set the color of an icon based on that value.

If the icon is clicked(OnSelect) I would like the color to toggle between Green and Red.

The icon is in a gallery, ideally I would like to reference the ID of the icon(s) in the gallery, or use ThisItem.ID? I have tried for several hours to make this work but I must be missing some key detail.

Any help given would be appreciated.

Thank you.

Categories:

Building Power Apps

All responses (5)

Answers (1)

Sort by

CNT 10,921 Super User 2024 Season 1 on at

Like
a
(0)

Report
Copy link

Link copied!

@Anonymous Is the data source for the gallery where the icon is 'Progress Note Data'?
You have mentioned 2 thing,
1. I would like to read the value and set the color of an icon based on that value.
2. If the icon is clicked(OnSelect) I would like the color to toggle between Green and Red.
So you want the color based on the value in 'IsApproved' or it has to change on click? Kindly clarify.
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

Hi CNT,

Yes, the gallery data source is 'Progress Note Data'.

To clarify the second point.. Ideally the OnSelect event would cause the 'IsApproved' value to toggle between "true/false" for that specific row.. which would toggle the color of the icon.

Thank you again for the help!
Verified answer

CNT 10,921 Super User 2024 Season 1 on at

Like
a
(1)

Report
Copy link

Link copied!
@Anonymous Set the Fill Property of the icon to,
If(ThisItem. 'IsApproved'="true", Green, Red)
This will change the colour of the icon to Green/Red when 'IsApproved' is "true"/"false"
Hope this helps!

Please remember to give a 👍 and accept the solution as it will help others in the future.
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

Hi CNT,

I did use your code, additionally I used:

If(ThisItem.Approved = "true", Patch('Progress Data List', ThisItem, {Approved: "false"}), Patch('Progress Data List', ThisItem,{Approved: "true"}));

I am sure there are better ways to write this code, but it does manage to toggle the table column text value which is what I was after.

Thank you very much for your help.
CNT 10,921 Super User 2024 Season 1 on at

Like
a
(0)

Report
Copy link

Link copied!

@Anonymous Glad to help!