PowerApps Dynamic Navigation Tutorial – Part 1

Canvas PowerApps Navigation

As app makers create more complex PowerApps, the need to navigate a user across the various screens in the app becomes a necessity. A lot can be taken from the web design world in how we can provide this experience. Two common patterns that we can take are the persistent side-navigation bar and the drop-drop menu that can be shown/hidden from the top of the screen.

The base way to provide this is to create buttons / icons to represent each screen and then copy-pasta them onto each screen. The headache quickly arises as you continue to develop and either create more screens, change the name of one of the screens, or change anything with the navigation in general. You will have to delete these components from all the other screens, make all the updates on one, and then copy-pasta to all of the other ones again. This is the pain-point that this tutorial tries to tackle and help developers work through.

Tutorial Overview

The first part of this tutorial will guide you through the following:

1. Constructing two common patterns of navigation used in web/app development:
   1. side navigation
   2. drop-down navigation
2. Creating a collection to store the navigation information in so that it is centralized and only requires one update.
3. Hooking up a gallery to represent the menu buttons and the collection instead of having a button for each screen.
4. Implementing a User-Experience that helps the user understand where they are and is intuitive for them to navigate elsewhere.

Part 2 Coming Soon!

Look out for Part 2 of this tutorial where I will show you how to take these patterns and implement a re-usable canvas-component that can be re-used on each screen. Instead of copying the group of components, you only need one, and even better, it updates automatically!

You can check out the other PowerApp related content we have published by navigating to our blog here.