Documentation Center

Template Builder User Guide

Version 3.0 | Published October 04, 2023 ©

Dynamic Dropdown

The entries of a dropdown can be dynamically populated based on the value from another (hidden) field in the template.

  • The dropdown is populated with a JSON string from the source field.

  • Whenever the source field is changed, the dropdown is re-generated.

  • Use case: A natural workflow is to use the onLoad() event to fetch data and populate the source field whenever data elements based on this template is opened in Viz Pilot Edge.

Example - onLoad() Populating a Dropdown

Follow these steps to create a dynamic, data driven dropdown that is populated each time a data element is opened:

  1. Create a new single-line text field that may be called source. This acts as the source of the drop-down item (this field can be hidden).

  2. Secondly, create another single-line text field, for instance called dropdown. This is where your drop-down will be displayed.

  3. In the dropdown single-line text field, click on it to have the properties displayed.

  4. In the Data entry property, click on the Dropdown alternative.

  5. Once the alternative is added, a new text field right below called Linked source field will appear.

  6. Fill the Linked source field with the name of your first single text field, which in this example is source.

  7. Within the source field, you can add data, either manually through the source field directly, or from the script editor like shown below.

  8. The data must be in JSON arrayformat: [{"label": "my label1", "value": "my value1"}, {"label": "my label2", "value": "my value2"}, {"label": "my label3", "value": "my value3"}]

    1. The label property is what is displayed in the drop-down.

    2. The value property is what is being stored in the data element (this is eventually sent to Viz Engine).

Populate Dropdown Source Field in onLoad() Event
// onLoad() is executed each time a data element based on this
// template is loaded in Pilot Edge
vizrt.onLoad = () => {
fetch("http://myhost/app/teams.json")
.then(r => r.text())
.then(result => {
vizrt.fields.$source.value = result
console.log("Fetched: ", result)
}
).catch(e => console.log("Error: ",e))
}

In the example above, the teams.json file looks like this:

 [{"label": "Tottenham Hotspur", "value": "tottenham"}, {"label": "Liverpool", "value": "liverpool"}, {"label": "Manchester City", "value": "mancity"}]

The format is a JSON array. This line can be pasted directly into the dropdown source field for testing purposes.

The result looks like this (with the source field visible):

images/download/attachments/130557631/image-2023-6-21_20-1-58.png