Create hamburger menu tips & tricks

[Angelo]

hi, I wonder if anyone can help me with creating an hamburger menu.

I have seen the post Create Hamburger Menu Control which is quite useful, but I need some help with the formula for creating the table.  I would like a way to Submit whatever form the user is on, rather than having to specify a specific one, so that I can use the menu on many screens rather than create one for each forms.  

Thanks in advance for any suggestions, and also for any tips and tricks on creating an hamburger (or waffle) menu.  Below is the formula I'm playing with at the moment

Set(
    TableMenu,
    Table(
        {
            Label: "Save and view personal info",
            OnClick: SubmitForm(EditFormPersonalInfo),
            OnSuccess: Navigate(
                FormViewerPersonalInfo,
                ScreenTransition.Fade
            )
        };
        {
            Label: "Save and view EC Contact info",
            OnClick: SubmitForm(EditFormPersonalInfo),
            OnSuccess: Navigate(
                FormViewerEmergencyContactsDetails,
                ScreenTransition.Fade
            )
        }
    )
)

[v-xida-msft · Accepted solution]

Hi @Angelo,

Could you please share a bit more about your scenario?

Do you want to create a hamburger menu within your app?

I have made a test on my side, please take a try with the following workaround:

Set the OnStart property of the first screen of your app to following formula:

Set(
    TableMenu,
    Table(
        {
            Label: "Save and view personal info",
            OnClick: SubmitForm(EditFormPersonalInfo),
            OnSuccess: Navigate(
                FormViewerPersonalInfo,
                ScreenTransition.Fade
            )
        },  /* <-- Please note that use , rather than ; */
        {
            Label: "Save and view EC Contact info",
            OnClick: SubmitForm(EditFormPersonalInfo),
            OnSuccess: Navigate(
                FormViewerEmergencyContactsDetails,
                ScreenTransition.Fade
            )
        }
    )
)

 Set the OnVisible property of the first screen of your app to following formula:

UpdateContext({IsExpand:false})

Set the OnSelect property of the "Hamburger Menu icon" button to following formula:

UpdateContext({IsExpand:!IsExpand})

Set the Items property of the Gallery control (Gallery1) to following formula:

TableMenu

Set the Width property of the Gallery control to following formula:

If(IsExpand=true,384,0)

Set the OnSelect property of the Gallery control to following formula:

Select(icon2);UpdateContext({IsExpand:false})

Note: The icon2 represents the "Submit" ("Check") button within the screen.

Set the OnSelect property of the "Submit" button (named "icon2") to following formula:

SubmitForm(EditFormPersonalInfo)

Set the OnSuccess property of the Edit form (called "EditFormPersonalInfo") to following formula:

If(
    Gallery1.Selected.Label="Save and view personal info",
    Navigate(FormViewerPersonalInfo,ScreenTransition.Fade),
    Gallery1.Selected.Label="Save and view EC Contact info",
    Navigate(FormViewerEmergencyContactsDetails,ScreenTransition.Fade)
)

The GIF image as below:

In addition, please check and see if the following thread would help in your scenario:

https://powerusers.microsoft.com/t5/General-Discussion/Menu-Screen-Navigation-help/td-p/67565

Best regards,

Kris

[Angelo]

Hi Kris,

Thank you very much, very detailed, I'll give it a try now.

This is my first powerapp.  At the moment I'm using a mix of buttons and icons, but it is a little cluttered

so the aim is really 2-folds:

1. Create a single menu that replaces all the buttons and icons (a hamburger or waffle menu seemed appropriate, as I can also add items to view forms and galleries without users having to click back and forth to various screens)
2. If possible 'I'd like to create one single menu that I can re-use in all the Edit forms that allows the user to save their edits and to move to one of a number other edit forms that are available through the menu (so am looking for whatever formula that I can use to replace SumbitForm(SpecificFormName) with something more generic that enables submitting whichever edit form is active

Thank you very much for your help 

[v-xida-msft]

Hi @Angelo,

Have you take a try with my solution?

Have you solved your problem?

If you have solved your problem, please go ahead and click “Accept as Solution” so that this thread will be marked for other users to easily identify.

Best regards,

Kris

[Angelo]

Hi Kris,

apologies for the delay, I had other projects that kept me busy.  I had some trouble at first, but once I cleared my browser's temp files and cookies, all worked well.

Thank you very much for your help, I now have a good starting point to put menus all over my apps!. 

All the best

Angelo

[farahana23]

This is very helpful.especially for those who are new to powerapps. I tried to create the hamburger menu on my third screen of my app (My HOME SCREEN). The issue was, there are no ONSTART property to begin with. The ONSTART property is only applicable for the first screen in powerapps. can you please help me with those. Thanks

* My first screen is a sign in screen

* My Home screen lies on the third screen. This is where I intend to put the hamburger menu icon.