Cascading dropdown in PowerApps using SharePoint data

SharePoint cascading dropdown in PowerApps

No comments

 1,341 total views,  9 views today

In this SharePoint cascading dropdown in PowerApps article, we will learn how to create cascading dropdown list in PowerApps using SharePoint, which is populating 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 cascading dropdown list is.

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

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

What is cascading dropdown list?

It is a parent-child relationship between the two dropdown lists. The second dropdown list (child dropdown) items will be populated based on the selection 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, have some fair idea on PowerApps development like how to develop an app, how to create data connection in PowerApps, etc.

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

Cascading dropdown list in PowerApps using SharePoint list - Demo
Cascading dropdown list in PowerApps using SharePoint list – Demo

Note:

  • In the above demo, we have selected a country like India from the first dropdown list, then automatically all states from India are populated in the second dropdown list (of course this is based on the country and state configured in the SharePoint list). Here for India, only two states that are “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:

Country list structure in cascading dropdown list
Country list structure in cascading dropdown list

State list structure:

State list structure in cascading dropdown list
State list structure in cascading dropdown list

Country lookup column structure in SharePoint:

Country lookup column structure in SharePoint
Country lookup column structure in SharePoint

Country list data for cascading dropdown:

Country list data for cascading dropdown
Country list data for cascading dropdown

State list data for cascading dropdown:

State 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 control 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 about 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
Design the dependent dropdown list canvas app in PowerApps
Design the cascading dropdown list canvas app in PowerApps

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 SharePoint Country list, Title was mapped with the country name).

Dependent dropdown list design in PowerApps
Country cascading dropdown list design in PowerApps

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

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)
Dependent drop-down lists in PowerApps
Configure depends on parent control for filter data in PowerApps

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

Dependent dropdown list in PowerApps - Demo
Cascading dropdown list in PowerApps – Demo

Note:

  • In the above demo, we have selected country as the USA from the first dropdown list, then automatically all states from the USA will be populated in the second dropdown list (of course this is based on the country and state configured in the SharePoint list). Here for the USA, only one states that “NJ” is being populated because in the SharePoint for the USA only “NJ” is configured.
  • In the end, we have noticed that the “PowerApps” has been misspelled as “PowerAps” 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?

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

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

See Also

You may also like the below PowerApps articles:

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


Buy SharePoint Online & Office 365 Administration eBook

Reference URL