Abdurrahman's Blog

InfoPath – Connecting two List Boxes to Reflect Parent-Child Relationship

If you're designing an InfoPath form, and need to connect two list boxes so that one reflects on the value chosen in the other, then you need to utilize InfoPath filters. Filters allow you to include a subset of the values taken from a given data source, to simplify form filling, or to reflect a business logic, like selecting a product under a given category.

The following will establish the steps required to do so. I'm taking the example of two list boxes that enable the user to choose a category of products, and then choose a specific product in that category. I'll be using declarative features of InfoPath, without the need to write any code.

Step 1: Create XML file to store your Category and Product Data:
Create a new XML file using notepad, or any XML editor, and type the following:

<ProductsCategories>
<categories>
    <category CatID="X">Category X</category>
    <category CatID="Y">Category Y</category>
    <category CatID="Z">Category Z</category>
</categories>
<products>
    <product CatID="X" ProdID="1">Product X.1</product>
    <product CatID="X" ProdID="2">Product X.2</product>
    <product CatID="X" ProdID="3">Product X.3</product>
    <product CatID="Y" ProdID="1">Product Y.1</product>
    <product CatID="Y" ProdID="2">Product Y.2</product>
    <product CatID="Z" ProdID="1">Product Z.1</product>
    <product CatID="Z" ProdID="2">Product Z.2</product>
    <product CatID="Z" ProdID="3">Product Z.3</product>
    <product CatID="Z" ProdID="4">Product Z.4</product>
</products>
</ProductsCategories>

Save the file under the name: prodcats.xml. We will use this file to build a data connection later.

Step 2: Design a New Form Template:
Start InfoPath 2007, and design a form with two list box controls. We are not going to use manually entered data, as InfoPath filters does not support filtering on manual entries. We are going to link the two list boxes to an external XML data source.

Step 3: Create an XML Data Connection to get Category and Product Data:

1. Go to Tools -> Data Connections…
2. Click Add, and choose Create New Connection to: Retrieve Data.
3. Click Next
4. Select XML Document as the source of data. Click Next.
5. Browse for the XML file you created in Step 1: prodcats.xml, and click Next.
6. You can choose to Access the data from the specified location, to allow you to dynamically change the values directly in the XML file. If you're going to use this option, then it's required to have a publically accessible location like a web server or a file share.
7. You can also check Store a copy of the data for offline use, to not to require online connections to the XML file.
8. Click Next, and then type a name to identify this data connection, and then click Finish.

Step 4: Link list boxes to the external XML data source

1. Double click the Category control, to show its properties.
2. In the List box entries section, under Data tab. Choose Look up values from an external source.
3. In Data Source drop-down, choose Categories and Products that you've created in the previous step.
4. Select XPath for the Entries to choose a specific field in XML. This is the little icon beside the Entries field.
5. In the Select a Field or Group Dialogue, drill down in the XML data, and choose category. Click OK.
6. Select XPath for the Value field. This time choose CatID, under category. Click OK.
7. Do the same for Product control, but this time, choose product for the Entries and ProdID for the Value.

With the above steps, we have set the two list boxes to retrieve their list items from XML. The Category control will show: Category X, Category Y, and Category Z.
The problem with Product control is that it'll show all of the products regardless of the selected category.

The following step will show you how to filter data in Product control, according to the selected value in Category control.

Step 5: Filter Data for the Product List Box:

1. Double click on Product control, to show its properties.
2. In the List box entries section, click Select XPath icon beside Entries Field.
3. In the Select a Field or Group dialogue, Click Filter Data.
4. Click Add, to add a new filter.
5. Choose CatID, the first drop-down. Choose "is equal to" in the second.
6. In the third drop-down list, choose Select a field or group.
7. Point to the Main data source, and pick the Category field. Click OK.
8. Click OK, to close the Specify Filter Conditions.
9. Click OK, to close the Filter Data.
10. Click OK, to close your selection for Entries from the XML data.
11. For the Value field, choose ProdID from the XML data source.
12. OK to the list box properties.

Now, the Product control will show only items under the selected category.

Step 6: Apply a rule, to reset Product Control when Category control has no value selected:

1. Go to Category control properties.
2. Click on Rules, and click Add.
3. Give a meaningful name for the rule. Example is: Reset Products if Category is Blank.
4. Set Condition, and choose of Category is blank.
5. Add Action, choose Set a field's value. Pick the Product field, and leave the value empty.
6. Click OK, three times.

Preview the form, to see that whenever you choose a category, only those products that belong to the category will show in the Product drop-down list.

Note:
One list cosmetic action will be writing a piece of code and attach it to the Changed event of Category control. This will enable you to avoid strange values in Product when the user changes the category.