How to create Cascading (Dependent) Dropdowns in Power Apps

hello everyone reza here i would like to wish you and your family a very happy new year in this video we will look at how to create cascading controls in powerapps we will create these dependent drop down controls or combo box controls inside and outside of a form control experience and patch the data back to our data source so let's check it out in action [Music] cascading drop downs are controls that are dependent upon one another for example for vehicles we have the make of a specific vehicle upon selection of the make the model information associated with the selected make will be loaded in the model drop down and upon selection of a model the available colors specific to this make and model combination would be loaded in the colors drop down here when i submit the data i am using the patch function in powerapps to patch the data captured directly in my back-end data source which in this case is the sharepoint list on the other side i have leveraged the powerapps form control and here as well i've created the cascading drop down behavior i'll go ahead and submit this data which will be captured in my backend sharepoint list so let's see how we can create this cascading form experience for both patch and form control from scratch for this scenario i have a list in sharepoint called cascading data this list has three columns the title column that i have renamed to country type text state type text city type text this information is what i will capture in another list called information wherein i have four columns all of type text title country state and city in my power app i have gone ahead and connected to both of those sharepoint lists to create the cascading drop downs for country state and city i will head over to insert go to input and select drop down for the drop down control under advanced i will search for a property called allow empty selection and i will turn this to true for the items property of the drop down control this is my country drop down so i need a list of all the country information from my cascading data list and i would like the distinct values of the countries to get that i will use the formula distinct of my cascading data list and here i would like to get the distinct values from my title column which has the country information the distinct function returns a data type of table it will have one column called a result and it will have all the distinct values in that specific column for the drop down control under properties the value make sure this one is set to result if i preview the app this will load all the distinct country values from my cascading data list if you would like to sort these in alphabetical order i can use the sort function sort column result now if i preview the app i will have the country values sorted alphabetically i've gone ahead and inserted a label country next i need to add my drop downs for state and city i will select the country drop down copy this and paste it two times this one i have renamed to drp state and this one i will rename to drp city now for the state drop down control i will remove the items formula for the items property i will straight away go and pick my cascading data list and then we have an option here called depends on so i'll select this this drop down control depends upon the selected value in the country drop down so the country drop down control the result of it i would like to match it with my cascading data list and the column that i would like to match it with is my title column since the title column has the country information i will go ahead and click apply the moment i do this it will go ahead and add this filter function to the items property for my state drop down items property for the state drop down now will contain only the data where the country is usa and in there i need the value of the state column and that too i need to ensure that it is distinct so once again i will add the distinct formula and i will select the column state so the final output of this is once again the result column which has my states listed out if i would like to sort this sort the result column now if i preview the app once i pick the country usa it will list out all the states in ascending order related to usa if i change this to india it will list out all the states related to the country india that i have stored in my cascading drop down list and now for the city drop down i will remove the function and the items property the items property i will pick cascading data i will once again select depends on the city will be dependent upon the state value that has been selected so for this i will use my drop down state the result column and match this with the state column in my cascading data list i will click apply and this now will give me all the cities related to the selected state now the city values in my backend list i know that they are all going to be unique so there is no need for me to apply the distinct value here and for my city drop down control the value property make sure it is set to city so if i preview this this will show me all the cities that are in texas if i change this to california it will list out all the cities that are in california and so and so forth now this information is what i would like to post or patch to my list called information and here i have another column called title and title is a column of type text so here i will insert a text box control which will allow the user to enter the title information next i'll add a button on select of this button i would like to go ahead and patch this data to my data source so on the on select function my formula would be patch my list which is the information list i want to create a new record so i'll use the defaults function defaults off my list called information now i can define all the columns that i would like to patch my title column will be the title text box dot text my country column which is of type text in this list would have its value coming from the drop down control for country dot selected dot result on very similar lines i'll put the value for state and finally for city it would be the city drop down dot selected dot the column which is city i'll close the curly braces close the round braces and this is what my patch function looks like now once i fill this form out and click submit this data will be posted to my data source which is my sharepoint list and here's the entry that has come in next let's try and create cascading drop downs a form control experience here i have a screen that is showcasing the data from my information list in a gallery and i have another screen where i would like to place the form control so the user can create edit or view the data to do that i will insert the edit form experience my data source would be my information list this will go and load the fields all of my cascading columns country state and city are text columns and that's why the form control is presenting them in the form of a text box control now let's see how we can change this behavior to a cascading drop down experience let's begin with the country column for the country card i will head over to advanced and unlock the data card the text box control for country i will select it and delete it this will lead to a few errors which we will fix shortly next i need my drop down control for my countries to do that i will head over to insert go to input and pick a drop down control i've gone ahead and renamed this to drp country info now the errors that we are getting if i head over to edit and formula bar this error is related to the control which was the text box control that we deleted wherever i have these references that are erroring out i will replace this reference with the new drop down control name that i just added so this will fix the issue with relation to the y property of the card and the next issue is related to the update property of the card this one for now i'm going to set this to empty i will set the allow empty selection to true for the drop down control for the items property we will use distinct of my cascading data list and the country information is coming from the title column for my country data card the update property i will set this as my drop down control that i added dot selected dot result and the default value for my country drop down would be parent dot default i will head over to the next data card which is my state data card and once again i will unlock this data card and delete the text control i will go to insert a drop down control rename this control for the errors i will go and fix it same as before give the reference to the drop down control the update value i'll set it to empty for now for the state drop down allow empty selection will be true the items will be coming from my cascading data list the value depends on here i will pick my country info drop down controls result and the matching field will be the cascading data lists title property since that's where my country information is stored once i have that here i would like to then perform a distinct function on the state column for my state data card the update value will be my drop down control for state dot selected dot result and the default value for my state drop down control will be parent dot default if i preview this once i pick a country it will load the dependent states of that country and finally for the city data card here we will do something different first i will unlock this data card delete the text now drop down control does not have the feature of searching information maybe i have a lot of values related to cities i want to give a search experience instead of using a drop down control this time i will insert a combo box control and you can do the same thing for state and country as well i have renamed this control to cb combobox city i'll go and fix the two errors the update property keep it empty for now for the city information the data source would be cascading data depends on the state drop down controls result value and i will match this with my cascading data lists state field i will click apply for the combobox control since this is going to show me the city information make sure the display fields and the search fields has the specific column you want to show and allow the user to search upon select multiple for my combo box control i'm going to turn this to false if i preview this app and if i pick the state texas this should load all the cities related to texas because it's a combo box control i have the searching feature right here so if i search for let's say austin it will show me that specific value so i can select that for the city data card the update property would be my combobox control dot selected dot city and the default selected items property of the combo box control will be my column city colon parent dot default my gallery control is showcasing the data from my information list my form control the item property i have set it to my gallery control dot selected so when i navigate the user from a selection that they make in the gallery control i am resetting the form setting the form to edit mode and navigating the user to my phone screen that shows the specific record that was selected and if the user clicks on this plus icon i am setting the mode of the form to new and then navigating the user to that form the submit button will submit the form and on the on success property of the form control i will navigate the user back to my home screen so let's try this out i will add new student information this loads my form in new mode i'll enter the name pick the country pick the state these are dependent drop downs or combo box controls i'll pick the city and i will go ahead and submit this data the data gets posted to my backend data source we can see that information right here and if i make a selection of a specific record it will populate my form in edit mode for that specific record that i selected and default the values of my controls which were my drop down controls or combo boxes to the entered values once again if i make a change since these are dependent controls you can see how the values are changing depending upon the selections that i make once i have made the changes i can click submit and the updated information now gets stored in my backend sharepoint list i hope you enjoyed this video if you did then do like comment and subscribe to my youtube channel and thank you so much for watching

Channel: Reza Dorrani

Views: 139,916

Keywords: dependent, multiple dependent drop down lists, drop down, microsoft, tutorial, how to, powerapps dropdown, powerapps, power apps, learn powerapps, powerapps tutorial, powerapps sort, powerapps distinct, powerapps cascading dropdown, powerapps cascading dropdown default to blank, reza dorrani, powerapps cascading dropdown sharepoint list, powerapps dependent dropdown, cascading, powerapps cascading combobox, powerapps cascading dropdown distinct, powerapps cascading dropdown choices

Id: Qzpjq008cBY

Length: 17min 21sec (1041 seconds)

Published: Mon Jan 03 2022