Comment on page
Select
Dropdown component
Select component allows your users to select the necessary records from the list.
There are two select components available in UI Bakery:
- Select - an enhanced version of the select component with additional functionality. It 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 the customization of per-option styles, including option color and data type (e.g., date/time, text, number, etc.).
- Select (deprecated) - the classic select component, requires a list of options or a JavaScript array with a specific structure, such as
[{ value: 1, title: 'Name' }];
Method | Description |
|---|---|
setValue(value: Object) | sets value of the select, key: value object |
setOptions | sets the options of the select |
setDisabled(disabled: boolean) | sets select state (enabled/ disabled) |
reset() | resets the select |
validate() | triggers validation |
resetValidation() | clears validation errors |
setRequired(required: boolean) | sets component required state |
Triggers allow you to launch certain actions upon different events.
On Change | Calls for an action when the component's state is changed |
On Init | Calls for an action on component initialization |
On Focus | Calls for an action on component focus |
On Blur | Calls for an action on component blur |
When using the select component, you may often want to load options dynamically from a server. With the select component, mapping the loaded data is not necessary. Simply apply an action or a component that returns an array of objects and set up the display of these values in the select by configuring the title and value properties:
If you are using the deprecated select component, these options should be provided 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 it:1. Create an action that loads some data, for example, a Load Table action to load a list of users;
2. To use the loaded data with the deprecated select component, it must be in the form of an array of value/title objects. This can be achieved by adding a Code step to your action to transform the data or by using the Transform result setting in your action with the following code:
return {{data}}.map((item) => {
return { value: item.id, title: item.name };
});
3. Add the select component and activate the data mode for the options field:
4. Assign the action to the Options code field. This will result in the select displaying a list of options that are loaded dynamically:
To pre-select an option, place the appropriate value in the Value setting of the select component.
Select value can also be set dynamically, for example, can be referenced as a value from another component:
In case you have lots of options, for better navigation, you can enable autocomplete. This will allow your users to quickly search through the options.
If you need to allow multi-select, switch on the Multiple select option:
To set a default value of a multiple select
{{ }} braces around the array, as the select value setting is treated as a string by default:{{ [‘option 1’, ‘option 2’] }}
In case your API returns an array of primitives like strings or numbers, you can use it directly inside the options field with no need to create a value/title object. If you need to extract the options for a select component from your data, you can create an array of strings and use it in your select component.
For example, you need to use the names from the result as select options:
Create an array of strings in the mapper:
return {{data}}.map(item => item.name):
After running the action you will get the list of the names that can be used in the select:
In the select component, refer to the action, and you'll get the options populated:
NOTE! In this case, the name will be used both as a title and a value of the option. If you need to use a different title to the option, you will still need to map the data to UI Bakery format
{value, title}. Last modified 9d ago