How to Build a Menu Component in PowerApps
Learning to build a custom menu component in PowerApps is a great way to save you time when building your PowerApps. My inspiration and foundation for this post is from the article posted on the Microsoft site found here. In the linked article it gave me some great building blocks but it left me needing a little more information to put it to actual use. So I decided to create a menu with my own twist and share it here with this post. In this tutorial I will give you a step by step guide to build a menu component that will take in a collection as an input table. This collection will hold the menu name and screen for the component to navigate between screens in your PowerApps. Continue reading and you too will be an office power user!
Let’s get started by jumping straight into building our component. Select the insert menu and look all the way to the right and select Components > New Component. If you do not see components you may have to go to app settings > advanced settings and turn the Component feature on.
In Component Design
- Component
- Name: MenuComponent
- Width: 200
- Height: 350
- New Custom Property (This is still within the component.)
- Display name: Items
- Name: Items
- Description: Items
- Property type: Input
- Data type: Table
Now from the property drop down near the formula bar select the newly created property Items and replace the table data with data from below.
- Items:
Table(
{
Item: “Sample”, //This is to receive the menu item name.
Screen: App.ActiveScreen //This is to receive the menu screen name.
}
)
Now we have the component set we will continue in the component screen and add a gallery control to hold our menu and a button to navigate to the selected screen.
- Gallery control
- Name: GalleryMenu (Blank Vertical)
- Width: 200
- Height: 350
- Items: MenuComponent.Items
- Template Size: 38
- Button (Add this into the GalleryMenu control.)
- OnSelect: Navigate(ThisItem.Screen)
- Text: ThisItem.Item
- Width: 190
- Height: 38
- X: 0
- Y: 0
- Border Radius: 0
Now let’s go out of the component design by selecting screens from the tree view on the left. We can now continue on to create the first screen to use our newly created component.
Back to Screens
- Screen1
- Name: Screen1
- OnVisible: (The menu to show in this screen1. This collection is what will feed the menu component. The first column “Item” is the description you see in the navigation and the second column “Screen” is used to pass in the screen for the gallery button to use for it’s navigation. )
ClearCollect(
colTheMenu,
{
Item: “Go to Screen2”,
Screen: Screen2
},
{
Item: “Go to Screen3”,
Screen: Screen3
}
);
UpdateContext({varShowMenu: false}) //To ensure menu is not visible when this screen is called.
- Rectangle
- X:0
- Y:0
- Width: 640
- Height: 92
- Fill: RGBA(56, 96, 178, 1)
- Icon
- icon: Icon.Hamburger
- color: RGBA(255, 255, 255, 1)
- X: 18
- Y: 14
- Width: 64
- Height: 64
- OnSelect: UpdateContext({varShowMenu:!varShowMenu}) //This will show and hide the menu.
- MenuComponent (Insert components and add the new component created above.
- Y: 92
- Visible: varShowMenu
- Items: colTheMenu (We are passing in the table data, “colTheMenu” to the components custom input property of table type we created early.)
- Label
- Text: Right(App.ActiveScreen.Name,1)
- X: 160
- Y: 346
- Width: 319
- Height: 271
- Size: 200
Now to complete this demo all we need to do is duplicate screen 1 for screen 2 and 3 and change the OnVisible properties for screen 2 and screen 3 as explained below.
- Screen2
- Name: Screen2
- OnVisible:
ClearCollect(
colTheMenu,
{
Item: “Go to Screen1”,
Screen: Screen1
},
{
Item: “Go to Screen3”,
Screen: Screen3
}
);
UpdateContext({varShowMenu: false})
- Screen3
- Name: Screen3
OnVisible:
ClearCollect(
colTheMenu,
{
Item: “Go to Screen1”,
Screen: Screen1
},
{
Item: “Go to Screen2”,
Screen: Screen2
}
);
UpdateContext({varShowMenu: false})
- Name: Screen3
I hope these techniques on how to build a menu component in PowerApps help you become more efficient in you app building. Also I used the default color blue for my menu and header rectangle. However, you can give your users the ability to use their own colors using the techniques in my post how-to-change-the-color-theme-in-powerapps-during-run-time .
Please leave your feedback. I hope this article has been helpful for you so bookmark this blog as new articles will be posted regularly.
Additional Component Resources
For more step by step guides using components please see my posts on:
how-to-create-a-popup-confirmation-in-powerapps
how-to-create-a-spinner-component-in-powerapps
