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
Power Apps News & Annoucements carousel

Power Apps News & Announcements

Keep up to date with current events and community announcements in the Power Apps community.

Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Power Apps Community Blog Carousel

Power Apps Community Blog

Check out the latest Community Blog from the community!

Top Solution Authors
Top Kudoed Authors
Users online (3,559)