Checkbox group - CheckboxGroup

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

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 into which the checkboxes should be distributed (default empty, meaning one column). The value should be chosen with the component's readability in mind. Too many columns may cause the content, descriptions, icons, or links associated with the checkboxes to be displayed unreadably.
Whether to mark the change in the summary (section Other)	changedByUserSummaryInfoCondition	Determines whether a change in the component's value should be marked in the Application Summary component (FormSummary). This property applies only in forms that use the Application Summary component.

More information about component properties: Common component properties

Figure 1. Example appearance of the component in the request.

Checkbox arrangement in columns

When a larger number of columns is set, the checkboxes are arranged sequentially in rows, from left to right.

For example, for 6 items and 3 columns, the layout will be as follows:

1  2  3
4  5  6

An example of arranging checkboxes powered by the same data source - for one, two, and three columns - is shown in Figure 1.

Dictionary as a data source

The component can receive data from a dictionary. It is enough to connect a previously created dictionary in the field EXTERNAL DATA SOURCE.

Script as a data source

In CheckboxGroup components in EXTERNAL DATA SOURCE (External Data Source), scripts can be connected that, apart from the Id, return different values depending on the selected input options. This allows defining the content of the displayed checkboxes in the group according to our needs and the dependencies introduced at the input in a dynamic way. We can define the display of a checkbox with an icon, description, additional description, a link that opens a popup, popup title, popup content, the number of checkboxes displayed, and their selection.

Example implementation of a feeding script returning defined field descriptions and icons depending on the 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) ? 'Formatted <strong>text</strong> <em>from the service</em> in the popup.' : null,
            popupTitle: isNullOrFalse(withoutPopupTitle) ? 'Sample content' : null
        });
    }
    return items;
}

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

Demo application: demoGesCheckboxGroup