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

 

 

 

Choose Tablet layout 

 

A new screen will appear 

 

 

Click on Insert and then select Icons and choose Rectangle 

 

 

 

Set the properties of the rectangle as follows

 

 

 

Click on Icons and choose the back option 

 

 

 

Arrange the rectangle icon and back arrow icons like the below image 

 

 

 

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}) 

 

 

Select Rectangle and set its Visible property to "Show Menu"

 

 

 

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. 

 

Flyer Menu Navigation

 

Now insert another Rectangle and set its property as below image 

 

 

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.

 

 

 

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

 

 

 

 

 

 

 

 

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.