You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Single Select

Overview

  • The Single Select component is a dropdown form control.
  • It allows users to select a single option from a list.
  • Options can come from a static list or a dynamic API endpoint.
  • It is useful for forms where one choice must be made, such as categories, statuses, or roles.

Example Single Select

Specs

Tokens

Token Description
placeholderTranslations Placeholder text with localization
initValue Initial selected value on first render
disabled Disables user interaction
showClearIcon Shows icon to clear selection
hidden Keeps in structure but hides visually
saveInLocalStorage Persists selection in local storage
defaultValue Value used on form reset
readonly Shows value but blocks changes
dataField Field name used on submit
useStaticData Toggle static vs. dynamic options
staticData Predefined options list when static
dataSourcePath Path to options in API response
dataSourceId API endpoint ID for options
getEntityCollectionHttpRequestParametersMap HTTP params map for fetch requests
modelValue Field holding option value
modelDisplayValue Field holding option label
emitObject Emit full object instead of value
controlsRequestType Placement of value in request
pageSize Page size for options pagination
loadAll Auto-fetch all pages of options
validation Validation rules container
required Enforces a selection is made
authorizationDisable Policy that disables component
events Configurable event handlers
ON_VALUE_CHANGE Fires when selection changes
ON_INIT_BASED_ON_USER_VIEW Fires on init in user view mode
ON_INIT Fires when component initializes
ON_DESTROY Fires when component is removed

Structure

(Configured in Visual Properties)

  • saveInLocalStorage - Determines whether the component's selected value is preserved in local storage between sessions.

Load Data

(Configured in Visual Properties)

  • initValue - Defines an initial value that will be selected when the component is first rendered.
  • defaultValue - Sets the value that will be used when the form is reset.

(Configured in Non-Visual Properties)

  • useStaticData - Determines whether the dropdown options come from a static list or a dynamic data source.
  • staticData - Specifies the predefined list of options when useStaticData is true.
  • dataSourcePath - Specifies the path in the response data where the list of options can be found.

Static data dialog

(Configured in Datasource Properties)

  • dataSourceId - Specifies the API endpoint ID for retrieving dropdown options when useStaticData is false.
  • getEntityCollectionHttpRequestParametersMap - Configures HTTP parameters for data fetching requests.
  • loadAll - Determines whether all options should be loaded at once regardless of pagination settings.
  • pageSize - Sets the number of options to load per page when pagination is enabled.

Submit Data

(Configured in Non-Visual Properties)

  • dataField - Defines the field name that will be used when submitting form data.
  • controlsRequestType - Specifies how the field data is sent in HTTP requests: 'BODY', 'HEADER', or 'PATH'.
  • emitObject - Determines whether the entire object or just the value is submitted when an option is selected.

(Configured in Datasource Properties)

  • modelValue - Identifies which field in the API response contains the value to be submitted when an option is selected.
  • modelDisplayValue - Identifies which field in the API response contains the text to display for each option.

Styling

(Configured in Visual Properties)

  • placeholderTranslations - Sets the placeholder text displayed when no option is selected, with support for multiple languages.
  • showClearIcon - Determines whether to display an icon that allows users to clear the current selection.

Actions & Variants

Actions

(Configured in Event Actions)

  • events - Configures the events that the component can trigger and respond to.
  • ON_VALUE_CHANGE - Triggered when the user selects a different option.
  • ON_INIT_BASED_ON_USER_VIEW - Triggered specifically when the component initializes in user view mode rather than edit mode.
  • ON_INIT - Triggered when the dropdown component is initialized.
  • ON_DESTROY - Triggered when the component is removed from the DOM.

Variants

(Configured in Visual Properties)

  • hidden - Controls whether the component is visible in the form.
  • disabled - Controls whether the dropdown can be interacted with by users.
  • readonly - Controls whether the selection can be changed by users.

Single Select Variants

Validation

(Configured in Validation Properties)

  • validation - Configures validation rules for the single select dropdown.
  • required - When set to true, an option must be selected before the form can be submitted.

Authorization

(Configured in Authorization Properties)

  • authorizationDisable - Specifies a policy set that determines when the component should be disabled based on user permissions.

Guidelines

[NO DATA AVAILABLE]

Accessibility

[NO DATA AVAILABLE]

  • No labels