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:

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:

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.

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

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.

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

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

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.

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.

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:

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

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 :

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.