Select
A select component is commonly used to present users with a list of options in a dropdown menu format. The user can select only one option from the dropdown list at a time.
The dropdown single-select component typically consists of a text label and a dropdown arrow icon, which when clicked or tapped, opens a list of options for the user to choose from. Once the user selects an option, the dropdown menu closes, and the selected option is displayed in the component.
This component is often used in forms, surveys, and other data entry scenarios where a user needs to select one option from a predefined set of choices. It offers a compact and intuitive way to present a list of options without taking up too much screen real estate or overwhelming the user with too many options at once.
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. |
| 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. |
| 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”}}
| Properties | Description |
|---|---|
| Value | Selected value |
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 select component.
When the selected option changes, it can trigger a specified action. This means that when a user selects a different option from a select component, a particular action can be taken based on the selected option. For example, in a web form, selecting a different option can trigger the display of different form fields or the submission of the form to a different destination. In this way, the option selected by the user can affect the behavior of the software or web application they are using. The ability to trigger specified actions based on user input is an important aspect of interactive software design and can improve the usability and functionality of the software.
Data
The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.
| Property name | Description |
|---|---|
| value | Selected value |
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 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 }}
