List value selection field - Combobox

List value selector

✅ When to use:

• The list is long (e.g. a list of countries) or a search option is needed.

❌ 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 / Tile.
• The selection concerns an object with additional data (e.g. an account with a balance). Use: AccountSelector.

The list value selector is a component that requires a data source. To do this, in the component panel Properties go to the section Interactions and select External data source. Then, in the window that appears, click Select a 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 section External data source its name and type information are displayed:

• DICTIONARY - if a dictionary was selected,
• EDS - if a service was selected,
• SCRIPT - if a script service was selected.

Details: Attaching the dictionary data source.

Component properties

Eximee Designer property	Attribute name in the Source	Description
Number of characters before search starts (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.
Enable search option (section Basic properties)	searchable	Enabling the search option (by default the property is not selected) - depending on the license and/or channel: when the property is set to "true" - clicking the component displays a field for entering the searched value when this property is not present - clicking the field and typing characters (which are not displayed) filters the values.
Field description (section Data quality)	description	Text displayed as a description of the field below it, by default this is an empty value. The availability of this functionality depends on the license and may not be available in all deployments.
Additional description position (section Styling)	descriptionPosition	Description position (for selecting the 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 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 displayed selected value to as many characters as fit within 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 selected. If the property is unchecked, the component height will be adjusted to the size of the text 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	Defines 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 selected). 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 for 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 selected). Unchecking the property causes the first item of the dictionary to be displayed.
Alternative text for "Select..." (section Other)	emptyOptionCustomText	Text displayed instead of "Select..." when the "Displaying 'Select...'" option is selected.
Hide "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...". 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 the value 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 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

Component output parameters when powered 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 pointing to 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. The list of values available after connecting the dictionary with the list of countries.

Values in the dictionary will always be displayed in the order in which they are in the source feeding it.

Example fields with an additional description

In Combobox components, under 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 supplying the parameter, you must also set the Additional description position (Styling). For example, the Combobox field can be supplied 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 the field icon (cardIcon):

demoComboboxWithIconScript.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;
}

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

Example implementation of a feeding script with an additional output parameter for the field description (description):

demoComboboxSlownik.js

function callService(context) {

    const accounts = {
        account1: { number: "64 1140 0000 1811 5461 7042 2796", relation: "owner", balance: "10,000.00 PLN", closingDate: "01.01.2022" },
        account2: { number: "43 1840 0007 8519 1222 0331 1083", relation: "owner", balance: "3,488.00 PLN", closingDate: "" },
        account3: { number: "15 1610 0006 7705 7581 6839 8900", relation: "co-owner", balance: "13,680.00 PLN", closingDate: "08.05.2019" },
        account4: { number: "54 1950 0001 4324 4271 6620 4943", relation: "owner", balance: "566.00 PLN", closingDate: "" },
        account5: { number: "22 1240 0001 0453 0518 5950 6955", relation: "attorney", balance: "2,300.00 PLN", closingDate: "" }
    };

    const keys = Object.keys(accounts);
    const ownedAccounts = {};

    for (let i = 0; i < keys.length; i++) {
        const key = keys[i];
        ownedAccounts[key] = `<b>${accounts[key].number}</b>`;
    }

    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;
    }
}

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

Demo request: demoCombobox

♿WCAG: Good WCAG practices for low-code dev