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

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

Share the knowledge!

Paul Rodrigues

Business Analyst with 20 years of IT experience creating practical solutions. I love to automate business processes through the use of technology while making the end users work easier. My current favorite tools are Power Apps, Power BI and Power Automate. #PowerAddict

You may also like...

6 Responses

  1. Chad says:

    Useful info. Fortunate me I found your web site by chance,
    and I’m surprised why this accident did not came about earlier!
    I bookmarked it.

  2. Marlene says:

    Personally, if all site owners and bloggers made just right
    content material as you probably did, the web will likely be a
    lot more useful than ever before.

  3. Jeremy says:

    Hi there, just became aware of your blog through Google, and found that it’s
    really informative. I am going to watch out from Brussels.
    I’ll appreciate if you continue this in future. Numerous people will be benefited from your writing.
    Cheers!

  1. August 26, 2019

    […] height formula references with the variables. For more advanced techniques check out my post on how-to-build-a-menu-component-in-powerapps/Please leave your feedback. I hope this article has been helpful for you and bookmark this blog and […]

  2. September 8, 2019

    […] to create a spinner component in PowerApps! For more how to’s on components read my post on how-to-build-a-menu-component-in-powerapps. Please leave your feedback. I hope this article has been helpful for you so bookmark this blog as […]

  3. September 8, 2019

    […] For more step by step guides using components please see my posts on:how-to-create-a-spinner-component-in-powerappshow-to-build-a-menu-component-in-powerapps […]

Leave a Reply

Your email address will not be published. Required fields are marked *