Change color of icon when pressed

(0) Share

Report

Posted on by fiddlerx

103

Hi, been trying various examples but I cannot get it to work.

I have created a canvas app with 4 icons.

On each icon I have added a function on the 'OnSelect' record:

Navigate(MainPage) etc...

Do I add multiple stuff into this 'On'Select' record?

How can I also make it change the fill color when I press this icon? and if I press another menu icon the first shall go back to "gray" and the new pressed should be high-ligted?

Categories:

Building Power Apps

I have the same question (0)

All responses (13)

Answers (1)

Sort by

Verified answer

krystofpe 44 on at

Like
a
(1)

Report
Copy link

Link copied!

Hi,

you can achieve this by simply setting context/global variable with desired RGBA color space, which will be our value for Color/Fill attributes of your icon. So in addition to your code in OnSelect property you will have something like this:

Set(varPressedColorIcon_1, true) // UpdateContext({varPressedColorIcon_1: true})

Then in Color/Fill property for example:

If(varPressedColorIcon_1 = true, RGBA(255, 0, 0, 1), RGBA(39, 113, 194, 1))

Then in OnSelect property of different buttons you will be setting variables for already selected buttons to false.

If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

Cheers!

Was this reply helpful? Yes No
fiddlerx 103 on at

Like
a
(0)

Report
Copy link

Link copied!

hmm... not sure I follow! 😉

For the simplicity I will just grab a few screenshots...

Was this reply helpful? Yes No
krystofpe 44 on at

Like
a
(0)

Report
Copy link

Link copied!

You have a missing ";" in the OnSelect property. Fill property function is underlined red because there is no set variable with that name because of the first error in OnSelect property.

Was this reply helpful? Yes No
fiddlerx 103 on at

Like
a
(0)

Report
Copy link

Link copied!

Awesome, that seems to work.
Another question though, might not be the 'Fill' Im after just the grayed lines here and not the background? is that data entity called someting else?

And I have to do the same for all other icons on all my pages right?

Was this reply helpful? Yes No
krystofpe 44 on at

Like
a
(0)

Report
Copy link

Link copied!

I think you are looking for Color property of icon 😉 and yes you will have to make these actions on every other icon and then setting the used variables to false/true accordingly 😊.

If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

Cheers!

Was this reply helpful? Yes No
fiddlerx 103 on at

Like
a
(1)

Report
Copy link

Link copied!

thank you so much!!!

Was this reply helpful? Yes No
fiddlerx 103 on at

Like
a
(0)

Report
Copy link

Link copied!

Actually it seems that it does not work properly.
Tried this on two icons...Home and Users...

Both are showing selected at start.
When pressing Home its already the highlighted color
When pressing Users both go back to unactivated color...

Example for the home:
OnSelect:
Set(varHomeSelected, true);
UpdateContext({varHomeSelected: true});
Navigate(HomePage)

Color:
If(varHomeSelected = true, RGBA(2,120,212, 1), RGBA(149,149,149, 1))

Was this reply helpful? Yes No
krystofpe 44 on at

Like
a
(0)

Report
Copy link

Link copied!

Use only one type of variable...in your OnSelect property you are declaring varHomeSelected as a global and also as a context variable...are you resetting the variables in OnSelect properties of those icons? For reference see the attached images...in my case when I click on checkBadge the cancelBadge is always unselected and vice versa...also is important which variable should be true by default, on start of the app should be the Home icon selected I reckon...

Was this reply helpful? Yes No
fiddlerx 103 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi again and thanks for your patience. I tried but I get some red errors...
And yes you are correct - when opening the app I would like the Home icon to be enabled/activated in blue.
Where is that being declared so I understand?

Home icon - OnSelect:
UpdateContext({EnabledHomeIcon = true});
UpdateContext({DisabledHomeIcon = false});
Navigate(HomePage)

Home icon - Color:
If(EnabledHomeIcon = true, RGBA(2,120,212, 1), RGBA(149,149,149, 1))

User icon OnSelect:
UpdateContext({EnabledUserIcon = true});
UpdateContext({DisabledUserIcon = false});
Navigate(UserPage)

User icon - Color:
If(EnabledUserIcon = true, RGBA(2,120,212, 1), RGBA(149,149,149, 1))

Items icon OnSelect:
UpdateContext({EnabledItemsIcon = true});
UpdateContext({DisabledItemsIcon = false});
Navigate(ItemsPage)

Items icon - Color:
If(EnabledItemsIcon = true, RGBA(2,120,212, 1), RGBA(149,149,149, 1))

Was this reply helpful? Yes No
krystofpe 44 on at

Like
a
(0)

Report
Copy link

Link copied!

You don't need to declare variables for DisabledIcons you just need to always set all variables at once as you can see in pictures I posted before...in your case your Home icon OnSelect property would be something like this:

UpdateContext({EnabledHomeIcon = true}); UpdateContext({EnabledUserIcon = true}); UpdateContext({EnabledItemsIcon = true})

Your User icon:
UpdateContext({EnabledHomeIcon = false}); UpdateContext({EnabledUserIcon = true}); UpdateContext({EnabledItemsIcon = false})

Your Items icon:
UpdateContext({EnabledHomeIcon = false}); UpdateContext({EnabledUserIcon = false); UpdateContext({EnabledItemsIcon = true})

And the defaul values for these variables you can declare either in OnVisible property of a screen or OnStart property of application. See App object in Power Apps - Power Platform | Microsoft Learn.

Cheers!

Was this reply helpful? Yes No