> For the complete documentation index, see [llms.txt](https://docs.eximee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/7-komponenty-specjalne/sekcja-powtarzalna-repeatablesection.md).

# Repeating section - RepeatableSection

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

![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/hzYmMQfUhU0Ho5gnZCnD/21s_files/image2025-5-16_11-47-17.png)

## Component properties

<table><thead><tr><th>Eximee Designer property</th><th width="187.583251953125">Attribute name in the Source</th><th>Description</th></tr></thead><tbody><tr><td><strong>Minimum number of section occurrences</strong><br>(section <strong>Basic properties</strong>)</td><td>minCount</td><td>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 (<a href="/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/dynamicznosc-formularza/wstawki-javascript.md">JavaScript snippets</a>).</td></tr><tr><td><strong>Maximum number of section occurrences</strong><br>(section <strong>Basic properties</strong>)</td><td>maxCount</td><td>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 (<a href="/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/dynamicznosc-formularza/wstawki-javascript.md">JavaScript snippets</a>).</td></tr><tr><td><strong>Title</strong><br>(section <strong>Basic properties</strong>)</td><td>title</td><td><p>Title.</p><p>The availability of the functionality depends on the license and may not be available in all deployments.</p></td></tr><tr><td><strong>Title of the entire repeatable section</strong><br>(section <strong>Basic properties</strong>)</td><td>parentSectionTitle</td><td>Title for the entire repeatable section.</td></tr><tr><td><strong>Section collapse button label</strong><br>(section <strong>Other</strong>)</td><td></td><td><p>Section collapse button label.</p><p>The availability of the functionality depends on the license and may not be available in all deployments.</p></td></tr><tr><td><strong>Section expand button label</strong><br>(section <strong>Other</strong>)</td><td></td><td><p>Section expand button label.</p><p>The availability of the functionality depends on the license and may not be available in all deployments.</p></td></tr><tr><td><strong>Foldable section</strong><br>(section <strong>Other</strong>)</td><td>foldable</td><td><p>Specifies whether the section should be collapsible (initially set to "false").</p><p>The availability of the functionality depends on the license and may not be available in all deployments.</p></td></tr><tr><td><strong>Section collapse condition</strong><br>(section <strong>Other</strong>)</td><td>foldedCondition</td><td><p>Section collapse condition.</p><p>The availability of the functionality depends on the license and may not be available in all deployments.</p></td></tr><tr><td><strong>Section expand/collapse presentation mode</strong><br>(section <strong>Other</strong>)</td><td>presentation</td><td><p>Specifies the presentation mode for expanding/collapsing the section. Available collapse/expand presentation types: STANDARD and LABELS (see more description below).</p><p>The availability of the functionality depends on the license and may not be available in all deployments.</p></td></tr><tr><td><strong>Dynamic button labels</strong><br>(section <strong>Other</strong>)</td><td>plusMinusLabels</td><td>Conditions for the visibility of the add/remove buttons for repeatable section items.</td></tr><tr><td><strong>Section delete button label</strong><br>(section <strong>Other</strong>)</td><td>minusText</td><td>Label for the minus button (deleting a repeatable section item).</td></tr><tr><td><strong>Section add button label</strong><br>(section <strong>Other</strong>)</td><td>plusText</td><td>Label for the plus button (adding a repeatable section item).</td></tr><tr><td><strong>Expanded section title</strong><br>(section <strong>Other</strong>)</td><td>rowTitleExpanded</td><td><p>Title displayed for the expanded section.</p><p>The availability of the functionality depends on the license and may not be available in all deployments.</p></td></tr><tr><td><strong>Collapsed section title</strong><br>(section <strong>Other</strong>)</td><td>rowTitleCollapsed</td><td><p>Title displayed for the collapsed section.</p><p>The availability of the functionality depends on the license and may not be available in all deployments.</p></td></tr><tr><td><strong>Component border</strong><br>(section <strong>Other</strong>)</td><td>parentSectionFrameVisible</td><td><p>Setting the flag displays a frame around all occurrences of the repeatable section (initially set to "false").</p><p>The availability of the functionality depends on the license and may not be available in all deployments.</p></td></tr><tr><td><strong>Add button offset value</strong><br>(section <strong>Other</strong>)</td><td>plusButtonOffset</td><td><p>Add button offset value (initially set to 0).</p><p>The availability of the functionality depends on the license and may not be available in all deployments.</p></td></tr><tr><td><strong>Delete button tooltip</strong><br>(section <strong>Other</strong>)</td><td>minusToolTipText</td><td>Row delete button tooltip</td></tr></tbody></table>

> More information about the component properties: [Common component properties](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow.md)

## 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><img src="https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/YBk7oFeuv7ywFUWuBLPp/21s_files/image2025-5-16_11-47-57.png" alt=""><figcaption><p><em><strong>Figure 1.</strong> Example appearance of the component in the form</em></p></figcaption></figure>

{% hint style="warning" %}
In Repeatable Section, you cannot use [session variables](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/zmienne-sesyjne.md) — here we use technical fields (e.g. the Text Field component with the [Technical field](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow.md)property 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.
{% endhint %}

## Populating a Repeatable Section with a script

To dynamically populate a **Repeatable Section**with 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.

```js

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><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-98808a381bad1a9b922b8b6f286233cb46adb897%2Fsekcja-pow1.png?alt=media" alt=""><figcaption><p><em><strong>Figure 2.</strong> Method of populating the repeatable section with a script</em></p></figcaption></figure>

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-28a09284c5fb0cbf61b7a2d22ceb399eb900f83c%2Fsekcja-pow3.png?alt=media" alt=""><figcaption><p><em><strong>Figure 3.</strong> Script output parameters</em></p></figcaption></figure>

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><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-579dfac06815b80e46923ae64116de94d74cd26c%2Fsekcja-pow2.png?alt=media" alt=""><figcaption><p><em><strong>Figure 4.</strong> Repeatable section with control over the number of repetitions (populating the section with a script)</em></p></figcaption></figure>

## 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:

```javascript
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><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2F6EIbQrxrzpbekDYZyQ3i%2Fobraz.png?alt=media&amp;token=a5cae498-992b-4bb1-8868-f8f6af9d1070" alt=""><figcaption><p><em><strong>Figure 5.</strong> Connecting the output parameter in the SumService script</em></p></figcaption></figure>

{% hint style="info" %}
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)
  {% endhint %}

{% hint style="info" %}
♿WCAG: [WCAG best practices for low-code dev](/documentation/documentation-en/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki.md)
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/7-komponenty-specjalne/sekcja-powtarzalna-repeatablesection.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.