# Select value from list field - Combobox Value selector from a list ![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/xe2WAmAmUpXOkjX7bQsB/10_files/image2025-5-14_15-0-11.png) ✅ **When to use:** * The list is long (e.g. a list of countries) or a search option is needed. :x: **When not to use:** * There are several options and they should be visible, or the options are mutually exclusive (e.g. YES/NO). **Use**: [Radio](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/radio) / [Tile](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/kafel-tile). * The selection concerns an object with additional data (e.g. an account with a balance). **Use**: [AccountSelector](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/wybor-rachunku-accountselector). The value selector from a list is a component that requires a data source. To do this, in the **Properties** panel of the component, go to the **Interactions** section and select **External data source**. Then, in the window that appears, click **Select service** and search the list for the appropriate **dictionary, service** or **script**. Each of these elements is marked in the list with a different icon. After selecting the appropriate data source, in the section **External data source** its name and information about the type are displayed: * DICTIONARY - if a dictionary was selected, * EDS - if a service was selected, * SCRIPT - if a script service was selected. Details: [Connecting a dictionary data source](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/zasilanie-wartosciami-z-zewnetrznych-zrodel/podpiecie-slownikowego-zrodla-danych). ## Component properties | Eximee Designer property | Attribute name in Source | Description | | ----------------------------------------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Number of characters required to start searching** (section **Basic properties**) | minTextLenghtToSearch | Specifies after how many entered characters the component values should be searched. Availability of the functionality depends on the license and may not be available in all implementations. | | **Enabling the search option** (section **Basic properties**) | searchable |

Enabling the search option (by default the property is not selected) - depending on the license and/or channel:

| | **Field description** (section **Data quality**) | description | Text displayed as a description of the field below it; by default, this is an empty value. Availability of the functionality depends on the license and may not be available in all implementations. | | **Position of the additional description** (section **Styling**) | descriptionPosition | Description position (available values **NONE, BOTTOM** and **RIGHT**). To display a dictionary with a description, a dedicated service must be connected (field **External data source**). Availability of the functionality depends on the license and may not be available in all implementations. | | **Label for a single item in the list** (section **Other**) | singleValueLabel | Defines the component behavior when there is only one item on the list. If the option is selected, the dropdown list is replaced by a label (by default the property is not selected). | | **Content presentation adjusted to the field size** (section **Other**) | truncateContent | This property allows limiting the display of the selected value to the number of characters that fit within the standard size of the component added on request. All characters exceeding this size will be replaced with an ellipsis (...). By default, the property is selected. If the property is deselected, the component height will be adjusted to the size of the text in the selected value. Availability of the functionality depends on the license and may not be available in all implementations. | | **Native on mobile** (section **Other**) | nativeOnMobile | Determines whether the native "" component is displayed in the mobile version. Deselecting the property causes a popup to be displayed for every device (by default the property is selected). Availability of the functionality depends on the license and may not be available in all implementations. | | **Additional label** (section **Other**) | descriptionLabel | This is an additional description related to the component. Subordinate to the **Label**property. Availability of the functionality depends on the license and may not be available in all implementations. | | **Displaying "Select..."** (section **Other**) | emptyOption | Displaying the "Select..." option as the first item of the component list (by default the property is selected). Deselecting the property causes the first dictionary item to be displayed. | | **Alternative text for "Select..."** (section **Other**) | emptyOptionCustomText | Text displayed instead of "Select..." when the "Display 'Select...'" option is selected. | | **Hiding "Select..." in the list of available options** | hideEmptyOptionOnList | Hiding the default "Select..." value in the selection list (by default the property is not selected). For this property to make sense, it is necessary to enable the option **Displaying "Select..."**property. Availability of the functionality depends on the license and may not be available in all implementations. | | **Dictionary list height** | listHeight | Dictionary list height (default value -1). Availability of the functionality depends on the license and may not be available in all implementations. | | **Dictionary list width** | listWidth | Dictionary list width (default value -1). Availability of the functionality depends on the license and may not be available in all implementations. | | **Graphical representation of the component** | presentation | Graphical representation of the component (available values **STANDARD**, **WHEEL**, **VARIANT 2.0**). The value **STANDARD** defines the standard appearance of the component, **WHEEL** is a presentation of the component in the form of a scrollable wheel (available only in selected implementations). The value **VARIANT 2.0** defines the new appearance of the component (available only in selected implementations). | > More information about component properties: [Common component properties](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow) ## Component output parameters when powered by a script | Parameter | Description | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **id** | Identifier of individual items | | **text** | Label of individual items | | **description** | Additional label of individual items | | **value** | Component value | | **iconUrl** | URL pointing to the graphic displayed as an icon in the field. Availability of the functionality depends on the license and may not be available in all implementations. | | **initValue** | Initial value | | **metadata** | Additional data for a specific item, used when collecting metrics. Availability of the functionality depends on the license and may not be available in all implementations. |

