📋Option lists
Last updated
Last updated
A dropdown menu facilitates easy and error-free user input by presenting a list of possible options. QuickDEV provides support for implementing option lists using components like Select and Multiselect. You can configure an option list either manually or by mapping data from your data sources.
Each option list has four properties.
Label: the displayed text of the option to users
Value: the unique identifier of the option
Disabled: disable the option (the default value is false)
Hidden: hide the option (the default value is false)
When more than one option in one list uses the same value, only the first option is valid and thus displayed.
Under Basic > Manual, select + Add to create a new option. Choose an option to manually configure it. You can use the ··· option to Duplicate or Delete an option, and rearrange their positions by dragging the ⋮⋮ handle.
Verify the value of the selected option under Components in the data browser. For instance, if New York is selected, you'll find the string value "1" for locationSelect.
Manual mode is recommended for the following scenarios:
For circumstances in which options must be manually managed and enumerated.
Used by a single component.
Data does not come from data sources.
When working with option list data supplied from data sources, transformers, or dynamic variables, use Mapped Mode. Enter your data source array in the Data field of Basic > Mapped, using JavaScript (JS). This array will be used to automatically map a set of choices. To obtain university information, use {{university.data}}. The output array contains country, web_pages, alpha_two_code, and name.
You can access the value of any field of an option through the item and its index i, starting from 0. In the following example, the Label of each option represents the name of the university, while the Value corresponds to the web_page.
Options containing an opening parenthesis ( in their names are disabled. The default value is set to the web_pages of the first item using {{university.data[0].web_pages}}. It's important to note that the default value of an option list should be an element from the Value array, not the Label array.
