How to create Cascading Dropdowns for SharePoint 2010 using InfoPath

Couple of weeks ago, I had to do some form customizations for a client SharePoint 2010 PoC. Due to time limitations I had no chance to do any coding, which lead to find the solutions using customizations only.

One of those customizations which took some time to figure out was to create Cascading Dropdowns for SharePoint 2010 lists. At first, It really sounds like simple, however as requirements get more complex, it really gets though to get the job done w/o any coding.

In this post, i’ll try to share some of my findings on creating cascading dropdowns. As for our demo scenario, we have a custom list to hold some Assets. However, we want to include some extra filters to see our company assets, such as office, asset location, …etc. This means first user will select office – New York, Boston, Toronto, … – and then location for the asset such as first floor, second floor, …etc. Based on those selections, assets falling into that criteria will be listed. Classic scenario..!!! Here is how you do this by customizing your New/Edit forms using InfoPath 2010 in SharePoint 2010.

You can find all screens of this process in the following presentation:

CascadingDropDowns

1. Now, let’s get started. Here is our initial New Form.

2.In the ribbon menu, click ‘Customiza Form’ button. This will open up InfoPath 2010.

3. Insert couple of rows for additional filter fields – Office and Location.

4. Add new fields to filter based on Office and Location.

   

5. Drag and drop Office and Location fields onto the form, where you created additional rows.

6. Change text boxes to drop downs.

7. So far, we created necessary UI elements and fields to hold filter values. Now add a data connection to fill those drop downs.

 

    

    

8. Data bind Office field to new data source.

   

9. Data bind Location field to new data source.

  

10. Having our fields data-bound, so far we have additional Office and Location fields on the form which are being loaded w/o any filter applied.

Now we come to fun part of this post. “How to filter Location values based on Office selection?”

Since we will apply on Location drop down, go to Location drop down properties and start applying filter as shown in below screens.

  

Add a new filter for Location field.

Specify filter condition. Usually this is the part things get confusing. But it’s not confusing at all.

Just speak the condition out loud:

“Filter condition is… Filter Location based on Office value… Which Office value???…”

“Filter Location where Office value coming from data source is equal to Office value coming from UI Office drop down…”

11. Now click Ok to close all windows. Our cascading dropdowns are ready! Preview changes we’ve made.

Select ‘New York’ as Office.

Location values for New York office is shown!!!

Now that concludes this post. Another addition to this can be setting some field values in UI based on drop down selections. For this you need to add a rule which has an action item attached to it. I’ll try to show that one in another post.

zieglers