Supporters of End User
Web

Browser Based InfoPath 2010 - Creating Cascading Dropdown Fields with no Code

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:Document Library; Libraries and Lists; MOSS; WSS; 2007; 2010; InfoPath 2010; Site Manager/Power User

 

Ever since Microsoft came out with SharePoint it has been difficult to implement cascading drop-down lists (more on what they are, in a minute.) If you ask me, this is nuts! Cascading drop-downs are the bread and butter of easy-to-use forms.

What are cascading drop-downs?

The canonical example of a set of cascading drop-downs is a form that requires the user to add a state and a city. The screen shot below illustrates the point. When the user selects the state of New York, she sees the following cities in the City drop-down: New York, Buffalo, Rochester, Yonkers, Syracuse. However, when she picks Wisconsin as the state, she sees Milwaukee, Madison, Green Bay as the possible cities to choose from. The term "cascading" implies that the contents of the City drop-down depends upon what has been selected in the State drop-down.

2011-03-23-BrowserBasedInfopath-01.png

A Little History

Historically, one had to know quite a bit to implement cascading drop-downs. To my knowledge, there were two ways to create cascading drop-downs:

  1. The traditional "development" approach, which involves back end development and deployment .
  2. The java script approach (No back-end deployment necessary): One keeps the State/City data in a SharePoint list, and use javascript to make calls into SharePoint's web services. The java-script that you must write is fairly intricate. If you want to make your life significantly easier, you can use Marc Anderson's library, SPServices. This approach still involves writing a little bit of javascript, leveraging jQuery, and knowing how to use Marc's SP Services library. It is not rocket science, but it is beyond most business users.

Before describing the no code InfoPath solution, let me point out the advantages and disadvantages of the two above mentioned solutions:

For the traditional development approach there are two big disadvantages:

  1. You must have a .NET developer who understands SharePoint development to create the cascading lists.
  2. You must deploy the solution through the back end. This means that you need access to Central Administration (CA). IT groups can do this, but typical business users cannot.

For the java script approach, there are two advantages:

  1. You can implement this on WSS (the free version of SharePoint 2007) as well as SharePoint Foundation (the free version of SharePoint 2010.)
  2. The other great thing about this approach is it does not require access to the back end (Central Administration). Thus business users who do not have access to the back end can implement this. This is also a good solution if you are renting a SharePoint environment and do not have access to CA, which is quite common.

Cascading Drop-downs using InfoPath 2010

Before you read on, I must tell you that this approach only works if you have the Enterprise version of SharePoint 2010 or the forms server. You will also need to have InfoPath 2010 Designer installed on your client machine. Now that 75% of my readers have dropped off... If you do have the right version installed, then this no code approach is easy to follow.

One great thing about InfoPath 2010 is that you no longer have to create pure InfoPath forms. You can customize the Out-of-the-box native SharePoint forms that are automatically generated when you create any sort of list or document library. So that means we can create two or more cascading drop-downs in a standard New / Edit form for a list or document library.

Let's get started:

Step 1: Create the list of states and cities by creating a custom list. Let's call it States and in addition to the default column called, "Title", let's add City as a new text column. Then let's populate the list with some States and Cities. Below is a screen shot that illustrates the new list. If you are following along, for your convenience I have included an Excel file with some States and Cities: Download States:

2011-03-23-BrowserBasedInfopath-02.png

Step 2: So now that you have created the States list, let's create a new list in which we will give the user a set of cascading drop-down lists. Go ahead and create a custom list and call it List of Accounts, or anything you like. Once you have created the list, you will see that you can launch the InfoPath designer by clicking on the "Customize Form" icon depicted in the screenshot below (marked with a 2 in hand written red ink)

2011-03-23-BrowserBasedInfopath-03.png

