Cascading Drop Downs with InfoPath Forms Server and SmartObjects

tmil — Thu, 06 Sep 2007 22:39:00 GMT

One of the features that I use frequently with InfoPath is the ability to do filters on a data source. This allows me to create multiple dropdown box controls that drive the content of each successive drop down box. For example, I create two dropdown boxes that are called “State” and “City”. Selecting the state in the first drop down box returns a filtered list of cities within that state to the second dropdown box. This is a simple but powerful feature that is used quite frequently when developing InfoPath forms. Unfortunately, filters are not supported in browser based forms. To work around this, a developer would typically create a web service that returns the list of cities based on the selected value of the “State” dropdown box. I personally feel that if I’m going to need to write code to do this, why am I even using InfoPath at this point?

SmartObjects can be used to achieve this functionality without writing any code. The following example uses two smart objects called Cities and States. The InfoPath form will contain two dropdown boxes. Selecting the state in the first dropdown box will populate the second box with the appropriate list of cities.

1. Create a new InfoPath form and save it locally. Enable the check box to only allow browser-compatible features.

2. Navigate to the location where you saved the form template (.xsn). Right click on the file and choose “Integrate with SmartObject”.

3. Add the GetList method for both the Cities Object and the States Object. Please refer to the BlackPearl documentation for more information.

4. Click Tools è Form options and add a rule to run the States_GetList query when the form opens. This will be used to retrieve a list of states to populate the first dropdown box.

5. Open the form in design mode and create two dropdown boxes; one for “City” and one for “State”.

6. Edit the properties of the “State”. Change the Data Source to use the States_GetList method. Drill into the Schema until the ReturnProperties node is visible. I have set the value to be the StateID field, which is a unique field in my SmartObject. The display name in this example is set to be the StateName field. Do the same thing for the “Cities” dropdown box.

Everything to this point has been configured using standard InfoPath features with a bit of exposure to smart objects. This is the part where we can use the SmartObject’s GetList method to return only the data that we want from the second object.

1. Open the “State” dropdown box properties and create a rule that set’s the value of the State input parameters of the Cities_GetList secondary datasource equal to the “State” dropdown box.

2. The second part of this rule will be to run the Cities_GetList method AFTER the value has been set on the input parameter.

Click here for video

You have now setup a group of cascading list boxes. This scenario is used repeatedly throughout form design to help guide a user through their choices and to ensure that they are only entering data that is relevant to the form. I personally feel this is easier than setting up filters using InfoPath. The concepts here can easily be applied to more complex scenarios. I hope this has been helpful.

Tom's Random Thoughts

Cascading Drop Downs with InfoPath Forms Server and SmartObjects