/ Microsoft / Cascading drop down controls in Microsoft PowerApps integrated with Microsoft SharePoint Online

Cascading drop down controls in Microsoft PowerApps integrated with Microsoft SharePoint Online

Learn, share and spread knowledge

cascading drop down list/lookup is a series of dependent drop down controls in which one drop down control depends on the parent or previous drop down controls. The items in the drop down control are populated or filtered based on an item that is selected by the user from another drop down control.

Cascading drop down is very usual requirement in application or web development. It is used to make the application and selection of data from lookup/dropdown easy for the user. It makes the application user friendly and make it easy for user to select options. As you select the value in the drop down, the next drop down will be shortlisted or populated by the choice of another drop down.

Microsoft PowerApps gives the option to insert the drop down controls in the app, but don’t give the ability to insert cascading drop down directly. Developer have to do it using their programming skills. I am created this tutorial after I have successfully developed the cascading drop down controls for the app. I am sharing the knowledge so the Microsoft PowerApps developer should easily get knowledge from the tutorial and develop it for their own apps rather than wasting time on research.

Scenario:

I have two Microsoft SharePoint 365 lists as follows:

  1. Timesheet
  2. Categories

I have to get data from Categories for cascading drop down and insert the data of the form into the Timesheet list.

Categories have three columns:

  1. Main Category
  2. Activity Category
  3. Sub Category

From the Microsoft SharePoint Timesheet list, click the button create an app, it will automatically create the application and place the fields etc. in the Application automatically that would be bind with the Timesheet list (as I have to insert data into the timesheet list). There will three fields from Timesheet list’s columns that are:

  1. Main Category
  2. Activity Category
  3. Sub Category

Note: Both lists have same column names. Categories list will give data for drop downs and Timesheet list will store data that will be selected in the app.

Now, follow the following steps:

  1. Add another data source in Microsoft PowerApps from Microsoft SharePoint i.e. Categories list.
  2. Select the card which contains the Main Category data field in the Microsoft PowerApps (that comes automatically when the app is generated).
  3. Insert drop down from Insert->Controls->Drop down into the card which you have selected
  4. Repeat this for Activity Category and Sub Category
  5. Give every drop down a name as follows:
    1. ddMainCategory
    2. ddActivityCategory
    3. ddSubCategory

Select ddMainCategory, go to advance, go to Data, and add the following code in Items:

Distinct(Categories,’Main Category’)

It will bring data of Main Category column from the Categories list of Microsoft SharePoint 365.

Select ddActivityCategory, go to advance, go to Data, and add the following code in Items:

Distinct(Filter(Categories, Title = ddMainCategory.Selected.Value),’Activity Category’)

It will bring data of Activity Category column filters on the basis of ddMainCategory drop down value from the Categories list of Microsoft SharePoint 365.

Select ddSubCategory, go to advance, go to Data, and add the following code in Items:

Distinct(Filter(Categories,’Main Category’ = ddMainCategory.Selected.Value &&’Activity Category’=ddActivityCategory.Selected.Value).’Sub Category’,’Sub Category’)

It will bring data of Sub Category column filters on the basis of ddMainCategory & ddActivityCategory drop down values from the Categories list of Microsoft SharePoint 365.

For now, the data will be populated from the Categories list into the Drop down controls that you have inserted that are: ddMainCategory, ddActivityCategory & ddSubCategory.

Now you have to bring data from drop down controls into the text fields that were generated automatically (when you have created Microsoft PowerApps app from Microsoft SharePoint 365 list) so that you would not have need to save the data into the Timesheet list of Microsoft SharePoint 365 again by doing coding/programming. For this, you have to do the following:

Select the text field of Main Category, go to Advanced, go to Data, and add the following code in default:

ddMainCategory.Selected.Value

Scroll down and go to Visible under Design heading. Change it’s value from true to false.

Now select the text field of Activity Category, go to Advanced, go to Data, and add the following code in default:

ddActivityCategory.Selected.Value

Scroll down and go to Visible under Design heading. Change it’s value from true to false.

Now select the text field of Sub Category, go to Advanced, go to Data, and add the following code in default:

ddSubCategory.Selected.Value

Scroll down and go to Visible under Design heading. Change it’s value from true to false.

Now, whatever you would select from the drop down controls, the value will be initialized in the text field and when you will save the record, the data will be inserted into the Timesheet list of the Microsoft SharePoint 365.

Note: Follow the steps carefully and you will be able to create an App to punch the Timesheet. If you will find any ambiguity, error or better solution, feel free to comment and discuss.

GitHub: Click here

Success is not final, failure is not fatal: it is the courage to continue that counts. – Winston Churchill

 

0 POST COMMENT

Send Us A Message Here

Your email address will not be published. Required fields are marked *