Data-Driven Dropdown

   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.

Usage

1. Open the Palette pane in the Maestro Editor.
2. Locate the Data-Driven Dropdown component within the Input Fields folder.
3. Drag the component into the View pane or the Wireframe.
4. Configure the component's properties via the Properties pane.

Properties

The following properties are available to the Data-Driven Dropdown component:

Accessibility

Help Text

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:

1. Add a Text Field to your form. This will be the zip code field. Here we presume that the field reference ID for the zip-code field is "zipcode".
2. Add a Data Field to your form. This will store the data returned by the DDS call. We presume that the field reference ID for the Data field is cityDataField.
3. Add a Data-Driven Dropdown to your form. Make the data source for the DDD point to "data.cityDataField".
4. Add an "On Change" script to the Text Field in order to map the request and response parameters for your DDS call and to make the call. It should look something like the JavaScript below.

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 Topics component.