Cascading Dropdowns and Listboxes

Cascading dropdown fields and listboxes can help your end-user refine their input quickly and easily.  A cascading dropdown or list box prompts users to first select an item from a list of limiting choices.  Each dropdown or listbox that follows provides only options that pertain to the previous selection.  For example, if the first drop down asks an end-user for their state, the next dropdown can ask for their city and dynamically offer only cities located in the previously selected state.

Steps to implementing cascading dropdowns or listboxes:

1.  Format your look-up table or view

Cascading dropdowns and listboxes require look-up tables with multiple fields.  These fields indicate the relationship of the data.  For example, each record may contain a state, a county, a city, and a zip code.  Each field must contain data so that each zip code is associated with a city, and each city is associated with a state, etc.  The record must be complete to provide options for each level of the cascading dropdown or listbox.  Find out more about making a look-up table for a cascading dropdown or listbox.

2.  Open the DataPage wizard

In the Caspio Bridge Explorer window go to the DataPages view.  Select the DataPage where you would like to add a cascading dropdown and click Edit.  If the fields are not already present in your DataPage, go to the Select Fields screen of the page you would like to change, select the fields for the cascading dropdowns or listboxes and move them to the right-hand panel using the arrow button.  In the pictured example we are using one field each for State, County, City, and ZIP Code.  Click Next.

3.  Create your first dropdown or listbox

By default, the fields you are using for your cascading dropdown or listbox will be text fields.  Select the first DataPage element that will be used in your cascading series and select dropdown or listbox from the Form element dropdown field.

A listbox has some extra customization options available:

• Select how many rows you would like to be visible (default 5).
• If you are editing a search page, choose if you would like multi-select available.
• If multi-select is enabled and you are not using an Equal comparison type, choose whether to use AND or OR as the match type.

Choose your source type from the Source dropdown.  If you are going to use your cascading look-up table only, select Lookup table or view.  If you would like to provide an “Any” option at this level of the cascading selection process you can select Both.

In the Lookup Table tab choose your table or view from the dropdown menu.  Select the appropriate fields for display and value.  Remember that the display field will be what is visible to your end-user, and the value field data will be what is stored to your table.

4.  Create a cascading dropdown or listbox

When you have finished formatting your first dropdown or listbox, you can now begin to create the cascading functionality.  Select the second DataPage element in your cascading series.  This is the element with options directly limited by the choice(s) made in the first drop down or listbox.

Under the Form element dropdown field you will now see Cascading dropdown and Cascading listbox as options.  Select either of these options depending on your preference.  If you select Cascading listbox, and you are currently editing a search page you will have the same options for multi-select as listed above.

The parent field of this cascading dropdown or listbox will be the field used for the original dropdown or listbox from the last step.  Select whether you are going to use only the look-up table or view, or whether you would like to also add custom options, such as “Any” (Lookup and custom values).

Select the look-up table or view.  The Filter by option tells the dropdown or listbox to which field it should apply the previous data as a filter.  For example, if the previous field asked for a state name, then you will want to filter the next dropdown or listbox by the state field.  If the value and display of the previous field are different, be sure that you are filtering by the value of the previous dropdown or listbox and not by display.

Choose your display and value fields just like in the original drop down or listbox.

5.  Create additional cascading dropdowns or listboxes as needed

Additional cascading dropdowns and/or listboxes can be added in the same way as the last step.

1. Change the form element to Cascading Dropdown or Cascading Listbox
2. Format the multi-select options if necessary
3. Choose the parent field (the previous dropdown or listbox field)
4. Choose a source depending on if you want to add custom values
5. Add any custom values if necessary
6. Select your look-up table or view
7. Filter by the value of the last cascading dropdown or listbox
8. Select your display and value options

Most of these options will be automatically selected by Caspio Bridge.  Pay particular attention to the Parent field dropdown which will most likely default to the first dropdown or listbox you created.

6.  Test your cascading functionality

Once you’ve finished setting up your cascading dropdowns and list boxes press Finish.  You can test to make sure they function correctly right inside of Caspio Bridge by clicking the Open button.  Remember, any time you update the look-up table, the options will be updated automatically.