Value selection from a list - Combobox

Value picker from a list

The value picker from a list is a component that requires being fed by a data source. To do this, in the component panel you need to go to the Properties section of the component 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 items is marked with a different icon in the list. After selecting the appropriate data source, its name and type information appear in the External data source section:

• 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.

Component properties

Eximee Designer property	Attribute name in Source	Description
Number of characters to start searching (section Basic properties)	minTextLenghtToSearch	Specifies after how many entered characters the component's values should be searched. Availability of this functionality depends on the license and may not be available in all deployments.
Enable search option (section Basic properties)	searchable	Enable 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 search value when this property is absent - clicking the field, typing characters (which are not displayed) filters the values.
Field description (section Data quality)	description	Text displayed as a description under the field; by default this is empty. 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 (choose from values NONE, BOTTOM and RIGHT). To display the dictionary with a description, a dedicated service must be attached (field External data source). Availability of this functionality 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's behavior when there is only one element in the list. If the option is selected, the dropdown is replaced by a label (by default the property is not selected).
Content presentation adapted to field size (section Other)	truncateContent	This property allows limiting the presentation of the 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 by an ellipsis (...). By default the property is selected. If the property is deselected, the component's height will be adjusted to the size of the text in the selected value. 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. Deselecting the property causes a popup to be displayed for every device (by default the property is selected). 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 concerning the component. It is subordinate to the property Label. Availability of this functionality depends on the license and may not be available in all deployments.
Display "Choose..." (section Other)	emptyOption	Display the "Choose..." option as the first item of the component (by default the property is selected). Deselecting the property causes the first element of the dictionary to be displayed.
Alternative text for "Choose..." (section Other)	emptyOptionCustomText	Text displayed instead of "Choose..." when the "Display 'Choose...'" option is selected.
Hide "Choose..." from the list of selectable options	hideEmptyOptionOnList	Hide the default "Choose..." value in the selection list (by default the property is not selected). For this property to make sense, it is necessary to enable the Display "Choose...". Availability of this functionality depends on the license and may not be available in all deployments.
Dictionary list height	listHeight	Height of the dictionary list (default value -1). Availability of this functionality depends on the license and may not be available in all deployments.
Dictionary list width	listWidth	Width of the dictionary list (default value -1). 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 (choose from values STANDARD, WHEEL, VARIANT 2.0). The value STANDARD defines the standard appearance of the component, WHEEL is the presentation of the component as 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 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 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. Availability of this functionality depends on the license and may not be available in all deployments.

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

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

Feeding the component via a service

The availability of features 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 the output parameters from the proxy (service outputs) to the appropriate component attributes,

• fill in the option Position of the additional description (available in the component's Styling properties section) if the component is fed by a service that provides a 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