4,669 total views, 46 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.
- 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.
Let’s create the below two lists:
- 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 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.
- 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
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).
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:
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.
- 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?
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