I would like to create a Car year/model/series/bodyType cascading dropdown controller. What is the best approach?
For a demo I can use a subset of data
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.
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 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.
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:
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.