Checkbox group - CheckboxGroup

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

A checkbox group component powered by a dictionary or service

Component properties

Eximee Designer property	Attribute name in the Source	Description
Number of columns (section Layout)	columns	The number of columns in which the checkboxes should be laid out (default empty, meaning arranged in a single column).

More information about component properties: Common component properties

Figure 1. Example appearance of the component on the application

Populating from a dictionary

The component can receive data from a dictionary. Just attach a previously created dictionary in the field External data source.

Checkbox group - script as a data source

In CheckboxGroup components in EXTERNAL DATA SOURCE (External Data Source) you can attach scripts that, apart from the Id, return different values depending on the options selected in the input. This allows defining the content of the Checkboxes displayed in the group according to our needs and input-driven dependencies dynamically. We can define the display of a Checkbox with an icon, description, additional description, a link that launches a popup, popup title, popup content, the number of occurring Checkboxes, and their selection.

An example implementation of a feeding script that returns defined field descriptions and icons depending on selected input options:

demo-checkbox-group-items-with-popup.js

function callService(context) {
    const isNullOrFalse = v => v === false || v === 'false' || v == null;
    const withoutDescription = context.getFirstParameter("withoutDescription");
    const withoutIconUrl = context.getFirstParameter("withoutIconUrl");
    const withoutPopupLinkText = context.getFirstParameter("withoutPopupLinkText");
    const withoutPopupContentHtml = context.getFirstParameter("withoutPopupContentHtml");
    const withoutPopupTitle = context.getFirstParameter("withoutPopupTitle");
    const withCount = +context.getFirstParameter("withCount") || 3;

    const items = [];
    for (let idx = 1; idx <= withCount; ++idx) {
        items.push({
            id: 'checkbox' + idx,
            text: 'Option ' + idx,
            description: isNullOrFalse(withoutDescription) ? 'Field description ' + idx : null,
            iconUrl: isNullOrFalse(withoutIconUrl) ? 'assets/icons_3d/CA019_ic3d_wallet.png' : null,
            popupLinkText: isNullOrFalse(withoutPopupLinkText) ? 'More' : null,
            popupContentHtml: isNullOrFalse(withoutPopupContentHtml) ? 'Text <strong>formatted</strong> <em>from service</em> on the popup.' : null,
            popupTitle: isNullOrFalse(withoutPopupTitle) ? 'Sample content' : null
        });
    }
    return items;
}

Figure 2. Example of mapping outputs in a component fed by a script.

Demo application: demoGesCheckboxGroup