Implement Cascading Drop Down For Forms in SharePoint 2010

24 November, 2011 · 7 minutes to read

Implement Cascading Drop Down For Forms in SharePoint 2010

What are Cascading Drop Downs and why do we want them?

Cascading drop downs are where you have linked drop down boxes where the contents of the second drop down depends on the selection of the first one. They are used to target selections and make choosing them much easier. The canonical example is choosing a city where in the first drop down you choose the county/state and the second drop down is then filtered to the list of cities actually in that county/state.

SharePoint Support

SharePoint 2007 didn't natively support cascading drop downs in list forms. There were a couple of workarounds which either involve adding a solution onto the server or building a JavaScript version using the SharePoint web services.

However, in SharePoint 2010 Enterprise version, you can implement Cascading Drop Downs out of the box with no code. The 2 features which make this possible are:

  1. InfoPath list forms.
  2. Browser based support for the cascading drop downs in InfoPath 2010.

How to Implement Cascading Drop Downs

 

Before you begin make sure that the site collection feature "SharePoint Server Enterprise Site Collection features" is activated or you won't have support for InfoPath forms.

enterpriseFeature

 

1. Create the Lists

 

Firstly you need to create 2 lists to store the sites and the room. So create a custom list called Site and add some values to it, in this case I chosen Centre, East and West. No additional columns are required.

sites

Next create a custom list called Room and add a lookup column to the Site list. This column should be required and link to the Title column in the site list.

createSiteColumn

 

Next add some rooms to the Room list.

Room

Now we need to create the actual after school activities list. This can contain whatever columns you require for its use, but also a site a room column which are lookups to the Site and Room lists. Here's the list with a couple of entries in.

activities

Now when we Add a new item you can see that the room drop down contains all the possible values, no matter what the site selection is.

newActivity

2. Link the Room Drop Down to the Site Drop Down

 

Now we need to modify the form so the the room drop down depends on the site drop down. To enable this select the list tab in the ribbon and click Customize Form. For this you need InfoPath 2010 installed on your machine to edit the form. Once the form is published your users do not need InfoPath installed locally.

customizeForm

Once you click on Customize Form it will open up in InfoPath.

form

There's now several steps to go through to enable the cascading drop downs. In a nutshell you create a new data source pulling from the room list, then add a filter on the Room drop down to only show items from the room list with the same site as that in the Site drop down.

Create the Data Source

First of all right click on the Room drop down and select Drop-Down List Properties to bring up the properties for the drop down.

InitialDropDownProperties

First we need to add a new data source so click on Add next to Data Source,

AddDropDownProperties

and step through the wizard. You want to create a new connection to receive data i.e. the defaults, and select the source of the data to be SharePoint library of list.

ddwizard1
ddwizard2

 

 

Next you select the location of the site which as we opened from within SharePoint should be already correctly prefilled, and in the next step select the Room list.

ddwizard3
ddwizard4

In the next step you need to select the fields you want from the data source. You need to select the ID field as that is the actual value written to the activity room column, the Title column to display and the Site column for the data to filter on. You can sort on any column you want, but in this case only Title makes any sense. You can then choose to store the data in the form template for offline mode, but this generally isn't required.

ddwizard5
ddwizard6

 

 

 

Finally you need to choose a name for the data connection. As long as it's descriptive and unique it doesn't matter what you choose. The default name is the name of the list with a 1 on the end. When you finish you'll be taken back to the properties form where the name of the data source will have been changed to the new one you have just created.

ddwizard7

Filter the Values

Next we need to filter the values in the Room drop down based on the selected Site. To start this we click on the button next to the Entries value, then on the Select a Field or Group window click on Filter Data at the bottom.

filter1
filter2

 

 

To add a filter click the Add button and then select the Filter Conditions.

filter3

For the filter we are looking to create one which limits the data to only those rows which have the Site value equal to the selected Site i.e. the site from the main data in the form. To generate this the filter needs to be "Site" "is equal to" "Select a field or Group".

filter4

 

This will pop up another window to Select a Field or Group. You need to change the Fields drop down to Main and then select the data field Site. Finally click OK and the result will display Site in the third drop down in the Specify Filter Conditions window.

filter5
filter6

Click OK to go back to the Filter Data window, OK to go back to the Select a Field or Group window and then OK again to go back to the Drop Down Properties Window.

filter7

 

 

Finally in the drop down List Box Properties you need to change the Value to d:ID by selecting it via the button to the right. This is because internally the lookup value stored is actually the ID in the lookup table. If you leave it as d:Title you will get an error when you try to save the list item. Once this is done click OK.

ddFinal

 

Final Touches

At this point you can publish the form and you will have a working cascading drop down. When you select a site the room drop down will be populated with the appropriate rooms. However, there are a couple of problems with it. Firstly, the Room value is not cleared when changing the Site. As the room value will not be in the filter for the new site value it will get changed to the id value which will be confusing for your users. Secondly if the Site is not a required field the Room Drop Down is still enabled if there is no Site chosen.

Both of these can be resolved with rules.

Clear Room Value When Site Changes

To clear the room value when the site changes you need to add a rule to the site field. In InfoPath select the site field then, from the ribbon use Add Rule | This Field Changes | Set a field's Value.

clear1

Then it's simply a case of selecting Room for the Field and leaving the Value blank.

clear2

Publish the form and test - It's as simple as that.

Disable Room Drop Down When No Site Selected

To disable the Room Drop Down again add a rule, but this time you need to add a conditional formatting rule. To add this select the Room field and then from the ribbon select Manage Rules. This will open the Rules side bar. From this side bar select New | Formatting. This will then add the formatting options to the side bar.

disable1
disable2

Choose a suitable name for the rule then click on the "None" under condition. This will open the Condition window which is very similar to the Filter Condition one before. This time we choose "Site" "is equal to" and "Use a Formula". The Insert Formula windows pops up and just enter "" for an empty string.

disable3
disable4

 

 

Once you click OK to save the condition, just select "Disable this control" in the side bar and we are done. Publish the form and test, this time the room drop down will be disabled when no site has been selected.

 

Conclusion

SharePoint 2010 Enterprise Edition allows us to easily create powerful InfoPath forms incorporating cascading drop downs without any code or installing any additional solutions onto the server.

Richard Willis headshot

Written by Richard Willis

Managing Director / Founder

Richard started SalamanderSoft in 2007 after a successful career as a software developer. Wanting to start his own company and with experience in integrating school systems he set out to build the best integration system for schools and to exceed customer expectations. He starting out on his own, doing all the coding, support and sales until finally the growing number of customers meant he needed to start growing the team. He is still heavily involved in coding the core Integration Suite product in addition to running the company and being the first point of contact for prospective customers.

Copyright © 2020 SalamanderSoft Limited