JavaScript Library to Access Reference Data

   MaestroThe UI design product.  |   Form Builder Platform Developer |  19.05 This feature was introduced in 19.05.

While building onboarding application forms, you can use various reference data to pre-fill and autocomplete form's fields, as well as validate user input against this data. Reference data is static data that is created and stored in Manager and it is pertinent to an organization, which Maestro forms, belonging to that organization, can access.

Journey Maestro allows you to access reference data, which is embedded directly into a form, as a JavaScript Library component. In this case, reference data stays with the form and has no external dependencies, which makes data versioning easier as it is managed by Maestro as part of the form content. Usually, a Form Designer supplies that JavaScript source.

Let's consider sample data with the property names label and value as a JSON object. These property names are the default values for displaying in Data Driven Dropdown components. By using these names, we can accept the default values for the dropdown's Label Field and Value Field properties. We can use any names we want in our JSON though, and simply change the dropdown properties to suit.

To use reference data with JavaScript Library:

1. Create a JavaScript file that contains a variable holding your reference data as a JSON object. You can have as many variables as you want, but for this example, we will only use one, motorCyclesReferenceData.
2. Open a Maestro form in the Maestro editor.
3. Add the JavaScript Library component to your form and upload a JavaScript file into it. The sample JavaScript object is shown below:

   var motorCyclesReferenceData = [
       {
           "label": "BMW",
           "value": "bmw",
           "models": [
               {"label": "F802GT", "value": f802gt, "years": [
               {"label": "2008", "value": 2008},
               {"label": "2017", "value": 2017},
               {"label": "2021", "value": 2021}
           ]}
       },
       {
           ...
       }
   ];

4. Add a Data Field component to hold each variable that the JavaScript file contains.
5. Name the Data Field component as manufacturers.
6. Add a Calculation rule to the manufacturers Data Field, for example, motorCyclesReferenceData, which is the name of the plain JavaScript object used to initialize that Data Field.
7. Add a Data Driven Dropdown component to the form and name it as Manufacturer.
8. Double-click the manufacturers Data Field in the Data Source property.
9. Preview the form to see values from reference data the Manufacturer dropdown component.

You can reference the Data Field component in other parts of the form.

Next, learn how to use reference data with property prefill.