cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Angelo
Level: Powered On

Create hamburger menu tips & tricks

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
            )
        }
    )
)
1 ACCEPTED SOLUTION

Accepted Solutions
Community Support Team
Community Support Team

Re: Create hamburger menu tips & tricks

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:6.JPG

 

7.JPG

 

 

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:Test1.gif

 

 

 

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

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
5 REPLIES 5
Community Support Team
Community Support Team

Re: Create hamburger menu tips & tricks

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:6.JPG

 

7.JPG

 

 

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:Test1.gif

 

 

 

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

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Angelo
Level: Powered On

Re: Create hamburger menu tips & tricks

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

 

image.png

 

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 Man Happy

 

 

 

 

Community Support Team
Community Support Team

Re: Create hamburger menu tips & tricks

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

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Angelo
Level: Powered On

Re: Create hamburger menu tips & tricks

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!. Man Very Happy

 

All the best

Angelo

farahana23
Level: Powered On

Re: Create hamburger menu tips & tricks

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.

Helpful resources

Announcements
firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

Top Community Contributors for July 2019

Top Community Contributors for July 2019

Let's thank our top community contributors

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

FirstImage

Power Platform World Tour

Coming to a city near you

thirdimage

PowerApps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

FourthImage

Join PowerApps User Group!!

Connect, share, and learn with your peers year-round

FifthImage

Dynamics 365 and Power Platform April 2019 Release notes

Features releasing from April 2019 through September 2019!

Users Online
Currently online: 178 members 4,715 guests
Please welcome our newest community members: