PowerApps Tutorial: Building Navigation using a Gallery

Introduction

Here is a quick end to end build of a solution for adding navigation to your PowerApps using the Gallery control and a Collection.

Use Case

If you have an app with multiple pages within it, managing the navigation can be difficult - you end up repeating work on each page.

Overview

Here’s a quick rundown of the solution:

  • Create a collection to store the navigation’s labels and screens.

  • Use a Gallery to display the collections values and perform the navigation

  • Use Global Variable to keep track of what has been selected

  • We tried to keep it as simple as possible: Two controls and a Collection

Build

Step 1: Create a Collection

Assuming you’ve already created the pages for your app, you can load a Collection with the values for your PowerApps navigation. I suggest binding it to your PowerApp’s OnStart event.

NOTE: Screen1 (below) is a reference to the name of a screen in your app that you’d like to navigate to.

ClearCollect(collAppNav, {title:"Nav 1", screen:Screen1}, {title:"Nav 2", screen:screenHazards},{title:"Nav 3", screen:Screen2} )
 Build your navigation collection when the app starts

Build your navigation collection when the app starts

Step 2: Build Your Gallery

  • Add a Gallery Control to your PowerApp’s screen

  • Set the Gallery’s Items property to:

    • collAppNav

Step 3: Add a Button to your Gallery template

  • Add a Button to the Gallery template

  • Set the Button’s Text property to:

    •  ThisItem.title
  • Set the Button’s OnSelect to:

    • Set(currNav,ThisItem.title);Navigate(ThisItem.screen, Transition.None)
    • This sets a variable that keeps track of the currently selected screen and navigates you to the next screen

 Create a gallery of buttons.

Create a gallery of buttons.

Step 4: Style the Button

  • Set the Button’s Underline property to

  • If(currNav = ThisItem.title, true, false)

Step 5: Copy and Paste the Gallery

Copy and Paste the Gallery onto the other screens in your app.

Conclusion

Nothing too fancy here! Quick and easy navigation for your next PowerApp.