Create a Cascading List from a Hierarchical Data Source - Greg Collins
in

InfoPath Dev

This Blog

Syndication

Greg Collins

Create a Cascading List from a Hierarchical Data Source

It is common to need two or more list boxes where the choices in one are dependant on the value of another. This is known as a cascading list. A cascade can occur with as few as two levels up to any number of levels. Some common scenarios which require cascading lists are:

  • Location: State / City
  • Vehicle: Year / Make / Model
  • School: Year / Semester / Class / Instructor

As the number of levels in the cascade increases, so does the complexity of the process and work involved. Also, if the cascading list is presented inside of a repeating table or repeating section you must account for another issue: data crossover. Repeating cascading lists are covered in Create a Repeating Cascading List from a Flat Data Source and Create a Repeating Cascading List from a Hierarchical Data Source.

In this task we will create a hierarchical secondary data source containing the values used to populate our lists. We will then create a three-level non-repeating cascading list using drop-down list boxes. We create three levels of cascade to reveal the compounding complexity involved for level three and beyond. And finally, we ensure valid selection combinations by clearing selected list values as selections earlier in the cascade are changed.


THE HIERARCHICAL SECONDARY DATA SOURCE

Hierarchical data sources are commonly created for use in XML, and are typically more structured and organized than a flat data source. There are numerous ways to organize the hierarchy; we have arbitrarily chosen a structure that suits this task. The hierarchical structure normally ensures that only unique values appear each list. If, however, you find that filtering for unique values is still needed, refer to Display Only Unique Options in a List. Let's start by creating the hierarchical secondary data source.

Create the hierarchical secondary data source:

Copy the following code into a text editor, and then save the file as Vehicles - Hierarchical Data Source.xml. This file will be used as a secondary data source in our form.

<?xml version="1.0" encoding="UTF-8"?>
<Vehicles>
    <Year value="1963">
        <Make value="Chevrolet">
            <Model value="Corvette"/>
            <Model value="Nova"/>
        </Make>
        <Make value="Porsche">
            <Model value="356"/>
            <Model value="Carrera"/>
        </Make>
    </Year>
    <Year value="1973">
        <Make value="Ford">
            <Model value="Bronco"/>
            <Model value="Mustang"/>
            <Model value="Pinto"/>
        </Make>
        <Make value="Toyota">
            <Model value="Celica"/>
            <Model value="Land Cruiser"/>
        </Make>
    </Year>
    <Year value="1979">
        <Make value="Jaguar">
            <Model value="XJ6"/>
        </Make>
        <Make value="Pontiac">
            <Model value="Trans Am"/>
        </Make>
        <Make value="Volvo">
            <Model value="240"/>
            <Model value="244DL"/>
        </Make>
    </Year>
    <Year value="1987">
        <Make value="Dodge">
            <Model value="Ram Charger"/>
            <Model value="Grand Caravan"/>
        </Make>
        <Make value="Honda">
            <Model value="Civic"/>
            <Model value="Prelude"/>
        </Make>
        <Make value="Nissan">
            <Model value="300ZX"/>
            <Model value="Pulsar"/>
            <Model value="Sentra"/>
        </Make>
    </Year>
    <Year value="1999">
        <Make value="GMC">
            <Model value="Jimmy"/>
            <Model value="Sierra 2500 HD"/>
            <Model value="Yukon"/>
        </Make>
        <Make value="Honda">
            <Model value="Passport"/>
            <Model value="Prelude"/>
            <Model value="CR-V"/>
        </Make>
        <Make value="Jeep">
            <Model value="Cherokee"/>
        </Make>
        <Make value="Mercury">
            <Model value="Grand Marquis"/>
            <Model value="Sable"/>
            <Model value="Villager"/>
        </Make>
        <Make value="Pontiac">
            <Model value="Firebird"/>
            <Model value="Montana"/>
            <Model value="Sunfire"/>
        </Make>
    </Year>
    <Year value="2003">
        <Make value="Dodge">
            <Model value="Dakota"/>
            <Model value="Caravan"/>
            <Model value="Ram Charger"/>
            <Model value="Viper"/>
        </Make>
        <Make value="Mercury">
            <Model value="Sable"/>
        </Make>
    </Year>
    <Year value="2004">
        <Make value="Dodge">
            <Model value="Stratus"/>
            <Model value="Viper"/>
        </Make>
        <Make value="Ford">
            <Model value="Crown Victoria"/>
            <Model value="F250"/>
            <Model value="Thunderbird"/>
        </Make>
        <Make value="GMC">
            <Model value="Sierra 3500"/>
        </Make>
        <Make value="Jeep">
            <Model value="Grand Cherokee"/>
            <Model value="Liberty"/>
        </Make>
    </Year>
