MaestroThe UI design product. | Form Builder | All versions This feature is related to all versions.
Maestro provides the Data-Driven Dropdown component that allows you to build dynamic selection lists to implement various customer requirements.
The following properties are available to the Data-Driven Dropdown component:
Path to source data, which is a key to the data to be shown in the dropdown lists.
Path from data to label
Path from data to value
Select the dropdown icon
Check to add a blank value to the dropdown
You can also update a Data-Driven Dropdown triggered by an input Text Field. In this cae, you have to use the input from a text field to both trigger and to make a dynamic data services call. This DDS call will retrieve the data to populate a data-driven dropdown. We will use the example of a zip code text field where the user types the zip code and a zip code lookup service returns the list of cities in a zip code and populates them in a DDD.
To do so, you need to:
Example Javascript to map request and response fields, to make DDS request and to update the Data Field is shown below:
// The key "ZIPCODE" is presumed to be the input parameter for the "Zipcode Lookup Service"
var inputFieldRefs = [{
key: "ZIPCODE",
ref: "data.zipcode"
}];
// The key "cities" is presumed to be the output parameter returned from the "Zipcode Lookup Service"
var outputFieldRefs = [{
key: "cities",
ref: "data.cityDataField"
}];
var serviceName = "Zipcode Lookup Service";
var dataParams = Form.convertToFieldDataMap(inputFieldRefs, data);
// Character input must be length of valid zipcode before making request
if(data.zipcode && data.zipcode.length === 5) {
proceed();
}
// Lookup promise
function proceed() {
// Make asynchronous call to DDS and when the response is received set the field data or log an error
DynamicData.call(serviceName, dataParams).then(function(response) {
// Update the form field data.cityDataField with the response data formatted for a Data-Drive Dropdown.
Form.setFieldDataFromResponse(outputFieldRefs, response, data);
}).catch(function(err) {
console.log("Error: ", err);
});
}
Make sure you have a service written to return the data back as JSON in the correct format. The service in our example, "Zipcode Lookup Service", is presumed to return a JSON response format that looks like:
{"cities":[{"label":"city1","value":"city1"},{"label":"city2","value":"city2"}]}
Next, learn about the Dropdown component.