Spice up your navigation with modern TabList control

Microsoft released new modern controls, and the TabList control is pretty awesome to create our navigation 😊

Today’s another post about how to improve the looks of any given app! We’re used to have buttons for the navigation, this is the classic way of doing things and it works very well of course.

But… we can do better now!

Connect the TabList control

When you add the TabList control, you can connect to a data source, or you can insert the values directly into the Items property of that control.

In our case, we’re going to make use of the (Named) Formulas property of the App.

Named Formulas? What’s that?

Back in 2022, Microsoft introduced Power Fx: Named Formulas. In a nutshell, this concept (taken from Excel!) allows for better performance of the app. The formulas are only called when needed, with no dependencies on the App.OnStart property.

Create navigation menu items

Into the app, let’s go into the Formulas property, and start creating our menu. Each item will allow us to navigate to the different screens.

Enter the following formula:

MenuItems = [
    {
        MenuTitle: "Home",
        GoToScreen: 'Home Screen'
    },
    {
        MenuTitle: "Approvals",
        GoToScreen: 'Approval Screen'
    },
    {
        MenuTitle: "Support",
        GoToScreen: 'Support Screen'
    }
];

You’ll note that the MenuTitle value is different from the GoToScreen value. This let’s you name your navigation items what you want, compared to the screen names in PowerApps.

Display the correct menu items values

Go to your TabList control on Screen1, and in the Items property, add MenuItems. And at this point, you probably see numbers?? 🤔

Let’s fix that. On the right Properties panel/blade:

• Click on Edit next to Fields
• Then Add field
• Select MenuTitle
• Then click Add.
• Repeat for each TabList control if necessary (in case you had created the screens before)

You now have the proper values displayed!

Let’s make it all work!

But right now, we can click on the navigation and it does… NOTHING! 🤔

We need to hook up everything up still.

• Click on the TabList control
• Go to the OnSelect property
• Enter the following formula >> Navigate(Self.Selected.GoToScreen)
• In DefaultSelectedItems >> LookUp(MenuItems, GoToScreen=App.ActiveScreen)
• Repeat for each TabList control if necessary (in case you had created the screens before)

Et voila! 😉

Thanks for reading! 🙂