</Vehicles>


THE FORM

Now that we have our hierarchical secondary data source we are ready to create our form. First we will design a simple schema to support a three-level cascading list. Then we will design the layout using drop-down list boxes. When the layout is complete we will focus on creating the cascade.

Add the secondary data source to a form:

  1. Design a new blank form.
  2. Choose Data Connections from the Tools menu, and then click Add.
  3. In the Data Connection Wizard, select Receive Data, and then click Next.
  4. Select XML Document, and then click Next.
  5. Click Browse, locate and select the Vehicles - Hierarchical Data Source.xml file, click Open, and then click Next.
  6. Click Finish, click Yes, and then click Close.

Create the schema:

  1. Open the Data Source task pane.
  2. Add a Group named Vehicle.
  3. Select the Vehicle group, and then add three Text Fields named Year, Make, and Model.

Design the view:

  1. Insert a 1x3 layout table into the view.
  2. From left to right, insert the Year, Make, and Model fields as Drop-Down List Boxes into the cells of the layout table, as shown in Figure 1.


Figure 1. Layout of the cascading drop-down list boxes.


THE CASCADING LISTS

With the form layout complete we will now turn our attention to the meat of the task: making one list cascade off of another. The process is not very difficult, but can become increasingly complex as the number of cascade levels increases. Creating a cascade requires the use of filters. The options displayed in one list box are filtered based on values selected in earlier list boxes. Let's populate each drop-down list box using our secondary data source and create the cascade filters.

Populate the Year drop-down list:

  1. Double-click the Year drop-down list box.
  2. In the Drop-Down List Box Properties dialog box select Look Up Values In A Data Connection.
  3. Select Vehicles - Hierarchical Data Source from the Data Connection drop-down list.
  4. Click the Select XPath button to the right of the Entries text box, and then select Vehicles/Year/value, and then click OK twice to close the open dialog boxes.

Populate the Make drop-down list:

  1. Double-click the Make drop-down list box.
  2. In the Drop-Down List Box Properties dialog box select Look Up Values In A Data Connection.
  3. Select Vehicles - Hierarchical Data Source from the Data Connection drop-down list.
  4. Click the Select XPath button to the right of the Entries text box, and then select Vehicles/Year/Make/value.

Filter the Make drop-down list based on the selected Year:

  1. Click Filter Data, and then click Add.
  2. In the Specify Filter Conditions dialog box, select Select A Field Or Group from the first drop-down list.
  3. In the Select A Field Or Group dialog box, select Vehicles/Year/value, and then click OK.
  4. In the second drop-down list, select Is Equal To.
  5. In the third drop-down list box, select Select A Field Or Group.
  6. In the Select A Field Or Group dialog box, select Main from the Data Source drop-down list, select myFields/Vehicle/Year, and then click OK (refer to Figure 2).


Figure 2. Filtering the second level of a cascading list.

  1. Click OK four times to close all open dialog boxes.

At this point you have created a two-level cascade. The options in the Make drop-down list are filtered based on the selected Year. You can test this by previewing your form. Now let's create the level-three cascade, which will reveal the compounding complexity involved in creating each additional level of cascade from here.

Populate the Model drop-down list:

  1. Double-click the Model drop-down list box.
  2. In the Drop-Down List Box Properties dialog box select Look Up Values In A Data Connection.
  3. Select Vehicles - Hierarchical Data Source from the Data Connection drop-down list.
  4. Click the Select XPath button to the right of the Entries text box, and then select Vehicles/Year/Make/Model/value.

