Select component
| 🌐 This document is available in both English and Ukrainian. Use the language toggle in the top right corner to switch between versions. |
1. Component overview
The Select component is a UI element that enables you to create lists with one or more selectable items. By default, the list appears as a collapsed block with one or more elements. Clicking the input field expands the list; typing inside it filters the list. You can configure the display, validation, and loading data via URL.
An extension of the standard Select component includes additional options that simplify modeling. This gives regulations developers and modelers more flexibility to adapt the component to the specific needs of various business scenarios.
| Use the Select component from the Latest components section. |
2. Main functions
The Select component supports many options when interacting with the process forms. The options are divided into tabs.
-
Display
-
Data
-
Validation
-
API
-
Conditions
-
Table
-
Label: The name of the component that appears next to it.
-
Label Position: determines the position of the name relative to the component (top, right, left, or bottom).-
For options Left (Left-aligned), Left (Right-aligned), Right (Left-aligned), Right (Right-aligned).
-
Label Width: sets the width occupied by the Label as a percentage relative to the input. -
Label Margin: sets the offset between Label and input in percentage.
-
-
-
Placeholder: is the text that is displayed in the field when it is empty (unfilled). -
Description: a description of the component that can help users. -
Tooltip: The text displayed when hovering the cursor over the component.
-
Tab Index: An HTML attribute that allows you to control keyboard navigation through the input fields. For details, refer to HTML documentation — for example, here: tabindex.
-
Hidden: An attribute for fields that are hidden from the users but are still part of the form and are submitted along with the form. Don’t forget to clear the Clear when hidden option; otherwise, any value of this component will be empty.
-
Disabled: A setting that disables editing.
-
Multiple Values: Allow selecting multiple values.
-
Data Source Type: Define the data source.
To learn how to get server data, see Configuring the Select component to get and filter data from API resources.
-
Default Values: Define the Value property — the name of the property from the endpoint’s JSON response that will be stored as the value after the selection (for example, formKey).
-
Data Source Values: The list of values displayed in the selection field.
-
Item Template: Customize the appearance of each item in the dropdown list of the Select component. In addition to text, each list item may include visual elements such as icons, images, and other HTML elements.
-
Refresh Options On: Redraw the component when another component changes. For details, see Using the "Refresh Options On" function in the updated Select component.
-
Refresh Options On Blur: Control when the Select component updates its choices.
-
Clear value when on refresh options: Define the behavior of the selected value when the selection options are updated.
-
Clear value when hidden: Define the behavior of the selected value when the component becomes hidden.
-
Custom default value: Set your own default value for the Select component.
-
Calculated value: Enables you to calculate the value of the Select component based on other data or conditions.
-
Allow manual override of calculated value: allows users to manually override the calculated value of the component.
-
Validate On: specifies when this component should activate validation on the client (Change or Blur options). -
Required: the field is required to be filled in before sending the form. -
Custom error message: a special error message displayed when data fails validation. -
Custom validation: custom validation, which allows you to create validation checks specific to your needs. This function uses JS insert. More about JS insert. -
JSONLogic Validation: Enables you to describe validation logic in JSON format, simplifying the creation and management of data validation rules.
-
Property Name: Field name for the API endpoint, which corresponds to the table name in the registry database — for example,
licenses.
-
Advanced Conditions: Configure advanced conditions for the Select component. These conditions determine when the component becomes visible, selectable, or when it should have a certain value based on conditions, expressions, or logic.
-
Table View: determines whether to display the element in the table and in the EditGrid. -
Table column width: allows to customize the column width in the table that is displayed when using the component in EditGrid. -
Sort As Number: determines whether to sort the value as a string or as a number when using the EditGrid component.
3. Data format
The component accepts an array of objects. Each object in an array can contain different fields with values. The example below shows a single object with a "value" field and a value of "123." The Label is what will be displayed in the list.
Object
// Example: [{ value: 123, label: 'Label' }]4. Key points
4.1. Custom Default Value
This function uses JS plugins. For details, see Variables in JavaScript insertions.
4.2. Calculated Value
You might need to filter one element from the API and select it right away. This way, you can set a scenario of unambiguously selecting one field according to the value of another. You can use the following check: instance.getOriginalValues().length === 1, and if there is only one element in the list, you can assign this element to the value field right away.
Fill in the following value of the Calculated Value parameter:
if (instance.getOriginalValues().length === 1) {
value = instance.getOriginalValues()[0].value;
}if (instance.selectOptions.length === 1) {
value = instance.selectOptions[0].value;
}