PowerApps: Create a navigation menu using the Gallery Control

In this PowerApps blog, I will explain to you how to create navigation in PowerApps using gallery control. Here we will also maintain the Navigation items in the SharePoint list so that we can make the PowerApps navigation menu dynamic.

If you are new to Microsoft PowerApps, check out an article on Create your First form using Microsoft PowerApps in SharePoint Online.

Create a navigation menu using Gallery Control in PowerApps

Below steps can be followed to create left navigation in the PowerApps form using SharePoint DataSource.

First I have created a SharePoint list named “PatientTab“. This List contains 3 columns:

  • Title
  • Patient Tab
  • Screen Name
powerapps gallery navigation
powerapps gallery navigation

Now, Open PowerApps.com in the browser and sign in with your credentials. Go for the PowerApps Canvas Apps.

Choose the “Blank App” and tablet/phone layout. Our PowerApps designer page will open, in the left side panel we can see by default one screen is present name is Screen1, renamed the Screen1 as “Patient Details Screen“.

powerapps navigation menu
powerapps navigation menu

Add the Gallery control from the “Insert” -> “Gallery“. And then choose “Blank vertical“.

powerapps navigate to another screen
powerapps navigate to another screen

To connect the “Gallery” control to data source Click on “Add an item from the insert tab and connect to data“.

Read Power Apps Button Control

On the right side of the Power Apps gallery control, we can see one Data panel will come. Here Select the data source, I want to show the data from the SharePoint list. So I have selected “SharePoint”.

canvas navigation menu
canvas navigation menu

Now one field will come which is ask for the “SharePoint site” URL. Give the site URL and click on “Connect“.

powerapps select gallery item
powerapps select gallery item

We will see the list of SharePoint site Lists. Choose the List name whose item you want to show in the gallery control. Here My List name is “Patient Tab“. Click on Connect.

powerapps gallery navigation
powerapps gallery navigation

In the properties section of gallery control, we can see “Patient Tab” data source name in the “Items” fields. Choose the Layout field as “Title” from the dropdown option.

In the “Fields” field we can set the column name which column data we want to show in the gallery control. So for that click on “Edit“.

powerapps navigation menu
powerapps navigation menu

In the Title 1 field choose the Column name whose data you want to show. I want to show the “Patient Tab” column value in the gallery control in the PowerApps designer page.

powerapps gallery navigation
powerapps gallery navigation

We can see the gallery control displaying the list “Patient Tab” items. We can set the size of the gallery control item. Select the gallery control item and set the size property value as 14.

powerapps navigation using gallery control
powerapps navigation using gallery control

We can also change the Fill color of the Gallery Control. So in the Fill property I have given the value in the RGBA color code format.

powerapps gallery navigation
powerapps gallery navigation

To change the screen color, Select the screen and in the property, bar chooses the Fill and in the formula bar I have written “WhiteSmoke”. We can give the color code in the RGBA color code or directly the color name like “White smoke”.

powerapps select gallery item
powerapps select gallery item

I have added one rectangle from Insert -> Icons. Then I have added a label control. I have to drag the label control to the rectangle.

I have also changed the label control color as white. In the label control text property, I have written “Patient Details”.

powerapps gallery navigation
powerapps gallery navigation

I am going to create some duplicate screen of “Patient Details Screen”. So for that right click on the screen name. Select the “Duplicate screen”.

powerapps navigation menu
powerapps navigation menu

Like “Patient Details screen” I have created “Patient Admitted Screen”, “Patient Joined Screen” and “Patient Discharge Screen”. I just duplicated the screen of “Patient Details Screen” and rename the screen.

powerapps gallery navigation
powerapps gallery navigation

Now For checking the item of “ScrenName” column is coming from the list or not to the PowerApps form, I have added one label control in the gallery control. In the label control text property, I have written “ThisItem.ScreenName”.

Gallery control each item we can see the “screen names”. To add the label inside the gallery control first we need to select one control which is inside the gallery control then “Insert” -> Label.

canvas navigation menu
canvas navigation menu

In the Gallery control I have selected one item then on the “OnSelect” property I have written:

Switch(ThisItem.ScreenName,"PatientDetails",Navigate('Patient Details Screen',ScreenTransition.None),"PatientAdmitted",Navigate('Patient Admitted Screen',ScreenTransition.None),"PatientJoined",Navigate('Patient Joined Screen',ScreenTransition.None),"PatientDischarge",Navigate('Patient Discharge Screen',ScreenTransition.None)).

I have used the Switch case in the PowerApps form.

powerapps navigate to another screen
powerapps navigate to another screen

Then we need to add the same switch case for all the screen. Then go to preview. When we clicked on the left navigation then the respective screen will come in that page only in the PowerApps form.

We can hide the label control which I have used for checking purpose. To hide the label control select the label control go to Visible property and in the formula bar write false.

powerapps navigate thisitem
powerapps navigate thisitem

The App will appear like below screenshot when we preview the App.

powerapps navigation menu
powerapps navigation menu

You may like following PowerApps tutorials:

In the PowerApps article, we were discussed how to create a powerapps navigation menu using gallery control using SharePoint list data source. We also saw here how to use the switch case statement in the PowerApps form.

  • >