Creating a Power Apps Menu Components [Episode 38]

Learn how to create and use a Power App component for navigation menus.

One small correction: For the TemplateFill property, use this code to fix the jumpiness change it accordingly for your own component name (Component1) and field name (ScreenControl)
If(ThisItem.ScreenControl=App.ActiveScreen, ColorFade(Component1.Fill,.4), Component1.Fill)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - - - - - -

Next step on your journey:

Let's connect:

Pragmatic Works
7175 Hwy 17, Suite 2 Fleming Island, FL 32003
Phone: [phone]

Hi everyone.
For all the issues mentioned, I found a solution that is to dismiss the isSelected and add a condition for example in the Fill property of the button / tab, etc:
If(
ThisItem.screen = App.ActiveScreen,
Red,
Blue
)
The effect is the correct, but I don't use the output variable whit the value of gallery selected item.

[JemicoTX]

To Fix the "Double Click" bug:

First: All screen titles can reference the same control on the initial screen of the application presenting the Nav Menu. The trick to fixing the double click so the title properly reflects the menu choice selected is to set the Output Property within the component so that the App.ActiveScreen is used in a LookUp against the collection that fed the Component's gallery of menu items. This fix is in the same spirit someone else suggested to fix the highlighted selection. For example:

my App OnStart builds a collection:

ClearCollect(
colNavigation,
{
ScreenName: "Home",
Screen: scrnMain,
},
{
ScreenName: "Options",
Screen: scrnOptions,
(etc)

The Output property within the Navigation Component that has been built "MenuSelection" (that my titles will point to) should be set to:

LookUp(colNavigation, App.ActiveScreen = Screen, ScreenName)

Now on my screens, I can place a label and set the text = 'comNav'.MenuSelection

[derekgray]

I could not get any of the solutions below to work to correct the jumpiness and displaying the wrong screen, so my solution was to create a text box and set the property to: App.Activescreen.Name and the jumpiness disappears and now get the correct screen name that aligns with the selected screen on the Nav Menu. so for me it's fixed using this solution.

[assistdarrenlutchner]

Thank you Brian. You have been very helpful.

[miketosto]

Great video. Trying to take this a bit further. I've set this up for 4 different Icons/names for a nav bar, but the issue is I want the last icon (Titled "More Options") to trigger a flyout menu rather than navigate to a specific screen. Looks like PowerApps needs me to put in a navigate option for this component to work. Is there a work around for what I want to do?

[seadude]

That "double click" issue is one I faced as well. Would be nice to know how you addressed it. Thanks!

[thanapongkunchaikaseam]

Thank you very much for this video. it's great! :)

[Reddimension]

Thanks for this instruction. However, for some reason this: Table({Id:0, MenuLabel:"Sample Item", screen:App.ActiveScreen}) does not work for me. It gives an error that it needs an operator to function. I must be doing something wrong but i can't seem to find what. Any tips ?

[TheJojonaru]

Thanks for this amazing video, Brian. And thanks for helping many of us with many other videos.
When defining the sample table in Component, could we user other code instead of "screen:App.ActiveScreen", like for example "itemCode:set(MyVar:true)" (so I can make a control visible o whatever when selecting than menuitem)?
Thank you

[RakeshKumar-jyzh]

1) How we can handle more then one entity from one form?

2) How we can do CRUD operation in portal using JavaScript/WebAPI?

3) Why image fields are not shown on the portal Forms/Lists?

[robx]

How would you add a Log Out item to the component menu?

[narnick]

super tutoriel, grâce à vous j'ai put réaliser un menu

[rpgprinting]

Hi i hit an issue where even when visible is set to false where the component (the gallery) would overlap buttons on the main screen, those buttons wouldnt be selectable where they were overlapped by the component, the component needs to be in the front layer so its visible above buttons when the hamburger icon is pressed, but that then stops the button below being selectable, any solution to this ?

[joeyjoeyjojo]

Hello Brian, love the video but I have a question. You use App.ActiveScreen to set a "default" Screen object, is there an equivalent to set a Control object? I want my bar to run a Barcode Scanner button but nothing seems to work. Perhaps its not possible but you may have come across this already. Many thanks.

[ronbakker]

Hi Brian, thanks for the cool video, I got it to work but I too have it highlighting the wrong page. I'm a noob and although I got it working I will need to do a few more of these before I actually start to understand how it works.

[SuperDarekR]

change galMenu to comNav
If(ThisItem.screen = App.ActiveScreen ; ColorFade(comNav.Fill; 35%))
Hi Brian you can fix all the errors in this video and upload the video with the correct formulas

[nicholasnagy]

Brian, I got this working easily following your guide, but when I query a SQL DB for the menu items instead, I get the following: "Expected a different collection record structure." I checked the input of the custom component and what the query returns/collection, and they're all identically formatted/structured. Any idea what's going on here?

[guillaumechandonnet]

How would you do to change the color of the menu depending of which screen you're on?

[NitinMathewGeorge]

Hello Brian, can you help me fix the jumping screen issue? Locking it with labels isn't working. I am stuck for more than a week now.

[neilnorpa]

how do i fix the issue with the tabs not staying on the scren selected it defaults to the top tab