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

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.