Step 3: Once InfoPath designer launches, add a Receive connection to the States SharePoint list.

  1. Click on Manage Data Connections...
  2. Click on Add..
  3. Click on Receive data then on Next
  4. Click on SharePoint Library or list then on Next
  5. Provide the URL of States List then on Next
  6. Pick the States list then on Next
  7. Check off Title and City the click on Next
  8. Then keep going with Next, until you get to Finish.

Click on Manage Data Connections...

2011-03-23-BrowserBasedInfopath-04.png

Click on Add..

2011-03-23-BrowserBasedInfopath-05.png

Click on Receive data

2011-03-23-BrowserBasedInfopath-06.png

Click on SharePoint Library or list

2011-03-23-BrowserBasedInfopath-07.png

Provide the URL of States List

2011-03-23-BrowserBasedInfopath-08.png

Pick the States list

2011-03-23-BrowserBasedInfopath-09.png

Check off Title and City

2011-03-23-BrowserBasedInfopath-10.png

Then keep going with Next, until you get to Finish

2011-03-23-BrowserBasedInfopath-11.png

Now that you have the connection we will create two drop-down lists that leverage this connection.

Step 4: Create two drop-down lists boxes and call the first one State and the other one City. By default InfoPath will call them field 1 and field 2. I renamed them to State and City.

2011-03-23-BrowserBasedInfopath-12.png

NOTE: When you add the drop down list boxes, InfoPath will ask you whether you want to add the choices manually or whether you want to look them up in a list. Pick the Manual Choices. We will set these lists up in a moment.

Step 5: In step 6 we will ensure that the City drop-down lists will work in concert with the State drop-down. In this step we will make sure that the State drop-down gets the list of States.

Right click on the States drop-down, then click on the Drop-Down List Box Properties

2011-03-23-BrowserBasedInfopath-13.png

On the next dialog, make sure your choices look like the ones I have highlighted below. Note that I have checked off the “Show only entries with unique display names.”

2011-03-23-BrowserBasedInfopath-14.png

At this point you can preview the form in InfoPath and see that the first list box is fully operational:

2011-03-23-BrowserBasedInfopath-15.png

Step 6: We are now ready to setup the City drop-down. Bring up the properties dialog for the City drop-down.

2011-03-23-BrowserBasedInfopath-16.png

We will need to make a few adjustments.

Step 6a) For the List Box choices, pick Get choices from an external data source.

Step 6b) For the Data Source, pick States.

Step 6c) Click on the xPath (2011-03-23-BrowserBasedInfopath-17.png) icon to the right of Entries.

Step 6d) Open the dataFields folder and select the item in the folder. Then click on Filter Data…

2011-03-23-BrowserBasedInfopath-18.png

Step 6e) Click on Add

2011-03-23-BrowserBasedInfopath-19.png

Step 6f) make sure Title is selected on the left, then “is equal to”, then pull down the drop-down on the right

2011-03-23-BrowserBasedInfopath-20.png

Step 6g) Pick Select a field or group…

2011-03-23-BrowserBasedInfopath-21.png

Step 6h) On the top, change the drop down from States (Secondary) to Main

2011-03-23-BrowserBasedInfopath-22.png

2011-03-23-BrowserBasedInfopath-23.png

Step 6i) Pick State

2011-03-23-BrowserBasedInfopath-24.png

Click OK, until you are back at the beginning. Now you can preview the form and it works almost perfectly!

2011-03-23-BrowserBasedInfopath-25.png

There is one tiny issue! The city drop down does not clear itself. Therefore if you pick another state, the old city will stay the same as the one you had picked in the earlier pick of the city.

2011-03-23-BrowserBasedInfopath-26.png

We must add a rule to clear the City. This leads us to step 7

Step 7a) Select the City drop-down, and click on the Mange Rules icon in the Home Ribbon

2011-03-23-BrowserBasedInfopath-27.png

Step 7b) Click on the New on the right side

2011-03-23-BrowserBasedInfopath-28.png

Step 7c) Pick Action

2011-03-23-BrowserBasedInfopath-29.png

Step 7d) Click on Set a field’s value

