Skip to content
Home » Create a cascading dropdown in Power Apps

Create a cascading dropdown in Power Apps

Creating a cascading dropdown or dependent dropdown allows users to select values in one dropdown and filter the records in another dropdown for those selected records.

For example, select a country to filter all the states belong to that country and then further, select the state to filter all the cities belong to that state.




Here, we have a SharePoint List named Masters. It contains, Country wise state and city data.

Creating a cascading dropdowns

Now, we will add three dropdown lists Country, State and City and make them cascading dropdown lists. So that, when you select any country in country dropdown, all the records in state dropdown get filtered for the selected country.

Similarly, when you select any state in state dropdown, all the records in the city dropdown get filtered for selected state.

Log into Power apps portal, and a create a blank canvas app.

Named it Cascading demo and click on Create button.

Next, click on Skip button.

Now, add a data source. Click on Data button, then click on Add data button.

Next, select a data source. In our case, it is SharePoint list. Search for SharePoint in search bar and select it.

After that, connect to SharePoint site for that provide URL then click on Connect button.

Next, it asks you to select lists from available lists. Select the list that you want to add and click on Connect button.

Now, add three dropdowns. Go to Insert tab, then search for Drop Down and select the Drop Down control.

Now select the first dropdown control and named it drp_country.

Similarly, one by one select remaining dropdown controls and named them drp_state, and drp_city.

Now, select the country dropdown and set it’s Item property to Master which is our SharePoint list and Value property to Country as we want to show countries in this dropdown.

Now, when you see the preview you will get duplicate countries in dropdown.




We need to select unique countries, for this go to Item property of dropdown and write below code.

Distinct(
Masters,
Country
)

Now, you will see it shows unique countries as shown below.

Next, define the property for State dropdown.

Select the State dropdown and set it’s Item property to Master which is SharePoint list and It’s Value property to State as we want to show states in this dropdown.

Next, click on Depends On link.

In Parent Control, select drp_country which is name of country dropdown control and Value.

In Matching field, select data as Masters, and Value that we want to match with the value in Parent control which is Country.

After that, click on Apply button. Now, take a look at the code generated for Items property in formula bar.

Filter the records in List Masters for country selected in country dropdown, and return  only those states which belongs to selected country.

Filter(Masters, Country = drp_country.Selected.Value)

Now, we need to modify this code. As it will return a duplicate states.

Distinct(
Filter(
Masters,
Country = drp_country.Selected.Value
),
State
)

Now, run the app. You can see, when you select country India, the state dropdown showing only those states which belong to India.

And when you select country Canada, the state dropdown showing only those states which belong to Canada.

Next, we will define the property for City dropdown.

Select the City dropdown and set it’s Item property to Master which is SharePoint list and Its Value property to City as we want to show cities in dropdown.

Next, click on Depends On link.

In Parent Control, select drp_State which is name of state dropdown control and Value.




In Matching field select data as Masters, and Value that we wan to match with the value in Parent control which is State.

Next, click on Apply button.

Now, you can run the app and validate the functionality of cascading dropdowns.

You can see, for selected country, states get filtered in state dropdown for selected country and then for selected state, cities get filtered in city dropdown for selected state.

Also Read..

Create a variables in Power Apps

Collection in Power Apps

ClearCollect function in Power Apps

Highlight selected item in gallery

Email validation in Power Apps

Sort Items in gallery Power Apps

Change Item color in gallery based on value

Loading

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.