cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
thQS
Frequent Visitor

Change Fill color when different Screen is Selected

I have created an app the there is a navigation bar always visible on the left. 
Each button navigates to a different screen.


How do i change the fill color of the button according to the screen that is selected? 

1 ACCEPTED SOLUTION

Accepted Solutions
v-jefferni
Community Support
Community Support

Hi @thQS ,

 

Would you like to change the fill color after clicking navigation menu and going to another screen? How did you make the Nav Menu component?

 

If you created the Nav Menu component similar to @Reza Dorranis Video:

https://www.youtube.com/watch?v=dP74npyyvGc

 

Then you could use update contexts updating in Navigate functions on the OnSelect of the gallery. 

 

Firstly, in the vedio you could see the Menu items are set in a collection:

100.png

Then in the vedio’s 29:40, in the component edit screen, you could modify the formual to create a variable as below:

v-jefferni_0-1610963983713.png

Navigate(ThisItem.Screen, ScreenTransition.None, {varColor: ThisItem.Title})

Navigate function refer to official doc:

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/functions/function-navigate#navigate

 

Then you could set the Fill of the galley:

If(ThisItem.Title = varColor, Blue, Gray)

So fill color would be blue if the screen is selected, otherwise it would be gray.

 

Hope this helps.

 

Best regards,

Community Support Team _ Jeffer Ni
If this post helps, then please consider Accept it as the solution to help the other members find it.

Community Support Team _ Jeffer Ni

If this post helps, then please consider Accept it as the solution to help the other members find it.

View solution in original post

2 REPLIES 2
v-jefferni
Community Support
Community Support

Hi @thQS ,

 

Would you like to change the fill color after clicking navigation menu and going to another screen? How did you make the Nav Menu component?

 

If you created the Nav Menu component similar to @Reza Dorranis Video:

https://www.youtube.com/watch?v=dP74npyyvGc

 

Then you could use update contexts updating in Navigate functions on the OnSelect of the gallery. 

 

Firstly, in the vedio you could see the Menu items are set in a collection:

100.png

Then in the vedio’s 29:40, in the component edit screen, you could modify the formual to create a variable as below:

v-jefferni_0-1610963983713.png

Navigate(ThisItem.Screen, ScreenTransition.None, {varColor: ThisItem.Title})

Navigate function refer to official doc:

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/functions/function-navigate#navigate

 

Then you could set the Fill of the galley:

If(ThisItem.Title = varColor, Blue, Gray)

So fill color would be blue if the screen is selected, otherwise it would be gray.

 

Hope this helps.

 

Best regards,

Community Support Team _ Jeffer Ni
If this post helps, then please consider Accept it as the solution to help the other members find it.

Community Support Team _ Jeffer Ni

If this post helps, then please consider Accept it as the solution to help the other members find it.

Hi @thQS 

 

To configure this, you can set the Fill property as: 

 

If navigation menu is gallery:

If(ThisItem.ColumnName = App.ActiveScreen.Name, RGBA(CurrentScreenColor), RGBA(OtherScreenColor))

 

If navigation menu is buttons:

If(ButtonName.Text = App.ActiveScreen.Name, RGBA(CurrentScreenColor), RGBA(OtherScreenColor))

 

I am assuming that the navigation menu has same names as the Screen Names.

 

 

Hope this Helps!

 

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

Helpful resources

Announcements
Ignite 2022

WHAT’S NEXT AT MICROSOFT IGNITE 2022

Explore the latest innovations, learn from product experts and partners, level up your skillset, and create connections from around the world.

Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Super User 2 - 2022 Congratulations

Welcome Super Users

The Super User program for 2022 - Season 2 has kicked off!

September Events 2022

Check out all of these events

Attend in person or online, there are incredible conferences and events happening all throughout the month of September.

Users online (3,348)