跳到主要内容

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:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether 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.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Choose at leastSet the minimum number of options to choose
Choose up toSet the maximum number of options to choose
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou 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 KeySpecify a key of a wrapping form component when constructing the data attribute.
HeightHow to set the height to fit
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo 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”…]}}

PropertiesDescription
ValueAn 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 nameDescription
valuean 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

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. 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.