Tutorial Blog: Creating a Reusable PowerApps Navigation Menu Component

Introduction

Microsoft’s PowerApps allows anyone to create simple, low-code solutions quickly. PowerApps is a fantastic solution for addressing many companies’ various internal business needs and allows for rapid prototyping and deployment. However, PowerApps certainly has its own learning curve, whether you have no coding background or are an experienced developer. Due to its focus on allowing users to build low-code applications, much of the building process is done through an extensive user interface, and the code that one may have to write is in a pseudocode-like functions library unique to PowerApps. While many of the tasks that are common to any application can be easily discovered through experimentation alone, some tasks that one may think would be simple can take a little more effort. Take, for example, the focus of this tutorial blog: a quickly and easily reusable navigation menu. Almost any website or application on the web these days has their own version of a navigation menu. With an element like this that is used on almost every single webpage, it must be able to be quickly reusable and updated without needing to make changes to each webpage. While this navigation menu can be custom-built on each screen in a PowerApps app if it is small enough, this will quickly become cumbersome if the application begins expanding and including more pages. This is where a reusable navigation menu comes into play! In this tutorial blog, we will be stepping through the processes necessary to create a PowerApps navigation menu component that can be placed onto any page quickly and updated easily. We will be covering the following topics in order to complete this task:

• Creating A New PowerApps Canvas App
• Creating the Application’s Screens
• Creating the Navigation Menu Collection
• Building the Navigation Menu Component
• Implementing into the Application’s Screens

Creating a New PowerApps Canvas App

Throughout this tutorial, we will be approaching each step assuming you have nothing previously established and are following the tutorial from scratch. However, if you do already have an application established, you can modify the steps as necessary to meet your specific needs.

The first step is to create a new PowerApps canvas application using the following simple steps:

• Navigate to https://make.powerapps.com/home and sign into your account.
• Select Create in the left navigation menu and select the Canvas App from Blank tile to create a new canvas application.
• Give your application a name (may I suggest HelloWord, TestApp, or UntitledProject1), then click Create.

Creating the Application’s Screens

With a blank canvas application now created, set up what screens are going to be in the navigation menu. As mentioned before, if you already have an application and your screens created, then you can skip this step. However, for this example, we will be creating three example screens.

•  Navigate to the Home tab, select the New screen dropdown, and select the Sidebar layout screen.
•  In the Tree View pane on the left, click the ellipses on the new screen, select Rename, and name this screen scrHome.
•  Repeat this process an additional two times, naming the screens scrPageOne and scrPageTwo
•  Delete the initial screen Screen1, as that is not needed.

Creating the Navigation Menu Collection

With a canvas application now created and your application’s screens set up, create a collection of all the screens in your application that will be a part of your navigation menu. A Collection in PowerApps is a group of similar items that are stored inside the application itself when it is run. This is a way of managing simple data without having to worry about storing that data in an outside resource that you must then connect to. Our collection will be storing the display name of our screens and a reference to the screen itself and will be created when the application is first accessed.

•  In the Tree View pane on the left, select the top-most row App to focus on the entire application.
•  In the App Object pane on the right, switch to the Advanced tab.
•  Inside the application’s OnStart function, write the following code:

When the application is run, we will be creating our navigation menu’s collection! But what in the heck did we just do, and what does it all mean? If you are unfamiliar with programming languages, let’s look over the code we just wrote and break down what it means and what it is doing:

• This code utilizes the Collect function, which creates a new collection in the application. The first parameter passed into this function is the name you would like to give the collection, and all parameters following that are objects that are inserted into that collection.
• An object is recognized by the { } characters, and anything inside these brackets is a property of that object. In our case, we have two properties inside the objects of this collection. The first is ScreenName, which is the user-friendly display name of the screen we are referencing. The second is Screen which is an actual reference to the screen itself. Be careful to note that the name is enclosed in quotes to signify that it should be interpreted as plaintext. However, the screen itself is referenced without quotes, so the compiler will recognize this as a reference to the screen object itself.
• Finally, this code is being written in the application’s OnStart function. Implied by the name, this is a function that is carried out when the application is first started up. That means any code we put into this function will be executed only once, when the application starts. Since the navigation menu will not be updating during any point of running the application, this is the perfect place to compile our collection!

