Vega Search Select Component

Overview

The Search 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. search for, or select, one or more options from a drop-down list. Unlike the Simple Select component, end-users can enter a value into the field and the drop-down list filters options to match that value. End-users then use the arrow keys or their mouse to select an option from the filtered list.

By default, the Search Select component remains collapsed until the end-user clicks it. After making a selection, the list closes again.

You'll find the Search 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 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.

Data Panel

Data Source Type

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.

Adding a Search Select Component

You'll configure a Search Select component to collect an end-user's cat type preference. You'll configure eight options for end-users to select.

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

1.

In the Module Builder, drag and drop a Search 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 catType.

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 your favorite cat breed?.

4.

In the component's configuration menu, click Data.

5.

In the Values  table, enter the following:

6.

Click Save & Close.

7.

Save your module.

Your Search Select component looks like the following in Express View Express View is how your end-user views your 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 Search Select Component's Data

Using the above example, execute the Vega Console command UNQENG.tools.getComponentState('catType') 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 Search Select component using the toolbar settings.

• Introduction to Primary Fields.

• Module Builder Component Library.