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

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“.

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

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”.

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

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.

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“.

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.

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.

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.

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”.

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”.

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”.

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.

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.

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.

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.

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

You may like following PowerApps tutorials:

• How to Create CSV in SharePoint using PowerApps and Power Automate
• PowerApps Lower, Upper, and Proper function
• PowerApps Combobox Control
• PowerApps Navigate to another screen
• Build PowerApps Quiz App – Step by Step
• PowerApps Sum function (Get sum of a column PowerApps)
• PowerApps upload file to SharePoint document library
• PowerApps Gallery Control Filter Example
• PowerApps Get Current User (ID, EMail, Department, Location, Photo, etc)
• PowerApps send email on submit
• PowerApps Email Attachment Control – How to Use
• PowerApps Microphone Control – How to use
• Power Apps RSS Feed

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.