Run the application using the Preview icon in the top-right to run the application (or F5) to create the collection for the first time. After exiting out of the application preview, verify that the collection was created by choosing File in the top-left and selecting Collections in the left menu. Here we should be able to see our newly-created collection with the items inside it. Once you create and initialize the navigation menu collection you can build out the actual navigation menu component itself!

Building the Navigation Menu Component

Everything is now set up and ready for us to create the navigation menu inside a component. But what is a component? In PowerApps, a component is similar to a screen in that it can contain all of the same elements as a screen. However, a component, as the name implies, is just a self-contained portion that can be placed inside a section of a larger screen. A component cannot be viewed in the application, it must instead be placed inside a screen. Components are perfect for sections in an application that will be reused multiple times between different pages, such as a navigation menu!

• In the Tree View pane on the left, switch to the Components tab.
• Select New Component and rename the component to cmpNavMenu.

First, we need to set up the various aesthetic properties of the component to get it properly formatted:

• In the Component pane on the right, enter a width of 400.
• Select a color in the Fill option that suits your application’s design.
• We next need to set the height to be responsive to the application’s height
  • In the Property dropdown near the top-left, select Height.
  • In the Function (fx) box near the top-middle, enter App.DesignHeight. This will set the height of the component to the same height as the application, allowing it to respond to different screen sizes.

With the styling and properties of the component now set up, add a list that contains all the items inside the navigation menu’s collection:

• Switch to the Insert tab at the top.
• Select the Gallery option and choose the Vertical gallery.
• Using the circles around the gallery, resize it to cover the entirety of the component.
• In the Gallery pane on the right, select the Data source dropdown, and select the collNavMenuItems collection to populate the gallery with that collection.
• In the Layout dropdown, select only Title.

And just like that, we now have a list of all our screens we wanted in the navigation menu! Our final step in creating this component is to add the functionality to navigate to the desired page:

• In the Tree View pane on the left, select the Gallery under the cmpNavMenu.
• In the Gallery pane on the right, switch to the Advanced tab.
• Inside the gallery’s OnSelect function, write the following code: Navigate(ThisItem.Screen, None);.
• Repeat this process for the NextArrow and Title items inside the gallery as well.

Remember that this list was created using the collection of objects we created in the previous step, meaning each row in this list contains the same properties we specified in that collection. This allows us to reference the Screen property that we established and use that inside the Navigate function anytime the row, title or arrow is clicked, which will go to the screen that is passed into the function.

Everything is now in place and a reusable navigation menu component has been created! All that is left is to properly style the component to match your application’s user interface design (if you are not starting from scratch) and place this component inside our application’s screens.

Implementing into the Application’s Screens

With all the heavy lifting completed, the final step is to add the component to our screens.

• In the Tree View pane on the left, navigate through and select scrHome -> ScreenContainer -> SidebarContainer.
• Switch to the Insert tab at the top, select Custom, and select cmpNavMenu in the list of available components.
• In the Component pane on the right, select the far right Stretch option for the property Align in container, then switch the Minimum width property back to 400.
• Finally, switch the Flexible height property to On, ensuring that the component will always match the height of the application.
• Repeat this process for scrPageOne and scrPageTwo.

Conclusion

And with that, you now have a fully reusable navigation menu component that you can quickly drop into any new screen that you add to your application! If you run the application now using the Preview icon in the top-right (or F5), you should be able to select any of the screens in the navigation menu and the application will switch to that screen.

Going forward, if you ever want to add a new screen to your navigation menu, all you have to do is go back to the OnStart function of the application and add a new object into the existing Collect function with the corresponding properties to match the new screen. Remember, the screen must exist prior to doing this, otherwise the compiler will not be able to recognize the screen you are attempting to reference, as it does not exist.

Happy building with Microsoft’s PowerApps!