The Multi-Select Component is a form control that allows users to select multiple values from a dropdown list. It provides various configuration options for data sources, visual appearance, and behavior. This component is ideal for scenarios where users need to choose multiple items from a potentially large collection of options, such as selecting multiple tags, categories, or related items.
placeholderTranslations - Sets the placeholder text displayed in the dropdown when no items are selected, with support for multiple languages. For example, setting this to {"en-US": "Select categories", "de-DE": "Kategorien auswählen"} ensures proper localization of the placeholder text for different language settings.
hidden - Controls whether the component is visible in the form. When set to true, the component remains in the form structure but is not displayed, which is useful for conditional rendering based on other field values or application states.
saveInLocalStorage - Determines whether the component's selected values are preserved in local storage between sessions. When enabled, user selections persist between page reloads, improving user experience for complex forms that may take time to complete.
defaultValue - Sets the initial values that will be used when the form is reset. For example, setting to ["category1", "category2"] would pre-select these values when the form initially loads or is reset.
readonly - Controls whether the selection can be changed by users. When set to true, the field displays the selected values but cannot be modified, which is useful for display-only scenarios or when values are determined programmatically.
dataField - Defines the field name that will be used when submitting form data. For example, setting to "selectedCategories" ensures the selected values are submitted with this field name in the data object.
useStaticData - Determines whether the dropdown options come from a static list defined in the component configuration or from a dynamic data source. When set to true, the component uses the staticData property instead of making API calls.
emitObject - Controls whether the component emits the entire object or just the key value for each selected item. When set to true, the component will emit the complete object for each selected item, which is useful when additional properties besides the key value are needed.
staticData - Defines a static array of options to display in the dropdown when useStaticData is set to true. Each item should have a value and text property, for example: [{"value": "cat1", "text": "Category 1"}, {"value": "cat2", "text": "Category 2"}].
dataSourcePath - Specifies the path within the response data where the list of options is located. For example, setting this to "data.items" will extract the dropdown items from that location in the response structure.
controlsRequestType - Specifies how the field data is sent in HTTP requests: 'BODY', 'HEADER', or 'PATH'. For example, setting to "BODY" includes the field in the request body, which is standard for most form submissions.
dataSourceId - Specifies the data source ID for retrieving dropdown options. For example, "api/categories" connects the component to the categories API endpoint. This property is used when useStaticData is false.
getEntityCollectionHttpRequestParametersMap - Configures HTTP parameters for data fetching. This object maps additional parameters needed for the API request, such as headers, query parameters, or path variables.
modelValue - Defines the property name in the data source items that should be used as the value for each option. For example, setting to "id" means the component will use the "id" property from each item as the selectable value.
modelDisplayValue - Defines the property name in the data source items that should be displayed as the text for each option. For example, setting to "name" means the component will show the "name" property from each item in the dropdown.
pageSize - Sets the number of items displayed per page in the dropdown. For example, setting to 10 will display 10 records per page when pagination is enabled, providing a balance between visibility and performance.
loadAll - Determines whether all available options should be loaded at once or paginated. When set to true, all options are loaded in a single request, which can be more efficient for smaller datasets.
The Dynamic Multi-Select component supports both static data and API integration for data sources. When using an API integration, the component supports pagination and can work with standard paginated responses, which can be customized to map to specific response structures.
{ "content": [ { "id": "1", "name": "Option 1" }, { "id": "2", "name": "Option 2" } ], "totalElements": 100, "totalPages": 10, "number": 0, "size": 10, "first": true, "last": false, "empty": false }