Value selection from list - Combobox

Dropdown field for selecting a value from a list

The dropdown field requires being fed a data source. To do this, in the component panel you must go to the section Properties of the component and choose Interactions and select External data sourceThen in the visible window click Select service and search the list for the appropriate dictionary, service or scriptEach of these items is marked with a different icon in the list. After selecting the appropriate data source, in the External data source section its name and information about the type are displayed:

• DICTIONARY - if a dictionary was chosen,

• EDS - if a service was chosen,

• SCRIPT - if a script service was chosen.

Details: Connecting a dictionary data source.

Component properties

Eximee Designer property	Attribute name in the Source	Description
Number of characters to start searching (section Basic properties)	minTextLenghtToSearch	Specifies after how many entered characters the component values should be searched. Availability of the feature 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 checked) - depending on the license and/or channel: when the property is set to "true" - after clicking the component a field to type the searched value is displayed when this property is absent - after clicking the field typing characters (which are not displayed) causes filtering of values.
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 feature depends on the license and may not be available in all deployments.
Position of additional description (section Styling)	descriptionPosition	Position of the description (choose from values NONE, BOTTOM and RIGHT). To display the dictionary with a description you must attach a dedicated service (field External data source ). Availability of the feature depends on the license and may not be available in all deployments.
Label for a single item in the list (section Other)	singleValueLabel	Specifies the component behavior when the list contains only one element. If the option is selected, the dropdown is replaced by a label (by default the property is not checked).
Content presentation adjusted to field size (section Other)	truncateContent	This property allows limiting the displayed selected value to as many characters as fit in the standard size of the component added to the form. All characters exceeding that size will be replaced with an ellipsis (...). The property is checked by default. If the property is unchecked, the component height will be adjusted to the size of the text in the selected value. Availability of the feature depends on the license and may not be available in all deployments.
Native on mobile (section Other)	nativeOnMobile	Specifies whether a native component is displayed in the mobile version "". Unchecking the property causes a popup to be displayed for every device (the property is checked by default). Availability of the feature depends on the license and may not be available in all deployments.
Additional label (section Other)	descriptionLabel	This is an additional description regarding the component. Child of the property Label. Availability of the feature depends on the license and may not be available in all deployments.
Displaying "Select..." (section Other)	emptyOption	Display the option "Select..." as the first item of the component (the property is checked by default). Unchecking the property causes the first dictionary element to be displayed.
Alternative text for "Select..." (section Other)	emptyOptionCustomText	Text displayed instead of "Select..." when the "Display 'Select...'" option is checked.
Hiding "Select..." from the list of available options	hideEmptyOptionOnList	Hide the default "Select..." value in the selection list (the property is not checked by default). For this property to make sense, enabling the option Displaying "Select...". Availability of the feature depends on the license and may not be available in all deployments.
Height of the dictionary list	listHeight	Height of the dictionary list (default value -1). Availability of the feature depends on the license and may not be available in all deployments.
Width of the dictionary list	listWidth	Width of the dictionary list (default value -1). Availability of the feature depends on the license and may not be available in all deployments.
Graphical representation of the component	presentation	Graphical representation of the component (choose from values STANDARD, WHEEL, VARIANT 2.0). The value STANDARD specifies the standard look of the component, WHEEL is a presentation of the component in the form of a scrolling wheel (available only in selected deployments). The value VARIANT 2.0 specifies the new look of the component (available only in selected deployments).

More information about component properties: Common component properties

Component output parameters when fed from a service

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 feature depends on the license and may not be available in all deployments.
initValue	Initial value
metadata	Additional data of each item, used when collecting metrics. Availability of the feature depends on the license and may not be available in all deployments.

Illustration 1. List of values available after attaching the dictionary with the list of countries

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

Feeding the component via a service

The availability of functionality depends on the license and may not be available in all deployments.

Example implementation of a proxy-service:

DemoComboboxWithIconServiceProxy.java

