Flyer Menu In PowerApps

Introduction

 
While creating any application using Microsoft PowerApps, we need to create several menu options. In this article, I am going to explain about creating Menu options in PowerApps Screen. 
 
Steps to Create a Flyer Menu
 
Login to Microsoft PowerApps. Choose Canvas app
 
Flyer Menu In PowerApps 
 
Choose Tablet layout 
Flyer Menu In PowerApps 
A new screen will appear 
 
Flyer Menu In PowerApps
 
Click on Insert and then select Icons and choose Rectangle 
 
 
Flyer Menu In PowerApps
 
Set the properties of the rectangle as follows
 
 
Flyer Menu In PowerApps
 
Click on Icons and choose the back option 
 
Flyer Menu In PowerApps 
 
Arrange the rectangle icon and back arrow icons like the below image 
 
 
Flyer Menu In PowerApps
 
Select Back Icon on the rectangle in the On Select property of that Icon set the Variable Show Menu and add formulae 
 
OnSelect: UpdateContext({ShowMenu: !ShowMenu}) 
 
Flyer Menu In PowerApps
 
Select Rectangle and set its Visible property to "Show Menu"
 
 
Flyer Menu In PowerApps
 
Play the screen after coding this, we will get the result 
 
On clicking the button, the Rectangle will appear and again on a click, the rectangle will disappear 
 
Now we will see the navigation of Flyer Menu, on click of the back icon the rectangle will be minimized and again click on Next icon the Rectangle will be maximized. The below I have given a link to show the Flyer Menu. 
 
 
Now insert another Rectangle and set its property as below image 
 
Flyer Menu In PowerApps
 
Add the Next Icon to the Screen as the Previous icon added.
 
Now arrange the next arrow and the rectangle like the image shown below.
 
Flyer Menu In PowerApps 
 
Now we will add the formulae in the to maximize the rectangle when clicking the next arrow and again it will get minimized when clicking on the previous arrow. 
 
Set the properties of Icon1(Back arrow) 
 
OnSelect : UpdateContext({ShowMenu: false}) && UpdateContext({ShowMenu1: true})
 
Here ShowMenu & ShowMenu1 are set as a variable for visibility of Rectangle1 & Rectangle 2 
 
In this formula, we have set Rectangle1 to be not visible and set Rectangle2 to be visible 
 
Set the properties of Icon2(Next arrow) 
 
OnSelect: UpdateContext({ShowMenu:true}) && UpdateContext({ShowMenu1:false}) 
 
In this formula, we have set Rectangle1 to be visible and set Rectangle2 to be not visible
 
Set the properties of Icon1: Visible: ShowMenu & Icon2: Visible: ShowMenu1
 
Check the below images for the formulae
 
Flyer Menu In PowerApps
 
Flyer Menu In PowerApps 
 
Flyer Menu In PowerApps 
 
Flyer Menu In PowerApps 
 
Output
 
Check Flyer Menu Navigation to see the result of how we can create the Flyer Menu using Rectangles
 

Conclusion

 
We can create Menu options using rectangles and Icons. In the rectangle, we can put buttons on different screens and create navigations.