SharePains

Create your menus using a gallery in Power Apps

Menu

Create your menus using a gallery in Power Apps

By:

Pieter Veenstra

Date:

Quite a common task in Power Apps 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.

Modern controls

Although this post is focussed on the creating a navigation with either classic buttons or modern button controls. You might also want to consider using modern Toolbar control.

Back to Classic controls

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:

Menu in an app
Menu in an app

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.

Menu developed in Power Apps Studio
Menu developed in Power Apps Studio

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

Display the menu option's text
Display the menu option’s text

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

Handle navigation in a menu
Handle navigation in a menu

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.

Is your business still running on paper trails, sprawling Excel files, or ageing Access databases? There’s a better way — and I can show you exactly what it looks like. I’m the Technical Director of Vantage 365, a Microsoft solutions consultancy working with clients across the UK, the Netherlands, and worldwide. For over 30 years I’ve been turning messy, manual business processes into clean, automated systems that save time, reduce errors, and give teams the visibility they need to make better decisions. SharePains is not just any blog run by a Microsoft MVP. Have you ever used Try-Catch in Power Automate? The original post about Try-Catch in Power Automate can still be found on this site, https://staging.sharepains.com/2018/02/07/try-catch-finally-in-power-automate-flow/ Or have you ever used the Pieter’s method to avoid variables and speed up your flows? https://staging.sharepains.com/2020/03/11/pieters-method-for-advanced-in-flows/ You can contact me using contact@staging.sharepains.com

Categories:

Tags:

4 responses to “Create your menus using a gallery in Power Apps”

  1. Oliver Funk Avatar
    Oliver Funk

    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. Pieter Veenstra Avatar
      Pieter Veenstra

      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. MG Avatar
    MG

    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. Pieter Veenstra Avatar
      Pieter Veenstra

      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.

Recent Posts

All Categories