2011-03-23-BrowserBasedInfopath-30.png

Step 7e) Set a field’s value, and then pick City for the field. Leave the Value blank.

2011-03-23-BrowserBasedInfopath-31.png

2011-03-23-BrowserBasedInfopath-32.png

2011-03-23-BrowserBasedInfopath-33.png

Hit OK , and you are done!

You should now have a fully functioning cascading drop-down set of lists.

Acknowledgements:

Many thanks to Marc Anderson and Clayton Cobb for reviewing my document and giving me many good suggestions.

Comments

saumil

hi

simply marvelous!! thx marcel :)

Posted 24-Mar-2011 by saumil
Steven Andrews

Nic article

Nice article, it´s very similar to one I was going to submit to NPSP this weekend, so back to the drawing board. One thing I´d like to get your comments on is what experience you´ve got in applying this to Document Information Panels. I´ve done something similar, but have spent many hours trying to note down a data mismatch when customising a SharePoint generated XSN for a DIP. I´ll try a few things you´ve mentioned here and will get back to you on how it worked out.

Posted 24-Mar-2011 by Steven Andrews
Marcel Meth

InfoPath and the Document Infomation Panel (DIP)

I am pretty sure that in order to deploy a custom DIP with SharePoint 2007, one had to digitally sign the InfoPath form.  I have tried to deploy the 2010 environment without digitally signing.  No luck yet.  I am curious to hear if you have any success.

Posted 24-Mar-2011 by Marcel Meth
Mark Miller

Nice Article

Steven - I'm sure Marcel will agree when I say please continue with your original article. There are always multiple ways to look at a solution. Looking forward to seeing it. -- Mark

Posted 25-Mar-2011 by Mark Miller
Aamir Qureshi

Condition for rule to fire

City drop down is getting cleared and repopulated when state choice changes.  When you try to select a city it throws an error saying “Some rules were not applied” and details are:
An error occurred in the form's rules or code. The number of rule actions or the number of calls to the OnAfterChange event for a single update in the data exceeded the maximum limit.
The rules or code may be causing an infinite loop. To prevent this, ensure that the rule action or event handler does not update the data which causes the same rule action or event handler to execute.
In InfoPath preview mode, as soon as a choice is selected, rule kicks in and try to clear the value and throws the above error. In live mode (published), error does not show but filed gets cleared.
I think there needs to be condition for rule to fire only when selected value in states filed is changed.  Or maybe there is something I am missing or because I am running x64 version of office with 2007 data connectivity pack.

Posted 25-Mar-2011 by Aamir Qureshi
Nickie Holford

Issue with Cascading Drop Down

Hi
 
I've followed your instructions on my lists, however when working in the browser the contents of the 2nd drop down box show but when selected disappear.
 
It also states in the design checker within InfoPath 2010 that this feature may not be supported in web browser forms as the filter is using data from an external source....

Posted 25-Mar-2011 by Nickie Holford
Nickie Holford

Issue with Cascading Drop Down

Hi - scrap last comment, have figured out where I went wrong...cheers :)

Posted 25-Mar-2011 by Nickie Holford
Marcel Meth

RE: NICE ARTICLE

Steven,
 
I completely agree with Mark.  You should write another version of this technique.  I have a good friend who is a psychotherapist and she always says that she loves to hear the same story told by different people because it provides her with a deeper insight into the story.

 
 

Posted 27-Mar-2011 by Marcel Meth
Marcel Meth

RE: Condition for rule to fire

Aamir,
 
I do not see the error message you are getting in Preview mode.  I am running the 32 bit version of InfoPath 2010 as well as the rest of Office.  I cannot imagine that it would hurt to add the condition.  It is my experience that sometime the behavior of 32 bit Office and 64 bit office is different.
 
I have been advised by friends to run the 32 bit version of office, because the 64 bit version does not always work well with add-ons.
 
- Marcel

Posted 27-Mar-2011 by Marcel Meth
Robin Witcher

Using InfoPath 2010, but MOSS2007 will it work?

Have a form that I'm near final testing and this issue is plaguing... can't get the cascaded field to display (in my scenario it's a one-to-one link... the user selects the Job Title and the Job Code should automatically show up (no selection needed))... We are using InfoPath 2010, but have MOSS2007. Is the fact that we are on MOSS2007 the issue?

Posted 31-Mar-2011 by Robin Witcher
Marcel Meth

RE: Using InfoPath 2010, but MOSS2007 will it work?

Robin,
 
Unfortuantely the new functionality is only supported with the new version of SharePoint 2010, which uses the newer forms server.

Posted 06-Apr-2011 by Marcel Meth
Ben

Microsoft says cascading dropdowns not supported in Infopath 2010 web forms.

http://blogs.msdn.com/b/infopath/archive/2006/10/12/cascading-dropdowns-in-browser-forms.aspx
 
I didn't try it yet, but this article might only work with infopath filler, not infopath services.

Posted 13-May-2011 by Ben
Ben

Forget last post.. MS screwed up...

They have their web site branded as Infopath 2010 and the breadcrumb, but the article was created in 2006!!!

Posted 13-May-2011 by Ben
Clint

Your rule at the end isn't quite right... conflicting

Your directions on creating the rule to clear City says to right-click on the "City" dropdown and go to Manage Rules. It should actually say "right-click on "State" instead. If you look at your picture it has the rule being built in State, where it should be. If you missed your picture and only read the text, your rule would clear City every time it's chosen, which is what someone above mentioned. Hopefully this helps avoid confusion.

Posted 13-Jul-2011 by Clint
ceci bela

“Some rules were not applied”

Clint's solution will remove the “Some rules were not applied” error.

Posted 25-Jan-2012 by ceci bela
ceci

InfoPath Designer 2010 message says "By default this control will send data to the server whenever its value changes"

The form is working on infopath when I get an error when publishing on sharepoint. The Design Checker is telling me "The filter expression is on external data and could not be validated. It may not be supported in Web Browsers forms". How can I bypass this problem? I am also getting this working "Control sends data to server when value changes.." have a look http://www.sharepointpromag.com/content/content/126025/Wilansky%20post%205%20figure%201.jpg

Posted 26-Jan-2012 by ceci
Louis

Why is not working on Sharepoint

I am using Enterprise Sharepoint 2010 with InfoPath Designer 2010 as well.
 
Following steps above, I am able to make this work in Preview mode, using Mulitple Select! Works like a perfect.
 
I save it, upload to Sharepoint 2010 without issues, but when I attempt to open web based InfoPath form, I get following error.
 
Error
An unexpected error has occurred.
Troubleshoot issues with Microsoft SharePoint Foundation.
Correlation ID: 74475418-b938-497a-84e0-1778d75151ba
 
Any ideas on what could be happening? It works in Preview, but not in I try to open in Sharepoint

Posted 26-Jan-2012 by Louis
Louis

Why is not working on Sharepoint FOLLOW UP

I switched both controls from Mulitple Select to Drop Downs and it is working now in SharePoint. No error.
 
Sharing with the group, the multiple select option works in Preview, but not within SharePoint. Also, no need for rules, when an item is selected and then un selected, the related field clears itself.
 
Let me know if anyone figuresout how to make Multiselect work in SharePoint as a webform.

Posted 26-Jan-2012 by Louis
Amar

Excellent article (the rule should be on the state)

Thanks for this excellent article. It saved my day.
Just a small correction for the rule. It should be applied on the Statecontrole.
I followed the text and created the rule on the City control. I received the error message.
But then I created the rule on the State Control and everything works.
 

Posted 19-Mar-2012 by Amar
akram

help me

i dont have picture 13 above, why????

Posted 24-Mar-2012 by akram
Eric

A Third Cascading Item?

I have followed your instructions and the first two drop downs work perfectly. Is it possible to add a third cascading drop down based on the second drop down? Select Division, then Region filters to only Regions in that Division (up to here it works), then select a Salesperson drop down that is filtered based on the Region. I used the same logic as above on the third drop down and it just displays blank. Any thoughts? Thanks

Posted 29-Mar-2012 by Eric
Bobby Chang

Re: A Third Cascading Item?

Eric, It is definitely possible to add a 3rd drop-down. It just gets a bit trickier. You have to be careful of the value that you're passing as a filter to the 3rd-drop-down. First step to troubleshoot is to see the actual value of the 2nd drop down. To do so, I recommend binding a calculated value field to this Region data field (aka 2nd drop-down), so you'll be able to see the actual field value. Assuming that in your Salesperson List (aka 3rd List), you have a Lookup field to the Region list, then you're most likely passing the the Region Item ID, instead of the Region Title/Name onto the 3rd drop-down field. If that's the case, you'll need to configure the Data Connection to pass the Title/Name, instead of ID as a drop-down-value. Hope this helps!

Posted 17-Apr-2012 by Bobby Chang
Sri

Is this possible on a SharePoint Library?

Great and well explained post, thank you!
 
I am trying to figure out a solution for the Drop Off Library where when the user selects a Content Type, the fields in the Content Type would be auto populated after the user selects one of the fields. Is it possible for me to implement what you described in my scenario?
 
Thanks!
Sri

Posted 27-Jun-2012 by Sri
silvia

Great tutorial!

I want to thank you for this great tutorial and to Clint for spotting the issue

Posted 11-Mar-2013 by silvia
Nathan Julsrud

Conditional Rule Broken

You have a condition set so that every time City is touched, it will wipe the value of City. This does not work within infopath or in sharepoint. To fix this instead create a rule that fires when the State is changed, to clear the value of City.

Posted 29-May-2013 by Nathan Julsrud
Shiv

Thanks

Saved me a lot of time

Posted 04-Jun-2013 by Shiv
Himanshu

Issues with drop down does not clearing itself

I'm also on 64bit and this has been an issue for me, I've resolved it by adding a simple rule in State - to make the City blank when the State Changes. That resolved the issue and now it makes the City blank, and loads all the cities for the state that the user can select. Hope this helps someone!

Posted 24-Jun-2013 by Himanshu
Sean

This broke after changing the default view!

After the default view was changed, the cascading selection broke. Any ideas?

Posted 12-Jul-2013 by Sean
Michael

Only positive integers allowed

After Following the above to the T
 
I am getting this error on the first field and or second field.  I do not get it for the second field when i use the ID in the value box instead of the way it is displayed.
 
I cannot use the Id on the first field or the error comes up in the second field...
 
Any Ideas to fix this??

Posted 04-Sep-2013 by Michael
Michael

Only positive integers allowed

After Following the above to the T
 
I am getting this error on the first field and or second field.  I do not get it for the second field when i use the ID in the value box instead of the way it is displayed.
 
I cannot use the Id on the first field or the error comes up in the second field...
 
Any Ideas to fix this??

Posted 05-Sep-2013 by Michael
Lieane

thank you thank you

works great! 

Posted 25-Oct-2013 by Lieane
Casey

State not City

I think you meant to add the rule to the STATE field, not the city field. Correct? It works for me when applied to state.

Posted 29-Oct-2013 by Casey
Robin

One issue with my data source

The above set of steps is very simple and easy to follow, many thanks. I have created the cascading list to work exactly how i want, with one issue. In my data source the opening field is a lookup to another list and when i select it, all i get is the numnerical ID of that field, not the text.
 
I have a Customer list where the customer company name is a free text entry
I then have a Customer contact list to hold information about individuals in an organisation that looks up the Customer organisation in the first list.
In a third calendar list i want the user to first select the Customer organisation which then informs the filter to just the applicable options for individuals in that organisation
 
Do you have any suggestions to help? I think i need to do something in the data source but open to ideas.

Posted 08-Nov-2013 by Robin
Charlene

Question

I have no problem with created the dropdowns However, what I do have an issue with is being able to add a new item in sharepoint.
 
After I use my custom form and place it on the screen there is not longer a Add new item. How can this issue be fixed? I still need the add new item button. Is there something in infopath that will solve this issue? I have looked but unable to locate.

Posted 06-Dec-2013 by Charlene
Namasivayam

Typo Error!

Hi, I noticed one typo error. Please correct me if I am wrong. In Step 7a) Select the "City" drop-down, and click on the Mange Rules icon in the Home Ribbon has to be changed to "Select the "State" drop-down, and click on the Mange Rules icon in the Home Ribbon"

Posted 31-Dec-2013 by Namasivayam
Namasivayam

Typo Error!

I noticed one typo error. Please correct me if I am wrong. In Step 7a) Select the "City" drop-down, and click on the Mange Rules icon in the Home Ribbon has to be changed to "Select the "State" drop-down, and click on the Mange Rules icon in the Home Ribbon"

Posted 31-Dec-2013 by Namasivayam
Namasivayam

Typo Error!

I noticed one typo error. Please correct me if I am wrong. In Step 7a) Select the "City" drop-down, and click on the Mange Rules icon in the Home Ribbon has to be changed to Select the "State" drop-down, and click on the Mange Rules icon in the Home Ribbon

Posted 31-Dec-2013 by Namasivayam
Namasivayam

Typo Error

I noticed one typo error. Please correct me if I am wrong. In Step 7a) Select the "City" drop-down, and click on the Mange Rules icon in the Home Ribbon has to be changed to Select the "State" drop-down, and click on the Mange Rules icon in the Home Ribbon

Posted 31-Dec-2013 by Namasivayam
Ben van den Berg

Get Critical Error from the Web Browser when published

Works great in InfoPath Preview, but as soon as I publish the changed form to SharePoint 2010, and open it in IE 11 32bit, I get Critical Error! "Object doesn't support property or method 'addEventListner'" Did any-one came across this error and perhaps know how I could get it resolved?

