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
)
}
)
)
Solved! Go to 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
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
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:
Thank you very much for your help
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
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
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.