Select
Overview
The Select component allows users to select the necessary records from the list. If you search in our Components list, you will find two Select components available, one of them in the Deprecated section.
Deprecated Select component - a classic version of the component that requires a list of options or a JS array with a specific structure, such as
[{ value: 1, title: 'Name' }];.
Newer Select component - an enhanced version of the component with additional functionality. The component can take in an array of any structure, and users can specify which data keys to use as the option's id and title. Additionally, the updated version allows customization of per-option styles, including options colors and data types (for example, Date/Time, Text, Number, etc.).
Properties
name
string
Component name
value
string | undefined |
(string | undefined)[]
Current component value
autocompleteValue
string
Component autocomplete value
valid
boolean
Indicates if the component is valid
validating
boolean
Indicates if the component is validating
disabled
boolean
Indicates whether the component is disabled
options
SelectOption[]
Component options
Methods
setValue
value: any
void
Set component value
setOptions
options: object[]
void
Set options for the select. Options is an array of objects with the following structure:
{
value: any;
title: string;
}
setDisabled
disabled: boolean
void
Disable or enable the component
reset
–
void
Reset the component to the initial value
validate
–
void
Trigger component validation
resetValidation
–
void
Clear validation errors
setErrors
errors: string |
string[] | null
void
Mark the component as invalid and display errors
setRequired
required: boolean
void
Set component required state
Triggers
On Change
Triggered when the component's state changes
On Focus
Triggered when the component is in focus
On Blur
Triggered when the component loses focus
On Init
Triggered when the component is initialized
Working with the component
Loading options from an API or database
Using Select, you can load options dynamically from the server without the need to map the loaded data. Depending on the type of Select you're using (deprecated or new), you will have to do the following to load the data:
(New) Assign your action or reference the component that returns an array of objects and set the display of these values in the Select by configuring the Option title and Option value properties.
(Deprecated) The basic flow here is to specify your options in the form of an array of objects with value and title keys, for example,
[{ value: 1, title: 'Name' }]. Here's how you can do that:
Create an action that loads the data you need, for example, a Load Table action to load a list of users.
Next, add another step to your Load Table action, select JavaScript Code action, and specify the following code to transform data into an array of value/title objects:
return {{data}}.map((item) => {
return { value: item.id, title: item.name };
});Click on the Select component, switch to the JS mode in the Options field, and assign your load data action there.
Done! Now the deprecated Select component will display a list of options loaded dynamically.
Setting an array of strings as Select options
Another option for the deprecated Select component, if your API returns an array of primitives like strings/numbers, you can the array directly inside the Options field without the need to create a value/title object. In this scenario, to extract the options for the Select, you can create an array of strings and use it in the component.
Here's how you can do that:
Create an action loading your data (in our example, it's an HTTP API step), turn on the Transform result toggle, and add the following code to create an array of strings in the mapper:
return {{data}}.map(item => item.name)
Run the action and you'll see the list of names in the Result tab that you can use in the Select component.
Now, click on the Select component, switch to the JS mode in the Options field, and assign your load data action there.
In this scenario, the name will be used both as the title and the value of the option. If you need to use a different title for the option, you will need to map the data to the UI Bakery format of {value, title}.
Setting a default value
You can pre-select a specific option for the component by specifying the value you need in the Select's Value field.
You can also set the component's value dynamically, for example, referencing a value from another component in the Select's Value field.
Using autocomplete
If you have a lot of options to choose from, you can enable autocomplete to improve navigation. It will allow users to quickly search through the available options.
Enabling multiple selection
It is also possible to allow multiple options select for the component by enabling the Multiple select setting.
If you want to set a default value of a multiple select, you will need to put the array in the curly braces because the Select's Value setting is treated as a string by default:
{{ [‘option 1’, ‘option 2’] }}Last updated
Was this helpful?