Vega Simple Select Component

Estimated Reading Time:  6 minutes

Overview

The Simple Select component is a Primary Fields component that lets end-users End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. 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. Options in the list can also include adornments Adornments are icon images designed to help users visually understand a selection's meaning. For example, the "Gear" icon is a common adornment used to represent a settings page. on the left or right side of the text.

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

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

Display Panel

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.

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.

Input Adornments

Setting	Description
Left Adornments	Select one or multiple adornments from the Adornments table. Places the adornment to the left side of the Input field in Express View.
Right Adornments	Select one or multiple adornments from the Adornments table. Places the adornment to the right side of the Input field in Express View.

Data Panel

Data Source Type

There are two methods that you can use to populate a Simple Select component: Values and Data Reference Key.

Values

Selecting Values displays a table where you can enter each option and its value.

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.
Left Adornments	Select one or multiple adornments from the Adornments table. Places the adornment to the left side of the Option Label in Express View.
Right Adornments	Select one or multiple adornments from the Adornments table. Places the adornment to the right side of the Option Label in Express View.

Data Reference Key

Using the Data Reference Key option, data from another component populates the Simple Select component. You'll most often use this option with a Data Table component. After adding you data to the Data Table component, reference the component in your Simple Select component's configuration window.

Think of this as a hybrid option of using Values and Data Collections to populate the Simple Select component. You still use data stored in Unqork, but it's data from your module instead of a Data Collection.

 

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.

Validation Panel

User Input

Setting	Description
Required	When set to (ON), the end user must enter a value in the component's visible fields. Set the toggle to (OFF) when an entry is optional. By default, the Required toggle 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.

Adornments Panel

Adornments

Setting	Description
Key	Enter a key value to reference the adornment. For example, if your adornment is an email icon, enter a key value of email.
Source Type	Choose how to retrieve the icon. You can retrieve icons from the following sources: URL: Enter an image URL. The following formats are accepted: .png, .jpg, .webp, .svg, and .avif. TIP  To insert images from Managed Assets, enter the following into the Source Type field: {{data.getEnv.REMOTE_ROOT}}assets/[filePathAndName.svg]. Replace [filePathAndName.svg] with the folder path and image file. For example, {{data.getEnv.REMOTE_ROOT}}assets/application1/profile_icon.svg. CSS: Enter a CSS class to insert as an adornment. Optionally, you can insert text as an adornment by using the CSS content property. NOTE  To display CSS icons in Express View, assign the preview style to the CSS file that contains the CSS icon. Font Awesome: Enter a Font Awesome specific icon value. For example, the Font Awesome (profile) icon is: fa fa-regular fa-user. NOTE  To display Font Awesome icons in Express View, assign the preview style to the CSS file that references the Font Awesome font library.
Source	Depending on the Source Type, specify the URL, CSS Class, or Font Awesome icon name.
Event Handlers	Enter a JSON format Vega operation to perform.

Adding a Simple Select Component

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

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

1.

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

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter educationHistory.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter What is the highest level of education you've completed?.

4.

In the component's configuration menu, click Data.

5.

In the Values  table, enter the following:

6.

In the component's configuration menu, click Validation.

7.

Set Required to (ON).

8.

Click Save & Close.

9.

Save your module.

Your Simple Select component looks like the following in Express View Express View is how your end-user views you application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.:

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 The DevTools Console helps you securely store, build, test, and deploy your software. to display the component's data structure.

Resources

• Modify the Simple Select component using the toolbar settings.

• Introduction to Primary Fields.

• How to: Use Data Collections in a Dropdown Component.

• Using an Internal API in a Dropdown Component.

• Using an External API in a Dropdown Component.