@Component
@Service(AbstractServiceProxy.class)
public class DemoComboboxWithIconServiceProxy extends AbstractServiceProxy {
    protected static final String OUTPUT_CARD_COUNT = "cardCount";
    protected static final String OUTPUT_ORDER = "cardOrder";
    protected static final String OUTPUT_CARD_ID = "cardId";
    protected static final String OUTPUT_CARD_ICON = "cardIcon";
    protected static final String OUTPUT_CARD_NAME = "cardName";
    protected static final String OUTPUT_CARD_DESC = "cardDesc";

    private static final Logger LOGGER = LoggerFactory.getLogger(DemoComboboxWithIconServiceProxy.class);
    private static final Logger SENSITIVE_LOGGER = SensitiveLoggerFactory.getSensitiveLogger(DemoComboboxWithIconServiceProxy.class);

    public DemoComboboxWithIconServiceProxy() {
        this.name = "DemoComboboxWithIconServiceProxy";
        this.description = "For test purposes ONLY!";
        this.outputFields.add(new ServiceProxyField(OUTPUT_CARD_COUNT));
        this.outputFields.add(new ServiceProxyField(OUTPUT_ORDER));
        this.outputFields.add(new ServiceProxyField(OUTPUT_CARD_ID));
        this.outputFields.add(new ServiceProxyField(OUTPUT_CARD_ICON));
        this.outputFields.add(new ServiceProxyField(OUTPUT_CARD_NAME));
        this.outputFields.add(new ServiceProxyField(OUTPUT_CARD_DESC));
    }

    @Activate
    @Modified
    public void setup(final Map<String, String> config) {
        LOGGER.info(">> Service with config={}", config);
        SENSITIVE_LOGGER.info(">> Service with config={}", config);
    }

    @Override
    public List<Map<String, String>> callService(Map<String, List<String>> map) {
        LOGGER.info("Service started with {}", map);
        final List<Map<String, String>> items = createResult();
        LOGGER.info("Service finished with {}", items);
        return items;
    }

    private List<Map<String, String>> createResult() {
        final List<Map<String, String>> result = new ArrayList<>();
        result.add(createRow1());
        result.add(createRow2());
        result.add(createRow3());
        result.add(createRow4());
        return result;
    }

    private Map<String, String> createRow1() {
        final Map<String, String> row = new HashMap<>();
        row.put(OUTPUT_CARD_COUNT, "3");
        return row;
    }

    private Map<String, String> createRow2() {
        final Map<String, String> row = new HashMap<>();
        row.put(OUTPUT_ORDER, "1");
        row.put(OUTPUT_CARD_ID, "icon1");
        row.put(OUTPUT_CARD_ICON, "biz/icon1.png");
        row.put(OUTPUT_CARD_NAME, "Transparent credit card");
        row.put(OUTPUT_CARD_DESC, "*2321 (Jan Kowalski)");
        return row;
    }

    private Map<String, String> createRow3() {
        final Map<String, String> row = new HashMap<>();
        row.put(OUTPUT_ORDER, "2");
        row.put(OUTPUT_CARD_ID, "icon2");
        row.put(OUTPUT_CARD_ICON, "biz/icon2.png");
        row.put(OUTPUT_CARD_NAME, "MasterCard Platinum credit card");
        row.put(OUTPUT_CARD_DESC, "*4978 (Janusz Nowak)");
        return row;
    }

    private Map<String, String> createRow4() {
        final Map<String, String> row = new HashMap<>();
        row.put(OUTPUT_ORDER, "3");
        row.put(OUTPUT_CARD_ID, "icon3");
        row.put(OUTPUT_CARD_ICON, "biz/icon3.png");
        row.put(OUTPUT_CARD_NAME, "Visa Infinite credit card");
        row.put(OUTPUT_CARD_DESC, "*1417 (Gerwazy Torpeda)");
        return row;
    }
}

Note! When attaching a service in the field External data source remember to:

• correctly map output parameters from the proxy (service outputs) to the appropriate component attributes,

• fill in the option Position of additional description (available in the Styling section of the component properties) if the component is fed by a service that provides a description (description).

Illustration 2. Example of wiring outputs in a component fed from a service

Demo form: demoCombobox

♿WCAG: WCAG best practices for low-code dev