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
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.

Difinity Conference 2022

Difinity Conference 2022

Register today for two amazing days of learning, featuring intensive learning sessions across multiple tracks, led by engaging and dynamic experts.

European SharePoint Conference

European SharePoint Conference

The European SharePoint Conference returns live and in-person November 28-December 1 with 4 Microsoft Keynotes, 9 Tutorials, and 120 Sessions.

Power Apps Ideas

Changes to Ideas Coming

We are excited to announce a new way to share your ideas for Power Apps!

Top Solution Authors
Top Kudoed Authors
Users online (5,376)