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

Combobox

(found under Multi Combobox in the App Designer)

...

[!WARNING] This article contains information on the Combobox and Multi Combobox. It therefor might be misleading.

Overview

• The Dynamic Combobox Component is a form control with a dropdown selection interface.
• It allows users to select a single value from a list of options.
• It supports both static data and dynamic data from server endpoints.
• Features include search, pagination, and customizable display formats.

...

• The Combobox connects to either static data or external data sources through the Data Management configuration.
• The structure ensures that the selected value is stored and submitted consistently with other form fields.

Image RemovedImage Added

(Configured in Genereal Properties)

...

• validation – Configures validation rules for the combobox, including:
• required – When set to true, the field must have a selection before the form can be submitted.

Links

• Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11523-164008&t=ftfrOGkPzlG2GaTo-1
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id3/3-dropdown/multi-combobox

Guidelines

Usage

• Use the combobox when a user must choose one value from a list that can be static or API-driven; connect via useStaticData + staticData or dataSourceId + dataSourcePath with modelValue/modelDisplayValue.
• Provide a default only when it prevents busywork; set defaultValue, and avoid preselecting when an explicit choice is required with validation.required.
• Let users undo optional selections with a clear affordance by enabling showClearIcon.
• Persist the selection across sessions only when beneficial by using saveInLocalStorage.
• Keep option content simple and scannable by ensuring the field mapped to modelDisplayValue contains concise, single-line text; avoid composing multi-line or compound labels inside the list.
• When “no value” is a valid outcome, include an explicit “None” option in staticData (or via your API), keep validation.required: false, and enable showClearIcon to make reversal easy.

...

• Match data volume to UX: paginate large collections with pageSize, and use loadAll only for small datasets.
• Provide predictable filtering while typing by aligning searchKey with a user-recognizable field (often the one used by modelDisplayValue). Align server-side filtering/sorting with the user’s search by setting complementary parameters in getEntityCollectionHttpRequestParametersMap for the same field as searchKey.
• Emit the payload your consumer expects: submit just the key with emitObject: false (using modelValue) or the full object with emitObject: true.
• For static lists, ensure each option includes fields used by modelValue and modelDisplayValue in staticData.

...