Multi-select
Multi-select
The multi-select component can be useful in situations where multiple options need to be selected from a list. This can allow for more efficient data entry and filtering. The component can be configured with various properties to achieve different effects and also supports methods and event handlers for more customization.
You can add options manually or in bulk from your data source. In this article, we will introduce in detail how to use the multi-select component.
Properties
Manual options
Add new options or delete options manually and configure the options one by one. The properties of options are as follows:
| Properties | Description |
|---|---|
| Label | The text displayed for the option |
| Value | The value associated with the option |
| Disabled | Whether the option is disabled for selection |
Mapped options
You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.
| Properties | Description |
|---|---|
| Data source | Set the data source of options |
| Label | Use {{item}} to set the label of options |
| Value | Use {{item}} to set the value of options |
| Disabled | Use {{item}} to set whether the option is disabled for selection |
Other properties
| Properties | Description |
|---|---|
| Default value | The initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}. |
| Placeholder | The value will be shown when the input field is empty. |
| Label | The name of the field displayed to the user |
| Caption | A caption used to describe the field in detail |
| Hidden label | Set whether to display the label |
| Position | Set the position of the label relative to the component |
| Alignment | Set the alignment of the label |
| Width | When the label is on the left side of the component, set the width ratio of the label |
| Event Handler | Trigger queries, control components, or call other APIs in response to component events. |
| Disabled | Control the status of whether the component is disabled. The component cannot be modified or focused when it is disabled. |
| Read Only | Control the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified. |
| Show clear button | Set whether to show the clear button |
| Tooltip | Users can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported. |
| Required field | Valid only when the switch is on. |
| Choose at least | Set the minimum number of options to choose |
| Choose up to | Set the maximum number of options to choose |
| Custom rule | editor.inspect.setter_tooltip.custom_rule |
| Hide validation message | You can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript. |
| Form Data Key | Specify a key of a wrapping form component when constructing the data attribute. |
| Height | How to set the height to fit |
| Hidden | Dynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value. |
| Theme color | To select the theme color of the component |
Method
You can use other components to control the component. We support the following three methods:
setValue
To set the selected option, for example, {{[”value1”,”value3”…]}}
| Properties | Description |
|---|---|
| Value | An array of selected option values. |
clearValue
To clear the selected options
validate
To verify that the input information is legal
clearValidate
To clear the validation message
Event handler
We support listening to the onChange event of the multi-select component.
Data
The multi-select component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.
| Property name | Description |
|---|---|
| value | an array of selected option values |
Use case
Next, we will demonstrate how to use the mapped mode to dynamically obtain options.
Step 1 Add an action
We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.
Create an actions to list all data in selection named postgresql1
select * from selection
Step 2 Configure the multi-select component
Set the Data sources to
{{postgresql1.data}}Configure the label to change the label based on the language.
- Use {{ item.columnName }} to set the column.
- Use {{ currentUserInfo.language }} to set the language users use in ILLA.
{{currentUserInfo.language=='ja-JP' ? item.options_jp
: currentUserInfo.language == 'ko-KR' ? item.options_kr
: currentUserInfo.language == 'zh-CN' ? item.options_zh
: item.options_en }}
What’s more
You can add or delete options by adding or deleting rows to the selection table.