In this blog, we will learn how to create a waffle sliding menu in Canvas app.

Requirement:

Creating a waffle navigation menu for easy accessibility of features and navigating other screens.

Implementation:

• Sign into Power apps.
• Create a Canvas app.
• Go to insert and add a timer.
• Select the timer and go to “Advanced” in the properties pane, On start switch “false” to “VarTimer”.

• Change the duration of the timer from “6000” to “150”.

• Add a “Waffle menu” icon.
• And “OnSelect” of icon properties. UpdateContext({VarTimer:false});UpdateContext({VarWaffle:!VarWaffle,VarTimer:true})
• This will start and stop the timer with the waffle menu.

• Let’s create a flyout panel.
• Add a rectangle and place it on the waffle menu.
• On the “X” properties of waffle menu=If(VarWaffle,-115,-115+115*(WaffleTimer.Value/WaffleTimer.Duration))
• Here we can see that the panel is on the left side of the screen.

• Add one more waffle and on the “OnSelect”= UpdateContext({VarTimer:false});UpdateContext({VarWaffle:!VarWaffle,VarTimer:true})
• And on the “X” property of the waffle menu paste the same value of the flyout rectangle’s “x” value.
• Add buttons or icons in the flyout rectangle with the same “X” value as the flyout rectangle.
  • If(VarWaffle,-115,-115+115*(WaffleTimer.Value/WaffleTimer.Duration))
• Save and publish.

Output:

Hope it helps! 

Power 365ing as usual! 

Any requirements, implementation or consulting work in Power Platform or Dynamics 365 – end user, Microsoft partner or an individual? 

Problem Area – Technical, Functional, Training, Development or consulting? 

Me and my team are here to assist, please fill the following form for your business needs: Click here