Header & Menu Component 07-26-2019 02:22 AM - last edited 12-17-2021 14:12 PM

[IvanMislav]

A Header & Menu control is a simple navigation component that can be reused on many screens in PowerApps applications.  Menu items can be additionally configured to navigate to other screens or to trigger any other action.

Properties

PROPERTY	DESCRIPTION
Color	Sets the text and icon color.
Background Color	Sets the menu background-color
List Items	Table (list of menu items)
Title	Defines the title text
Back Button	Sets the visibility of the back button
Header Height	Sets the header height
Item Height	Sets the menu item height

Additional configuration (Example)

OnStart, create a collection you will use to reference the screens.

Add the action to OnSelect property of the gallery button to navigate the screens:

Navigate(LookUp(colScreens,ThisItem.Value = displayName,screen))

*v2 Version Edit 

- Added Header Height custom property

- Added Item Height custom property

- Bug Fix - Entire component is now resizing depending on the state (Expanded/Collapsed) to fix the overlay issue. 

NOTE: Header component should always be on the front of the layout of the screen.

[CABIRD]

Hello @IvanMislav 

Like your header & menu component. However click on hamburger menu and select screen two or three and no switch to screen two or three. 

Added the below to components gallery onselect. 

Navigate(LookUp(colScreens,ThisItem.Value = displayName,screen))

I aslo added header thumbnail to media.

Any thoughts as to why this isn't functioning as clearly it did for you. 

Regards

Christopher

[IvanMislav]

Hi Christopher,

Thanks for the feedback. Where did you add the Navigate function? It should be added to btnGalleryItem button which is nested inside the gallery galHeader. The whole function should then look like this:

Set(glbDropMenu, !glbDropMenu);Navigate(LookUp(colScreens,displayName=ThisItem.Value,screen))

Also, make sure the collection is created. Sometimes you need to close the app and then reopen it again or create a button that will initiate ClearCollect function when clicked.

Additionally, I will upload a new version of this component later today which will include some additional custom properties and a bug fix.

Hope this helps,

Regards

[CABIRD]

Hello @IvanMislav 

Thank you for taking the time to respond and so quickly. I really appreciate you doing so. 

The code below came from https://powerusers.microsoft.com/t5/Components-Gallery/Header-amp-Menu-Component/td-p/328654 the bottom of the article. 

Navigate(LookUp(colScreens,ThisItem.Value = displayName,screen))

Code you provided and clarification as to where to add the code resolved the issue.

I look forward to looking at the updated version to be published later today. 

Have a fabulous day.

Best regards

Christopher

[IvanMislav]

Hi Christopher,

Yes, that function should work fine as long as you have exactly the same collection as the one from my example.

I uploaded the new version so you can try it now. I should note that I'm having issues when importing that file into another app as some of the properties are not imported correctly. In my case, galHeader Gallery height is set to "80" but it should be "CountA(galHeader.AllItems.btnGalleryItem)*btnGalleryItem.Height". I checked the JSON file and it seems that everything is saved alright. It might be that the issue happens just in my case. We should also bear in mind that components feature is "in preview" atm so these kinds of glitches are to be expected.

Regards

[CABIRD]

Hello @IvanMislav 

New version works perfectly. 

The only change was btnGalleryItem button had to be changed from Set(glbDropMenu, !glbDropMenu); to below

Set(glbDropMenu, !glbDropMenu);Navigate(LookUp(colScreens,displayName=ThisItem.Value,screen))

Excellent.

Best regards

Christopher

[pmcgurn01]

Edit, but leaving original below.

I was able to get this working by changing the formula for OnSelect on the button to

Navigate(LookUp(colScreens, Display = galHeader.Selected.Value, Screen))

Original post:

I couldn't quite get this to work.  I get the gallery set up, items populated, OnSelect added, re-ran App OnStart, and when using the player/preview mode, nothign happens when clicking an item.  I actually notice the whole component renders weirdly in edit mode, as well.  Are you working off a different version than the one that's attached ot the original post in this thread?

This is what the component looks like directly after import.

[IvanMislav]

Hi @pmcgurn01,

I'm glad you got this to work. As for the layout issues I also had the same problem. Check my earlier post and see if that solves your problem: I uploaded the new version so you can try it now. I should note that I'm having issues when importing that file into another app as some of the properties are not imported correctly. In my case, galHeader Gallery height is set to "80" but it should be "CountA(galHeader.AllItems.btnGalleryItem)*btnGalleryItem.Height". 

[Jex]

Very interrsting topic.
I would love to have access to the msapp but the link seems disabled, could you re-upload it please so i can have some fun with it ?

Thanks a lot

[ColarBear]

I am trying to get this Menu to Navigate to the new screens I am using the following:

App --> OnStart

ClearCollect(
colScreens,
{
displayName: "Home",
screen: Screen1
},
{
displayName: "Scheduled Jobs",
screen: ScheduledJobs
}
)

then the btnGalleryItem

OnSelect -->

Set(glbDropMenu, !glbDropMenu);Navigate(LookUp(colScreens,display =ThisItem.Value,screen))

ive also tried

Set(glbDropMenu, !glbDropMenu);Navigate(LookUp(colScreens,displayName=ThisItem.Value,screen))

 any ideas on this. Am I doing something wrong