Menu

Create your menus using a gallery in PowerApps

Quite a common task in PowerApps is to create a menu. You might already have figured out that a menu is easily created using a Gallery. Remember my recent post about galleries? Today I’m looking at some more advanced techniques related to navigation options within Power Apps.

First of all, I’m going to assume that you want to navigate to a screen every time someone clicks on a menu option. Also each menu option has a display text  that you want to appear on your screen in a separate section of the menu.

Your menu could look something like this:

A Menu in Power Apps

I’ve now created a Gallery and I set the Items property to:


[{Display: "Backlog", Screen: ScreenBacklog}, {Display: "New", Screen: ScreenNew}, {Display: "Settings", Screen: ScreenSetting}]

Note that I’ve got a collection of display texts and screens in my PowerApp.

Collection of display texts and screens

Within each menu option I’m displaying my display texts with ThisItem.Value.Display

Display the menu

The OnSelect for each menu item is set to Navigate(ThisItem.Value.Screen, Cover)

on select navigating to screens

This way the menu is easy to expand. All I would have to do is include the details in my menu gallery to include another option.

4 thoughts on “Create your menus using a gallery in PowerApps

  1. Hi Peter, have you ever tried/achieved to build a “Form menu” using a gallery.
    e.g. New/Edit/Save from.

    I see the Navigate screen thing going well — but using a gallery for common edit tasks loos reasonable to me.

    I struggle to pre-define a variable for a “form task” like _form: NewForm(xyzForm)

    looking to your comments

    1. Hi Oliver,

      Can you explain your challenges a bit further?

      Is the problem to include a Form in the array feeding the gallery? It should be possible to do that in a similar way to the screens in my example. I don’t think however that there is a way to use NewForm (or other functions) and listing them as array element. You could however use something like “NewForm” in your array and then when you call the action use a switch to select the right function that you want to call depending on the text value found in the array.

  2. Hi,

    Thank you for this! I had really been having some trouble expanding my menu options. But this has made it so easy.

    I was wondering if there is a way to include a subtitle. Each attribute I have on my menu falls into one of two categories, Internal and external. I would like to display this for the user.

    Any help you could give me would be greatly appreciated.

    Regards,
    MG

    1. Hi MG,

      You can add any information you need to the json array that you like.

      My example in the post could be extended to:
      [{Display: “Backlog”, Subtitle: “Sub 1”, Screen: ScreenBacklog}, {Display: “New”, Subtitle: “Sub 1”, Screen: ScreenNew}, {Display: “Settings”, Subtitle: “Sub 1”, Screen: ScreenSetting}]

      Now you can add an additional label (or any other control) and use the subtitle property to display the subtitle text.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: