Create Cascading Dropdown in Browser enabled InfoPath form using InfoPath 2010


In this post you will learn how we to create the cascading dropdown in browser enabled InfoPath form. As many of us know that in Office InfoPath 2007 it is very difficult to create the cascading dropdown without writing any single line of code but in InfoPath 2010 we can create without any code.

First create one List in SharePoint 2010 named with “CascadingDemo”. Create two column named with “Organization” and “Department”. Insert some sample data into the list as show in the screen:

CascadingDemo

In this list we have some organization that have different department. For example OrganizationA has two department like DepartmentA and DepartmentB. and OrganizationB has three department like DepartmentA, DepartmentB and DepartmentC.

Now we need to design the InfoPath form. So We need to Open the Microsoft InfoPath Designer 2010 and create a blank form. Make sure that form has “Web Browser Form”. See the screen shot below:

Advance Option

WebForm

Now we need to create the Secondary Data Source to connect to SharePoint list.

Click on the data tab and then click on “From SharePoint List” under the ribbon.

Provide the name of the site where you want to connect to the SharePoint List.

Select the SharePoint Site

Now we need to select the list from where we want to fetch the data.

Select the List

Now we need to select the column from which we need information. So I selected the organization and department. And sorting the data by the Organization in ascending order. Then click next.

Select the column

Next

Provide the name of the Data Connection and click on finished.

Finished

Now create the form which contains the two dropdown one for Organization and one for Department.

FormUI

Now we need to bind the dropdown with the Secondary Database.

Select on the Organization dropdown and go to the “Dropdown List box properties”. Bind the dropdown with the secondary data source. See the screenshot for more information.

Organization

Now our main work begin from here to bind the “Department” dropdown. So that value shall be displayed based on the selection of “Organization” dropdown.

Select the “Department”dropdown and go to the properties. Select the secondary data source. Expand the “entries” section and select the “Department” node. Now most of us know that filter is not supported into the browser enable InfoPath form in MOSS 2007. but in SharePoint 2010 we can filter the data. So select the Department node and click on the filter data.

Select Department Node

Now click on the “Add” button. and specify the filter condition.

Select  if  “Organization” is equal to “Select the field or group”. Click on the  “Select a field or group” section from the dropdown.Refer the screenshot as display below:

Filter data

Now select the “Main” from the dropdown and select the organization node then click on the ok button.

Select Condition from main datasource

So we have set the rule that Select the department if “Organization” from the secondary data source is equal to “Organization” of main data source.

Now we are assuming that you have basic knowledge of the InfoPath form so you know the steps to publish the form.

For publishing the form you can go under the file tab and from the info section you can click the “Published the form”. and follow the instruction and form will be published into the SharePoint library. Here I have given the library name as “CascadingDemoSampleLib”.

Click on the New document so you will see the InfoPath form. Please see the screen shot :

From Sample

Form Sample 1

From Sample 2

From Sample 3

So We can create the cascading dropdown without writing any code in InfoPath designer 2010.  This is possible due to filter support in InfoPath 2010 for browser enabled form.

I hope you will enjoy this. 

Comments (20)

  1. Thank you for making this simple and clear.  

  2. Interestng.  I've struggled with this previously.  Thanks for posting.

  3. Peter H says:

    It would seem that this functionality does not work with SharePoint Online and InfoPath 2013.

  4. Bernie Restauro says:

    Hi Peter,

    Cascading drop downs do work with SharePoint Online and Infopath

  5. Charlene says:

    I understand the instructions but I have three columns I need this to work with and I am struggling. For example I need to be on a page… Select country  then state  then city. For some reason I can't get this to work

  6. Ben says:

    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?

  7. Roc says:

    I successfully created four cascading drop down lists in an InfoPath form. I published it to a SharePoint 2010 list and all was well. Then thinking to save time I added some additional lists again using the Drop-Down List control and entered the choices manually.

    When I attempted to publish the form again SharePoint refused my form because supposedly SharePoint 10 and InfoPath support only 8 lookups. Apparently manual choices lists count against the 8 ceiling.

    Is this true and is there away to get past this artificial limit via InfoPath. By the way I have tried to make work several Sharepoint cascading drop down list solutions such as http://spcascade.org/ so far without success.

  8. Christina says:

    I did everything it says.  It allows me to select from the first list but then gives me an error of "must be positive integer."  The field is a text field (single line).  Also, is there a way to validate that if someone goes back and changes the organization, it will clear out the department?

  9. MAnish says:

    Roc, What issue you getting with spcascade.org?

  10. azu says:

    Lookup Plus  for SharePoint 2013, It is more than Sharepoint Lookup. Cascaded Lookup, Filtered lookup, Cross-site Lookup /drop down/ and

    some controls are free.  ("Create new item" link) Visit, http://www.azu.mn

    Or watch the channel http://www.youtube.com/watch

  11. Gaurav says:

    Works on infopath preview the cacading and rules. When i publish it says success but when i open the sharepoint list it doesnt reflect any of the changes or rules i added

  12. art user says:

    Can I base the condition of the second cascading list on a text field instead of another list. For example, I have a field that gets the username of the user and populates the "username" field: I then want to show the options on the cascading list based on who the username is. So, I don't want two drop downs, but instead, a text field and a list.

  13. dave c says:

    Did anyone get the multiple level cascading lookups working?

  14. lisa says:

    pour la 2 eme liste déroulante j'ai cette erreur  «doit être un entier positif."

    c'est quoi le probléme

  15. Ash says:

    This worked for me. Thanks. I initially had several duplicates of the OrganisationA and OrganisationB appearing in the first drop-down. But then I looked at the properties of the first drop-down list and chose the option at the bottom: Show only entries with unique display names. Then the cascading list worked as expected.

  16. Felipe says:

    Can we create a drop down of Links?

  17. Davy says:

    This is not working.  I have two columns, Phases and Tasks.  Every phase has a set of tasks that are associated with it.  I followed all the instructions and did this several times; however, I still get the full list of tasks, regardless of my Phase selection.

    1. Lucian Hij says:

      I thing you forgot that in filter step for the second column (equals to) you need to choose the column from “MAIN” field.

    2. Brian says:

      All, I got this to work in InfoPath 2013. One thing to note following the instructions provided, they are a little different for 2013 from 2013, but just a little different. I got this to work when placing the drop down listboxes on the form by selecting the Enter choices manually radio button and not the Look up choices from a sharepoint list. Then follow the instructions listed above. Change the list box choices by selecting the radio Get choices from an external data source. The difference that I saw from doing it the other way, was that the data type of the drop down is different. This way they are of type ChoiceType and the other way is of type LookupType.

      Anyway, hope that this might help some of you.

Skip to main content