Repeatable section - RepeatableSection

A set of fields that can be filled in multiple times in the form by the user.

Component properties

Eximee Designer property	Attribute name in the Source	Description
Minimum number of section occurrences (section Basic properties)	minCount	Minimum number of occurrences of a repeatable section (initial value 1). When the form is displayed, this is also the number of occurrences that are visible and available by default. When removing section elements while filling out the form, you cannot go below this number. As the field value, you can provide a number (e.g. 3), an expression referring to the value of a variable or component (e.g. ${GesTextField1}), or a JS snippet (JavaScript snippets).
Maximum number of section occurrences (section Basic properties)	maxCount	Maximum number of occurrences of a repeatable section (initial value 5). When adding section elements, you cannot exceed this number. As the field value, you can provide a number (e.g. 3), an expression referring to the value of a variable or component (e.g. ${GesTextField1}), or a JS snippet (JavaScript snippets).
Title (section Basic properties)	title	Title. The availability of the functionality depends on the license and may not be available in all deployments.
Title of the entire repeatable section (section Basic properties)	parentSectionTitle	Title for the entire repeatable section.
Section collapse button label (section Other)		Section collapse button label. The availability of the functionality depends on the license and may not be available in all deployments.
Section expand button label (section Other)		Section expand button label. The availability of the functionality depends on the license and may not be available in all deployments.
Foldable section (section Other)	foldable	Specifies whether the section should be collapsible (initially set to "false"). The availability of the functionality depends on the license and may not be available in all deployments.
Section collapse condition (section Other)	foldedCondition	Section collapse condition. The availability of the functionality depends on the license and may not be available in all deployments.
Section expand/collapse presentation mode (section Other)	presentation	Specifies the presentation mode for expanding/collapsing the section. Available collapse/expand presentation types: STANDARD and LABELS (see more description below). The availability of the functionality depends on the license and may not be available in all deployments.
Dynamic button labels (section Other)	plusMinusLabels	Conditions for the visibility of the add/remove buttons for repeatable section items.
Section delete button label (section Other)	minusText	Label for the minus button (deleting a repeatable section item).
Section add button label (section Other)	plusText	Label for the plus button (adding a repeatable section item).
Expanded section title (section Other)	rowTitleExpanded	Title displayed for the expanded section. The availability of the functionality depends on the license and may not be available in all deployments.
Collapsed section title (section Other)	rowTitleCollapsed	Title displayed for the collapsed section. The availability of the functionality depends on the license and may not be available in all deployments.
Component border (section Other)	parentSectionFrameVisible	Setting the flag displays a frame around all occurrences of the repeatable section (initially set to "false"). The availability of the functionality depends on the license and may not be available in all deployments.
Add button offset value (section Other)	plusButtonOffset	Add button offset value (initially set to 0). The availability of the functionality depends on the license and may not be available in all deployments.
Delete button tooltip (section Other)	minusToolTipText	Row delete button tooltip

More information about the component properties: Common component properties

Working with the Repeatable Section

Repeatable Section allows the same set of components to be displayed multiple times on the form. Inside the section, you can place base components, e.g. Text Field, Value Selection Field from a list, etc. Each instance of the section contains the same set of components, but can store different values.

The number of available section occurrences is determined by the properties Minimum number of section occurrences and Maximum number of section occurrences. The user can, while filling out the form, add additional section instances or remove existing ones using the appropriate buttons.

In the example below, each instance of the Repeatable Section contains two text fields.

Figure 1. Example appearance of the component in the form

In Repeatable Section, you cannot use session variables — here we use technical fields (e.g. the Text Field component with the Technical fieldproperty checked). Also, populating fields from a service in a repeatable section may cause unusual errors — e.g. incorrect display of components (but it does not have to). In such a situation, a workaround in the form of a technical field should be used.

Populating a Repeatable Section with a script

To dynamically populate a Repeatable Sectionwith data, you need to use an external script. To do this, go to Properties of the component, select the Interactions, and then check External data source. This option allows you to select the script that will provide data to the component.

Example script generating a repeatable list

The script below generates a list of repeatable test data sections based on the specified number of rows and optionally appends additional fields (min, max, count) to the first row if the appropriate flags are set.

function callService(context) {
    const rowCount = parseInt(context.getFirstParameter('rowCount') || '0');
    const count = context.getFirstParameter('count');
    const min = context.getFirstParameter('min');
    const max = context.getFirstParameter('max');
    const returnCount = context.getFirstParameter('returnCount');
    const returnMin = context.getFirstParameter('returnMin');
    const returnMax = context.getFirstParameter('returnMax');

    const result = [];

    for (let i = 0; i < rowCount; i++) {
        result.push({
            field1: `field1_${i}`,
            field2: `field2_${i}`,
            field3: `field3_${i}`,
        });
    }

    if (returnMin =="true" && min.trim() != '') {
        if (result.length == 0) result.push({});
        result[0]['min'] = min;
    }

    if (returnMax =="true" && max.trim() != '') {
        if (result.length == 0) result.push({});
        result[0]['max'] = max;
    }

    if (returnCount =="true" && count.trim() != '') {
        if (result.length == 0) result.push({});
        result[0]['count'] = count;
    }

    return result;
}

A key step after selecting the data source is proper configuration of the information flow:

• field mapping - make sure that the script's input parameters (e.g. the field specifying the number of rows) are correctly linked to the components in the form. Similarly, the script's output parameters (returned data) must be assigned to specific component attributes,
• listening - remember to add listeners to components that trigger changes. Thanks to them, the script will run automatically and reload the section as soon as the user changes a value in the form (e.g. enters a different number of repetitions).

Figure 2. Method of populating the repeatable section with a script

Figure 3. Script output parameters

Once the script is correctly connected and mapped, the component behavior becomes fully dynamic. The form will automatically generate and display the exact number of repeatable sections, according to the logic written in the code.

Figure 4. Repeatable section with control over the number of repetitions (populating the section with a script)

Example of a Repeatable Section with values to sum

When we want to sum values from a repeating Text Field component in a Repeatable Section, we add another Text Field outside the section and in its properties hook up in the External data source SumService script:

function callService(context) {
    let parts = context.getParameters('parts');
    
    let result = BigDecimal.valueOf("0");
    
    if (!!parts) {
        for (let i = 0; i < parts.size(); i++) {
            let part = parts.get(i);

            if(!!part){
                let bigDecimalItem = BigDecimal.valueOf(part.replace(',','.'));
                result = result.add(bigDecimalItem);
            }
        }
    }
    
    return [{'output': result.setScale(2)}];
}

In the script's input parameters, connect the repeating component with the values to be summed, and in the output parameters select output, i.e. the sum of the values, as the text attribute.

Figure 5. Connecting the output parameter in the SumService script

Demo forms:

• demoRepeatableSection
• repeatable_section_service (form showing section data being populated by a service or script)
• demoRepeatableSectionValidator (form with a validator for repeating values in a section)

♿WCAG: WCAG best practices for low-code dev