Filter the Model drop-down list based on the selected Year:

  1. Click Filter Data, and then click Add.
  2. In the Specify Filter Conditions dialog box, select Select A Field Or Group from the first drop-down list.
  3. In the Select A Field Or Group dialog box, select Vehicles/Year/value, and then click OK.
  4. In the second drop-down list, select Is Equal To.
  5. In the third drop-down list box, select Select A Field Or Group.
  6. In the Select A Field Or Group dialog box, select Main from the Data Source drop-down list, select myFields/Vehicle/Year, and then click OK.

Filter the Model drop-down list based on the selected Make:

  1. Click And to create a second filter condition.
  2. In the first drop-down list of the second filter condition, select Select A Field Or Group.
  3. In the Select A Field Or Group dialog box, select Vehicles/Year/Make/value, and then click OK.
  4. In the second drop-down list, select Is Equal To.
  5. In the third drop-down list box, select Select A Field Or Group.
  6. In the Select A Field Or Group dialog box, select Main from the Data Source drop-down list, select myFields/Vehicle/Make, and then click OK (refer to Figure 3).


Figure 3. Filtering the third level of a cascading list.

  1. Click OK four times to close all open dialog boxes.

You have now created a three-level cascade. Preview the form and test the functionality of the drop-down list boxes. You may discover an issue: you can create invalid selection combinations. We will resolve this issue in the next section.


CLEARING SELECTIONS AFTER CHANGES

One issue with cascading lists that needs to be addressed is that when a selection is changed in an earlier level the selections following that change are likely to be invalid. For example, if you select year 1963 and model Chevrolet, and then select year 1973, Chevrolet remains the selected model, even though our data source does not list it as a model for 1973. The old value needs to be cleared so that invalid selection combinations cannot exist. This can be easily corrected with Rules.

With some extra work, you can probably determine whether the following selected values are still valid and clear only invalid ones, but there are advantages to just clearing each following selected value. One advantage is that rules can cascade as well—like a Domino effect. As one value is changed, the next value is cleared; clearing that value triggers the next value to clear, and so on.

The rules we create will have no condition so that they will be processed every time the selected value changes. To clear the selected value of a field, we leave the Value text box of the rule blank.

Clear the selected Make when the selected Year changes:

  1. Double-click the Year drop-down list box.
  2. In the Drop-Down List Box Properties dialog box, click Rules, and then click Add.
  3. Name the rule Clear Make, and then click Add Action.
  4. In the Action dialog box, select Set A Field's Value from the Action drop-down list.
  5. Click the Select XPath button to the right of the Field text box, and then select myFields/Vehicle/Make in the Main data source.
  6. Click OK five times to close all open dialog boxes.

Clear the selected Model when the selected Make changes:

  1. Double-click the Make drop-down list box.
  2. In the Drop-Down List Box Properties dialog box, click Rules, and then click Add.
  3. Name the rule Clear Model, and then click Add Action.
  4. In the Action dialog box, select Set A Field's Value from the Action drop-down list.
  5. Click the Select XPath button to the right of the Field text box, and then select myFields/Vehicle/Model in the Main data source.
  6. Click OK five times to close all open dialog boxes.

Try it:

You have now created a three-level cascading list that prevents invalid selection combinations. Preview the form and try various selection combinations.

©2005 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on InfoPathDev.com.

Comments

 

Repeating Table Question... | keyongtech said:

Pingback from  Repeating Table Question... | keyongtech

January 21, 2009 8:53 PM
 

jean@ckor.com said:

Greg,

Thank you this is an excellent tutorial.  One question. I am trying to use a drop down control for the first field and a multi-select control for the dependent field.  Can this be done?  

January 11, 2011 7:23 AM
 

vt800c said:

I gather by the screen shots and text that this is not for InfoPath 2007 (reference step for in creating the populate and filter steps "Click the Select XPath button to the right of the Entries text box...")

Is there a 2007 version of the screenshots and code?

TYVM

June 8, 2011 7:29 AM
Copyright © 2003-2019 Qdabra Software. All rights reserved.
View our Terms of Use.