Figure 1. The list of values available after connecting a dictionary with a list of countries.

{% hint style="warning" %} Values in the dictionary will always be displayed in the order in which they appear in the source feeding them. {% endhint %} ## Example of fields with an additional description In Combobox components, in External data source, you can connect scripts that, in addition to the key (id) and label (label), also return other values, e.g. description. For the description to be visible (description), in addition to powering the parameter, you must also set the Position of the additional description (Styling). For example, a Combobox field can be powered by a script with basic output parameters for the field id (cardId) and field name (cardName), and with the Position of the additional field set to BOTTOM (Styling). Example implementation of a powering script with additional output parameters for the field description (cardDesc) and field icon (cardIcon): {% code title="demoComboboxWithIconScript.js" expandable="true" %} ```js function callService(context) { const result = [ { 'cardOrder': "1", 'cardId': "icon1", 'cardIcon': "BB014_ic_radio_button.d91bc285933ad3ab.svg", 'cardName': "Card 1", 'cardDesc': "*2321 (Jan Kowalski)" }, { 'cardOrder': "2", 'cardId': "icon2", 'cardIcon': "BB013_ic_check_box.b1a7fe0d7d753cf4.svg", 'cardName': "Card 2", 'cardDesc': "*4978 (Janusz Nowak)" }, { 'cardOrder': "3", 'cardId': "icon3", 'cardIcon': "AC148_ic_ZUS_document_add.1b6eb10c6160e0b2.svg", 'cardName': "Card 3", 'cardDesc': "*1417 (Gerwazy Torpeda)" } ] return result; } ``` {% endcode %}

Figure 2. Example of connecting outputs in a script-powered component

Example implementation of a powering script with an additional output parameter for the field description (description): {% code title="demoComboboxSlownik.js" expandable="true" %} ```js function callService(context) { const rachunki = { rachunek1: { number: "64 1140 0000 1811 5461 7042 2796", relation: "owner", balance: "10,000.00 PLN", closingDate: "01.01.2022" }, rachunek2: { number: "43 1840 0007 8519 1222 0331 1083", relation: "owner", balance: "3,488.00 PLN", closingDate: "" }, rachunek3: { number: "15 1610 0006 7705 7581 6839 8900", relation: "co-owner", balance: "13,680.00 PLN", closingDate: "08.05.2019" }, rachunek4: { number: "54 1950 0001 4324 4271 6620 4943", relation: "owner", balance: "566.00 PLN", closingDate: "" }, rachunek5: { number: "22 1240 0001 0453 0518 5950 6955", relation: "proxy", balance: "2,300.00 PLN", closingDate: "" } }; const keys = Object.keys(rachunki); const ownedAccounts = {}; for (let i = 0; i < keys.length; i++) { const key = keys[i]; ownedAccounts[key] = `${rachunki[key].number}`; } return comboboxValue(ownedAccounts); // FUNCTIONS function comboboxValue(accountList) { const result = []; for (const account in accountList) { result.push(new DictElement(account, "Personal account", accountList[account])); } return result; } function DictElement(value, label, description) { this.value = value; this.label = label; this.description = description; } } ``` {% endcode %}

Figure 3. Example of connecting outputs in a script-powered component

{% hint style="info" %} Demo application: demoCombobox {% endhint %} {% hint style="info" %} ♿WCAG: [WCAG best practices for low-code dev](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki) {% endhint %}