Posted 17-Jan-2014 by Ben van den Berg
Ben van den Berg

Get Critical Error from the Web Browser when published

Works great in InfoPath Preview, but as soon as I publish the changed form to SharePoint 2010, and open it in IE 11 32bit, I get Critical Error! "Object doesn't support property or method 'addEventListner'" Did any-one came across this error and perhaps know how I could get it resolved?

Posted 17-Jan-2014 by Ben van den Berg
Ben van den Berg

Error when published form opens in browser

Works great in InfoPath Preview, but as soon as I publish the changed form to SharePoint 2010, and open it in IE 11 32bit, I get Critical Error! "Object doesn't support property or method 'addEventListner'" Did any-one came across this error and perhaps know how I could get it resolved?

Posted 17-Jan-2014 by Ben van den Berg
Ben van den Berg

Error when published form opens in browser

Works great in InfoPath Preview, but as soon as I publish the changed form to SharePoint 2010, and open it in IE 11 32bit, I get Critical Error! "Object doesn't support property or method 'addEventListner'" Did any-one came across this error and perhaps know how I could get it resolved?

Posted 17-Jan-2014 by Ben van den Berg
Fran

Fix for Event Listener Error

Add this script just above the closing tag on the Master Page.

Posted 05-Feb-2014 by Fran
Larry W. Virden

Need help on setting up one of these

Your article is quite well written. I was able to walk through all the steps you wrote about, using of course my own set of controls.
 
However, for some reason, my filtered drop down has what appears to be 0 entries being displayed instead of the dozens of entries I was expecting.
 
I am certain I did something wrong, but I have gone over your article many times and still cannot figure out why my drop down is empty.
 
Is there anything that can be done to troubleshoot this sort of problem?

Posted 11-Mar-2014 by Larry W. Virden

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: