# Selection field for values from a list - Combobox Value selection from a list ![](/files/678279745270a113a110d6acbabd3ef194501119) ✅ **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 exclude one another (e.g. YES/NO). **Use**: [Radio](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/radio.md) / [Tile](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/kafel-tile.md). * The selection concerns an object with additional data (e.g. an account with a balance). **Use**: [AccountSelector](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/wybor-rachunku-accountselector.md). The value selection from a list component requires being fed with a data source. To do this, in the component panel you need to go to the **Properties** section **Interactions** and select **External data source**. Then, in the visible window, click **Select service** and search the list for the appropriate **dictionary, service** or **script**. Each of these elements is marked on the list with a different icon. After selecting the appropriate data source, in the **External data source** section its name and the type information are visible: * 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](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/zasilanie-wartosciami-z-zewnetrznych-zrodel/podpiecie-slownikowego-zrodla-danych.md). ## Component properties | Eximee Designer property | Attribute name in the 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. The availability of this functionality depends on the license and may not be available in all deployments. | | **Enabling the search option** (section **Basic properties**) | searchable |

Enabling the search option (by default the property is not checked) - 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 it is empty. The availability of this functionality depends on the license and may not be available in all deployments. | | **Position of the additional description** (section **Styling**) | descriptionPosition | Description position (for selecting a value **NONE, BOTTOM** and **RIGHT**). To display a dictionary with a description, a dedicated service must be connected (field **External data source**). The availability of this functionality depends on the license and may not be available in all deployments. | | **Label for a single item on the list** (section **Other**) | singleValueLabel | Defines the component behavior when there is only one item on the list. If the option is selected, the drop-down list is replaced by a label (by default the property is not checked). | | **Content presentation adapted to the field size** (section **Other**) | truncateContent | The property allows limiting the presentation of the selected value to as many characters as fit in the standard size of the component added on request. All characters beyond this size will be replaced with an ellipsis (...). By default, the property is checked. If the property is unchecked, the component height will be adjusted to the text size in the selected value. The availability of this functionality depends on the license and may not be available in all deployments. | | **Native on mobile** (section **Other**) | nativeOnMobile | Specifies whether the native component "" is displayed in the mobile version. Unchecking the property causes a popup to be displayed for every device (by default the property is checked). The availability of this functionality depends on the license and may not be available in all deployments. | | **Additional label** (section **Other**) | descriptionLabel | This is an additional description of the component. Subordinate to the property **Label**. The availability of this functionality depends on the license and may not be available in all deployments. | | **Displaying "Select..."** (section **Other**) | emptyOption | Displaying the "Select..." option as the first item of the component (by default the property is checked). Unchecking 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 checked. | | **Hiding "Select..." in the list of available options** | hideEmptyOptionOnList | Hiding the default "Select..." value on the selection list (by default the property is not checked). For this property to make sense, it is necessary to enable the option **Displaying "Select..."**. The availability of this functionality depends on the license and may not be available in all deployments. | | **Dictionary list height** | listHeight | Dictionary list height (default value -1). The availability of this functionality depends on the license and may not be available in all deployments. | | **Dictionary list width** | listWidth | Dictionary list width (default value -1). The availability of this functionality depends on the license and may not be available in all deployments. | | **Graphical representation of the component** | presentation | Graphical representation of the component (for selecting a value **STANDARD**, **WHEEL**, **VARIANT 2.0**). The value **STANDARD** defines the standard appearance of the component, **WHEEL** is the component presentation in the form of a scrollable wheel (available only in selected deployments). The value **VARIANT 2.0** defines the new appearance of the component (available only in selected deployments). | > More information about component properties: [Common component properties](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow.md) ## Component output parameters when fed from 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 indicating the graphic displayed as an icon in the field. The availability of this functionality depends on the license and may not be available in all deployments. | | **initValue** | Initial value | | **metadata** | Additional data of an individual item, used when collecting metrics. The availability of this functionality depends on the license and may not be available in all deployments. |

Figure 1. 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 return other values for the field in addition to the key (id) and label, e.g. description. For the description to be visible, in addition to feeding the parameter, you also need to set the Additional description position (Styling). For example, a Combobox field can be fed by a script with basic output parameters for the field id (cardId) and field name (cardName) and with the Additional field position set to BOTTOM (Styling). Example implementation of a feeding 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-fed component

Example implementation of a feeding 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: "authorized representative", balance: "2 300,00 PLN", closingDate: "" } }; const keys = Object.keys(rachunki); const rachunkiPosiadane = {}; for (let i = 0; i < keys.length; i++) { const key = keys[i]; rachunkiPosiadane[key] = `${rachunki[key].number}`; } return wartoscComboboxa(rachunkiPosiadane); // FUNCTIONS function wartoscComboboxa(listaRachunkow) { const result = []; for (const rachunek in listaRachunkow) { result.push(new DictElement(rachunek, "Personal account", listaRachunkow[rachunek])); } 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-fed component

{% hint style="info" %} Demo request: demoCombobox {% endhint %} {% hint style="info" %} ♿WCAG: [WCAG best practices for low-code dev](/documentation/documentation-en/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki.md) {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/pole-wyboru-wartosci-z-listy-combobox.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.