I would like to create a Car year/model/series/bodyType cascading dropdown controller. What is the best approach?

  1. Sacha Trube

    For a demo I can use a subset of data

  2. Sacha Trube

    Composer has this concept of a "Cascading drop-down list manager", where you can upload a structured XML file which defines the structure of the data, and then you just need to point your Cascading Dropdown Lists at the data, and define the XPath which points to the node(s) with the data in it. There must be an equivalent of this where the data could potentially be managed in Excel and exported-imported into the form design.

CommentAdd your comment...

1 answer


    Hi Sacha,

    There are several methods, but the simplest is to build a nested JSON structure that represents your data needs, and on each parent dropdown, implement a change rule that selects the next array in the structure to dynamically populate the next child.

    In brief:

    1. Add two data fieldsdropData and dropChildData, these are used to provide the data source for the dropdown lists.
    2. Add two data-driven dropdown fieldsTop Data Dropdown and Child Data Dropdown, these are displayed to the user.
    3. Configure a Calculation rule on the dropData field to contain your JSON data. The JSON data should contain nested arrays for the secondary dropdown list.
    4. Set the data source for Child Data Dropdown to point to data.dropChildData.
    5. Set the data source for Top Data Dropdown to point to data.dropData.
    6. Add a Change rule to the Top Data Dropdown field to set the value of dropChildData to be the nested array corresponding to the currently selected value in the dropdown.

     In the following, the example produces a two level cascade with values "one" and "two" in the first level and "one.one", "one.two" and "two.one" and "two.two", etc, respectively.

    The following code is applied to the calculation rule of a data field.

    Data Field Calculation Rule

    The first or initial drop down references the Data Field in it's data source field reference.  Similarly, any dependent children should also have data fields set.

    Also on this initial drop down (and any subsequent drop down in a many level cascade), the following code is applied to the change rule:

    Data Driven Dropdown Change Rule

    Effectively this works by employing a method on the Data Field array object (.some()) which acts as a filter at the time of selection, returning the matching array for the selection.  For example, selecting "one" returns the childData array:


    The array (element.childData) is then set as the data into the Data Field referenced by the dependent drop down child dynamically populating the data driven drop down child.

      CommentAdd your comment...