Build flexible and expandable menu screens in PowerApps

Some of you might be struggeling with building menu screens for larger apps. Having everything alligned and correctly placed can be a pain. What if we need another button once we needed to extend the app? Rearranging everything can be very time consuming and nerve-racking. 🙁

Finally I found another approach which I’d like to share with you. What if we’d just use galleries to manage our menu screen in PowerApps?

Preview

Standard Menu Screen

I think we all can imagine a standard menu screen in PowerApps? Manually arranged buttons, manually paddings. Once a new item is added we need to rearrange and shift all the buttons.

Standard Menu Screen in PowerApps

My approach is – as mentioned above – is to use galleries to automate building of menus. So let’s start apping 🙂

Adding screens

First of all we need some target screens. For the demo I’ll just add some empty screens including a back button.

  • UserScreen
  • DeviceManagementScreen
  • DeviceMasterDataScreen
  • DeviceOrderScreen
  • DeviceHandoverScreen
Screens Added to App

Next screen to be added is our menu screen

Empty Menu Screen

Now as we have a couple of screens added, it’s time to create the base for our stunning menu gallery.

Creating the Menu Collection

I consider collections to be the easiest way to hold data in PowerApps which are neither Master Data nor Transactional Data. Collections are build on demand e.g. on start of an app, once a screen is visible or even if you push a button. Of course you may use collections to load data from an existing data source but you may also manually enter data. I’d like to load the menu collection each time the menu screen loads, therefore I put the code in the screen’s OnVisible property.

Building the Menu Screen Collection
ClearCollect(
    col_MenuScreen,
    {
        ScreenName: UserScreen,
        MenuName: "Users",
        Icon: Icon.People,
        Type: "MasterData",
        SortNumber: 1
    },
    {
        ScreenName: DeviceManagementScreen,
        MenuName: "Manage Devices",
        Icon: Icon.Laptop,
        Type: "Process",
        SortNumber: 2
    },
    {
        ScreenName: DeviceMasterDataScreen,
        MenuName: "Company Devices",
        Icon: Icon.Devices,
        Type: "MasterData",
        SortNumber: 3
    },
    {
        ScreenName: DeviceOrderScreen,
        MenuName: "Order Devices",
        Icon: Icon.ShoppingCart,
        Type: "Process",
        SortNumber: 4
    },
    {
        ScreenName: DeviceHandoverScreen,
        MenuName: "Handover Devices",
        Icon: Icon.Draw,
        Type: "Process",
        SortNumber: 5
    }
)

In detail

  • the ScreenName identifies the target screen
  • MenuName will give the text for the button
  • Icon will add an Icon to our button
  • Type will allow us filtering or sorting if we’d like to do so
  • SortNumber will help us sorting the buttons 🙂

Quickly change to another screen and switch back to the menu screen to make the collection load.

Building the Gallery

Now we add a horizontal gallery to our PowerApp and set it to Layout “Title and subtitle on overlay”

Added Gallery

Next step would be to resize everything as you’d like it to be. I wanted to show 3 Menu buttons per column – so I set the Wrap Count property to 3

Resized Gallery

Once we have done that, we are going to

  • remove the subtitle label as we only have one Name per button
  • Set center the title label
  • and connect the gallery to our collection, sorted by “SortNumber”

Code for Items property

SortByColumns(
    col_MenuScreen,
    "SortNumber",
    Ascending
)

As we are going to use icons instead of images (which would be possible as well), we are now removing the image and adding a rectangle and an icon instead. It doesn’t matter which icon – we’ll change it later using the Icon property to ThisItem.Icon

Icons Added

To bring the icons in shape I’ll add some padding around them. For this example it worked best to use Top: 20, Botton: 80, Left: 20, Right: 20…

Icons with Padding

Now I’d like to bring in some nice hover/click effect. To do that, I just add another rectangle, which I put just over all other elements. To achieve some nice effect it’s just necessary to set up the following properties

  • Fill to transparent RGBA(0, 0, 0, 0)
  • HoverFill to black with 30% RGBA(0, 0, 0, 30%)
  • PressedFill to black with 50% RGBA(0, 0, 0, 50%)

Navigate to target screens

The final step now is to make the gallery items navigating to the target screens. To achieve that we just set the OnSelect property accordingly.

Set Navigation Targets
Navigate(
    ThisItem.ScreenName,
    ScreenTransition.CoverRight
)

We are now ready to go – just play the app and test your new menu buttons 🙂

Bonus

As a bonus we are now going to split the menu in two areas as Master Data and Process. To do that just

  • copy and paste the gallery
  • add filters accordingly
Final Menu Screen

Code for Master Data

SortByColumns(
    Filter(
        col_MenuScreen,
        Type = "MasterData"
    ),
    "SortNumber",
    Ascending
)

Code for Process

SortByColumns(
    Filter(
        col_MenuScreen,
        Type = "Process"
    ),
    "SortNumber",
    Ascending
)

That’s it for now.

1 Comment

  1. Wonderful approach!
    Makes life, respectively PowerApps development so much easier 😉

Leave a Reply

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

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

© 2019 D365 BLOG

Theme by Anders NorenUp ↑