Vega Simple Select Component

Overview

The Simple Select component is a Vega (v2.0) Primary Fields component that lets end-users select one or more options from a drop-down list. The drop-down list uses a values table, or a data reference key, to display a list of options.

By default, the Simple Select component stays collapsed until the end-user opens it. After making a selection, the list closes again.

You'll find the Simple Select component in the Primary Fields group to the left of the Module Builder.

About the Configuration Window

To learn more about general component settings, view our General Component Settings article.×

Display Settings

Field Text

Setting	Description
Label Text	Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.
Placeholder Text	A short prompt telling end-users the expected value of an input field. For example, Enter your Social Security Number. Placeholder Text displays inside the input field until the end-user begins an entry.

Setting

Description

Label Text

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.

Placeholder Text

A short prompt telling end-users the expected value of an input field. For example, Enter your Social Security Number. Placeholder Text displays inside the input field until the end-user begins an entry.

Formatting

Setting	Description
Allow Multiple Selections	When set to (ON), end-users can select multiple options from the drop-down. Each time the end-user clicks an option, its added to the field.
Render Select Menu as Portal	When set to (ON), in Express View, the search select field is rendered in the HTML body of the DOM. When set to (OFF), the Search Select field nests in its parent container. By default this setting is (ON).

Setting

Description

Allow Multiple Selections

When set to (ON), end-users can select multiple options from the drop-down. Each time the end-user clicks an option, its added to the field.

Render Select Menu as Portal

When set to (ON), in Express View, the search select field is rendered in the HTML body of the DOM. When set to (OFF), the Search Select field nests in its parent container.

By default this setting is (ON).

Setting	Description
Key	Create a key value for targeting the option. For example, if you have three options in your menu, you could assign the following keys: menu1, menu2, menu3.
Option Label	Enter the text that displays to the end-user. When an end-user clicks the text, the Action setting fires.

Setting	Description
Data Reference Key	Enter the Property ID of the component whose data you're referencing.
Key Property	Specify the property in the data source to use as the select value. If no value is specified, the item value is used. By default, this setting's value is empty.
Label Property	This field refers to the option labels to retrieve. If you're retrieving data from a Data Table component, enter the column header in this field.
Adornments Property	Specify the property that contains the adornments. This setting is optional.

Setting	Description
Edit	Opens the Operations Builder tool. Discover how to use events and operations in our Operations Builder article.×

Setting	Description
Required	When set to (ON), the end-user must enter a value in the component's visible fields. When set to (OFF), the input is optional. By default, Required is set to (OFF).
Required Error Message	A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field.

Adding a Simple Select Component

Configure a Simple Select component to collect an end-user's education history. You'll configure six options for end-users to select.

These instructions assume that you have an open module saved with a title.×

In the Module Builder, drag and drop a Simple Select component onto the canvas.

In the Property ID field, enter educationHistory.

In the Label Text field, enter What is the highest level of education you've completed?.

Navigate to the Data settings.

In the Values table, enter the following:

	Label	Value
1	lessThanHighSchool	Less than High School
2	highSchoolGED	High School/GED
3	associatesDegree	Associate's Degree
4	bachelorsDegree	Bachelor's Degree
5	mastersDegree	Master's Degree
6	higherEd	Higher Education

Navigate to the Validation settings.

Set Required to (ON).

Click Save Component.

Save your module.

Preview your module in Express View:

Setting	Description
Label Text	Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.
Placeholder Text	A short prompt telling end-users the expected value of an input field. For example, Enter your Social Security Number. Placeholder Text displays inside the input field until the end-user begins an entry.

Setting	Description
Allow Multiple Selections	When set to (ON), end-users can select multiple options from the drop-down. Each time the end-user clicks an option, its added to the field.
Render Select Menu as Portal	When set to (ON), in Express View, the search select field is rendered in the HTML body of the DOM. When set to (OFF), the Search Select field nests in its parent container. By default this setting is (ON).

Setting	Description
Key	Create a key value for targeting the option. For example, if you have three options in your menu, you could assign the following keys: menu1, menu2, menu3.
Option Label	Enter the text that displays to the end-user. When an end-user clicks the text, the Action setting fires.

Setting	Description
Data Reference Key	Enter the Property ID of the component whose data you're referencing.
Key Property	Specify the property in the data source to use as the select value. If no value is specified, the item value is used. By default, this setting's value is empty.
Label Property	This field refers to the option labels to retrieve. If you're retrieving data from a Data Table component, enter the column header in this field.
Adornments Property	Specify the property that contains the adornments. This setting is optional.

Setting	Description
Required	When set to (ON), the end-user must enter a value in the component's visible fields. When set to (OFF), the input is optional. By default, Required is set to (OFF).
Required Error Message	A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field.

Structure of a Simple Select Component's Data

Using the above example, execute the Vega Console command UNQENG.tools.getComponentState('educationHistory') in the DevTools Console to display the component's data structure.

Here's how the above example looks after selecting an option in Express View :

Here's how the same component looks in the DevTools Console:

Vega Simple Select Component

Overview

About the Configuration Window

Display Settings

Field Text

Formatting

Data Settings

Data Source Type

Values

Data Reference Key

Actions Settings

Events & Operations

Validation Panel

User Input

Adding a Simple Select Component

Overview

About the Configuration Window

Display Panel

Field Text

Formatting

Data Panel

Data Source Type

Values

Data Reference Key

Validation Panel

User Input

Adding a Simple Select Component

Structure of a Simple Select Component's Data

Resource

Feedback