Implement Cascading Drop Down For Forms in SharePoint 2010
24 November, 2011
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:
- InfoPath list forms.
- 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.
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.
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.
Next add some rooms to the Room list.
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.
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.
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.
Once you click on Customize Form it will open up in InfoPath.
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.
First we need to add a new data source so click on Add next to Data Source,
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.
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.
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.
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.
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.
To add a filter click the Add button and then select the Filter Conditions.
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”.
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.
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.
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.
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.
Then it’s simply a case of selecting Room for the Field and leaving the Value blank.
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.
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.
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.