Quickly learn SharePoint cascading dropdown in PowerApps

 13,016 total views,  1 views today

In this SharePoint cascading dropdown in PowerApps article, we will learn how to create a cascading dropdown list in PowerApps using SharePoint, which populates the child dropdown list item based on the parent dropdown list selection. For example, displaying the value of the state in the child dropdown list based on the parent country dropdown list selection This scenario is very useful for any type of data entry form. By the way, we should know what a cascading dropdown list is.

SharePoint cascading dropdown in PowerApps: What you will learn from this article?

We will learn how to implement cascading dropdown lists in PowerApps using the SharePoint list data connection.

What is cascading dropdown list?

It is a parent-child relationship between the two drop-down lists. The items in the second dropdown list (child dropdown) will be populated based on the selections in the parent dropdown list. Generally, by default, the child dropdown list will be populated by the filter of the first item in the parent dropdown.

Cascading dropdown list in PowerApps – Demo step by step.

Here we assume that you have read our previous articles on PowerApps and have some fair idea of PowerApps development, like how to develop an app, how to create a data connection in PowerApps, etc.

Below is the demo, where we have seen that based on the country dropdown list selection, in the second dropdown list, the state values get populated.

Note:

• In the above demo, we have selected a country like India from the first drop-down list, and then automatically all states from India are populated in the second drop-down list (of course, this is based on the country and state configured in the SharePoint list). Here for India, only two states, “Karnataka” and “Kerala,” are being populated because in the SharePoint list for India, only “Karnataka” and “Kerala” are configured.

Step1:

Let’s create the below two lists:

• Country
• State
• Employee (Optional, if you want to create an employee data entry form, then you can create this list otherwise not needed.)

Country list structure:

State list structure:

Country lookup column structure in SharePoint:

Country list data for cascading dropdown:

State list data for cascading dropdown:

Now, we are done with the SharePoint part.

PowerApps part: Implement cascading dropdown list in PowerApps:

Create a Canvas app from the PowerApps app maker tool (here we assumed that you know how to create a Canvas app).

Design the cascading dropdown list canvas app in PowerApps:

Add two dropdown list controls for the country and state from the insert input section.

Add a data connection to the SharePoint Online list where we need to select the “country” and “state” lists.

Note:

• Here the “Country” and  “State” lists are appended with “1” because already there was a connection with the same name.
• If you don’t know how to create a data connection to the SharePoint Online list, please refer to our previous article – Connect to a SharePoint list in PowerApps step by step

Country cascading dropdown list design in PowerApps:

Select the country dropdown list.

Go to the “properties” tab from the right-side panel.

From the “Items” selection, select the data connection “Country_1” which is a SharePoint data connection.

Select the “Title” column as the value (in the SharePoint Country list, Title was mapped with the country name).

State cascading dropdown list design in PowerApps:

Select the state dropdown list.

Go to the “properties” tab from the right-side panel.

From the “Items” selection, select the data connection “State_2” which is a SharePoint data connection.

Select the “Title” column as the value.

And configure the depends on as a “ddlConutry” (which is the parent country dropdown list).

State cascading dropdown list design in PowerApps

Finally, for the items property of state dropdown list add the below in the Fx:

Filter(State_2, Country.Value=ddlCountry.Selected.Title)

That’s it, now just preview the app and see the magic, based on country selection, the state value will be changed in the second dropdown list.

Note:

• In the above demo, we have selected the country as the USA from the first drop-down list, and then automatically all states from the USA will be populated in the second drop-down list (of course, this is based on the country and state configured in the SharePoint list). Here for the USA, only one state, “NJ,” is being populated because in the SharePoint for the USA, only “NJ” is configured.
• In the end, we have noticed that “PowerApps” has been misspelt as “PowerApps” in the demo; it will take a lot of time to fix the image file, so pardon us for this.

Summary: What we had here (SharePoint cascading dropdown in PowerApps)?

Thus, in this article, we have learned the following with respect to implementing the cascading dropdown list in PowerApps using the SharePoint Online list data:

• What is a cascading dropdown list?
• Use cascade dropdown lists.
• How to implement cascading dropdown lists in PowerApps using the SharePoint list item
• How do I use the filter function in the PowerApps drop-down list?
• How do I configure the parent-child relationship in the PowerApps dropdown list?
• How do I create a lookup column in the SharePoint list?
• How do I configure the parent-child column relationship in the SharePoint Online list?
• How to implement the PowerApps filter dropdown based on another dropdown

See Also: PowerApps Tutorial

You may also like the below PowerApps articles:

• CRUD operations in PowerApps using SharePoint online list
• CRUD Operation in PowerApps Using Excel OneDrive
• Phone number and email validation in PowerApps
• Connect to a SharePoint list in PowerApps step by step
• Collection variable in PowerApps
• Understand the difference between Set and UpdateContext function
• String concatenation function in PowerApps
• 3 ways to create Power Apps – Types of Power Apps
• Overview view of PowerApps development environment in Power Platform
• Customize SharePoint List Forms Using PowerApps step by step – Office 365
• Create free development environment using Power Apps Community Plan

Buy SharePoint Online eBook

Buy the premium version of SharePoint Online & Office 365 administration eBook from here:

Reference URL

• Create dependent drop-down lists in a canvas app

About Post Author

Global SharePoint

SharePoint Specialist (2019 | 2016 | 2013 | 2010 | 2007 | SharePoint Online | Microsoft 365)

See author's posts