SharePoint Starter Series: How to create a cascading dropdown list in InfoPath

One of the most common questions in SharePoint is how you can create a cascading dropdown list. There are a few ways to do this. You could use the excellent SPServices library and let that script handle it or in SharePoint 2010 you can use InfoPath.

In SharePoint 2010 one of the new features are the possibility to edit the input forms in InfoPath.

In my example we created 3 lists:

  • Products (custom list)
    • Title column
      image
  • Types (custom list)
    • Title column
    • Product column: lookup to Products list
      image
  • Orders (custom list)
    • Title column
    • Product column: lookup to Products list
    • Producttype: lookup to Types list
      image

 

We want to use a cascading lookup in the Orders input form. You edit the form by clicking the InfoPath button in the ribbon of the list.

image

We want to change the input form so that we can select a product (Car or Bike) and then see the types (Peugeot, Porsche, …)

Therefore we need to add a new data connection that can read data from the Types list. We will use this data connection instead of the default one that is already added. We will filter the custom data connection by the value we are selecting in the Product list.

Adding a new data connection

To add a new data connection click the “Data Connections” button in the Data tab in the ribbon.

image

Click the “Add” button to add a new one:

image

The new data connection must receive data, select this option:

image

image

Select “SharePoint library or list” and in the next window you add the url to the SharePoint site where the list can be found. Next you select the list (Types):

image

Now you select the columns of the list we will need. Choose Title and Product and sort the items by Title.

image

Give the data connection a new in the next screen (I used Types1) and click Finish. Now we create the data connection.

Change the default datasource

By default there is already a data connection linked to the dropdown control on your page. We have to change this.

Therefore we edit the properties of the control.

image

We select our newly created data connection: Types1

image

 

NOTE: Choose d:ID as Value en d:Title as Display name (not as shown in the screenshot above)

To filter the values you click the button next to the Entries textbox.

image

Click the “Filter Data” button and add a new filter:

image

We want to filter the list by the Product column where the Product value must be equal to the value of another field (Products) on our form. Select “field or group”.

Select the main data connection as source and select the Product column:

image

Click “OK” a few time to confirm all you settings and you are ready.

image

Now you publish the form to you list and you can start using it.