Question

how can we create multiple cascading drop downs/selects with interrelated data using Ajax calls?

Answer 1

Cascading selects = the options of the second list depend on the value of the first. With the UI Toolkit you need two Single Select controls and a small script or two services; three ways depending on where the data lives:

1. All options loaded with the coach (small reference lists):

// coach variables: tw.local.countries (list of NameValuePair), tw.local.allCities (list of City {name, countryCode})
// Single Select "Country": bound to tw.local.address.country, options = tw.local.countries (name/value)
// Single Select "City":    bound to tw.local.address.city,    options = tw.local.cityOptions (list of NameValuePair)
// Country > On change:
var code = me.getData(), all = ${AllCities}.getData() || [];                 // AllCities = hidden Data control bound to tw.local.allCities
var opts = all.filter(function (c) { return c.countryCode === code; }).map(function (c) { return { name: c.name, value: c.name }; });
${City}.setItems ? ${City}.setItems(opts) : ${City}.setOptions(opts);        // API name per toolkit level (setItems on newer)
${City}.setData(opts.length === 1 ? opts[0].value : "");                    // reset / preselect

2. Options from a service per selection (large lists): a Service Call "LoadCities" with the country as input; Country > On change: ${LoadCities}.execute({ country: me.getData() }); LoadCities > On result: ${City}.setItems(result) (or bind the City's option list to the Service Call's output variable and let the binding update the control).

3. Three or more levels: repeat the pattern (State > City > Postcode); clear all dependents when a parent changes; disable a select until its parent has a value (${City}.setEnabled(false)).

Notes: when the coach loads with existing data (edit mode), run the same code in the coach's / control's load event so that the dependent list is filled before the bound value is applied; keep the lists in NameValuePair form (name shown, value stored); on 8.5.x heritage coaches the same logic used the Select control's Ajax service option with the parent value as input.

References

• BPM UI Toolkit - Single Select (setItems / option list), Service Call