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:

Data Source

Field Ref dataPath

Path to source data, which is a key to the data to be shown in the dropdown lists.

Label Field

Label labelField

Path from data to label.

Value Field

Text valueField

Path from data to value.

Icon

Icon icon

Select the dropdown icon.

Add Blank Value

Boolean addBlankValue

Check to add a blank value to the dropdown.

Accessibility

Placeholder Text

Text placeholder

A text for accessibility tools.

Help Text

Popover Help Text

Help Text helpText

You can also configure a Data-Driven Dropdown component to be triggered by an input to a Text Field component. In this case, you have to use the input from a text field to both trigger and make a dynamic data services (DDS) call. This DDS call will retrieve the data to populate the data-driven dropdown.

Let’s take a closer look at how to do this. The example below uses 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 the Data-Driven Dropdown component.

To do so, you need to:

1. Create a service, for example, Zipcode Lookup Service, to return the data back as JSON in the following format:

   {"cities":[{"label":"city1","value":"city1"},{"label":"city2","value":"city2"}]}

2. 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.
3. 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.
4. Add a Data-Driven Dropdown to your form. Make the data source for the Data-Driven Dropdown component to point to data.cityDataField.
5. Add a Change rule to the Text Field to map the request and response parameters for your DDS call and to make the call. 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 the input parameter for the "Zipcode Lookup Service"
   var inputFieldRefs = [{
       key: "ZIPCODE",
       ref: "data.zipcode"
   }];
     
   // The key "cities" is 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);
       });
   }

6. Build and render a form and test it.

Next, learn about the Dropdown component.