PowerApps Cascading Creating Dropdown and save into List

Introduction

Creating a cascading dropdown is one of the most demanded functionality in PowerApps. The First drop-down values should be prefilled, and the second drop-down values will be populated on the selection of the first drop-down choice value.

In this post, we will see how to create a cascading drop down which could be used in form in PowerApps.

Scenario

We shall see to create cascading drop down which could be used in form. This feature helps to select the drop down value and then filter the value for second drop down so that it is easier to choose and select drop down choice value.

Objective

Creating a cascading drop down and storing the values in SharePoint list. It is one of the most successful and stress free approach in terms of production support. There are various other approaches too for create cascading lookup and save directly lookup value to lookup type column where patch function is written. However, I am storing in single line of text which can save the value using SubmitForm() method itself.

Step 1. Here I have two lists.

The two lists which are shown below will be playing the role of master list and child list which will have the reference of master list.

  • ParentListforLookUp
  • ChildListforCascadingLookUp

The ParentListforLookUp list is having only one Title column and it looks like below:

New

The ChildListforCascadingLookUp list has two columns.

  • Title
  • Country – It is a lookup column to the ParentListforLookUp list.

List

Let us assume that we already know to create the PowerApps canvas app. Choose both the data sources and the main list which will store the requests or we can say which will be used to create the form.

Our main list will have its own fields along with cascading lookup let us name it as CascadingLookup. This is important easiest way to store the value of cascading lookup is in single line of text.

Columns

Step 2. Add all three data sources

Like we know how to add data sources in PowerApps, Add all three datasources so that cascading lookup can be created and lookup value could be saved in the list where we would like to store.

PowerApps 

Step 3. Design the form using main list/CascadingLookup list.

The form looks like below. The form can be built using Edit form and depending upon the UI design or requirement. Here CascadingLookup is the list where the form saved items will be stored. So, the form is built upon CascadingLookup list.

MSFT

Step 4. Add two drop downs for country and state in the form.

Dropdown should be added within the respective datacards. We can delete the single of text datacard or keep it hidden. I generally keep it so that if any use later on, then I do not have to add the datacard and redo anything. I keep it hidden single line of text datacard.

Screens

Step 5. Configure the first Dropdown control.

We can select the dropdown properties and choose the corresponding datasource as shown below.

Card

After selecting the data source, select the column that we would like to populate as shown below.

Tree view

To bind distinct values we can modify the existing formula.

Distinct('ParentListforLookUp',Title)

Step 6. Configure the second Dropdown control.

Configure the second dropdown control just like first one.

Drop down

Apply

Step 7. Add the Cascading lookup logic.

Let's now examine the logic that will be written to connect the State drop-down list to the selected  Country drop-down list.

After choosing the Employee State drop-down selection, enter the following formula in the Items properties.

Filter('ChildListforCascadingLookUp',Country.Value = DdlCountry.Selected.Value)

State

If you want to populate only the distinct values then write the below formula in the Items properties.

Distinct(Filter('ChildListforCascadingLookUp',Country.Value=DdlCountry.Selected.Value),Title)

This is how we have created the cascading lookup in PowerApps app.

Step 8. Save the first dropdown selected value in respective columns in main list.

We can delete the textbox if not required.

Card

Step 9. Save the second dropdown selected value in respective columns in main list.

We can delete the textbox if not required.

Datacard

Step 10. Save the form.

Save

Step 11. Saved entry in the list.

Final

Conclusion

We saw in this article how to create cascading lookup and save in the list with easiest approach.


Similar Articles