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

# Repeatable section - RepeatableSection

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

![](/files/8b860480d57efc3e177d0d3f46d30f0227144634)

## 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>The minimum number of occurrences of a repeatable section (initial value 1). When the application is displayed, this is also the number of occurrences that are visible and available by default. Removing section elements while filling in the application cannot reduce this number.</td></tr><tr><td><strong>Maximum number of section occurrences</strong><br>(section <strong>Basic properties</strong>)</td><td>maxCount</td><td>The maximum number of occurrences of a repeatable section (initial value 1). When adding section elements, this number cannot be exceeded.</td></tr><tr><td><strong>Title</strong><br>(section <strong>Basic properties</strong>)</td><td>title</td><td><p>Title.</p><p>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>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>Availability of the functionality depends on the license and may not be available in all deployments.</p></td></tr><tr><td><strong>Collapsible 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>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>Availability of the functionality depends on the license and may not be available in all deployments.</p></td></tr><tr><td><strong>Section expansion display method</strong><br>(section <strong>Other</strong>)</td><td>presentation</td><td><p>Specifies the section expansion display method. Available collapse/expand presentation types: STANDARD and LABELS (see below for a more detailed description).</p><p>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 buttons for adding/removing elements of a repeatable section.</td></tr><tr><td><strong>Section removal button label</strong><br>(section <strong>Other</strong>)</td><td>minusText</td><td>Label for the minus button (removing a repeatable section element).</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 element).</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>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>Availability of the functionality depends on the license and may not be available in all deployments.</p></td></tr><tr><td><strong>Component frame</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>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>Availability of the functionality depends on the license and may not be available in all deployments.</p></td></tr><tr><td><strong>Remove button tooltip</strong><br>(section <strong>Other</strong>)</td><td>minusToolTipText</td><td>Tooltip for the row removal button</td></tr></tbody></table>

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

## Working with 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, List Selection Field, etc. Each occurrence 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**. While filling in the form, the user can add additional section occurrences or remove existing ones using the appropriate buttons.

In the example below, each occurrence of the Repeatable Section contains two Text Fields.

<figure><img src="/files/145e4a05c514a730160bb75c05d582c03283c89e" alt=""><figcaption><p><em><strong>Figure 1.</strong> Example component appearance in the application</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 selected). Also, feeding fields from a service in a repeatable section can cause unusual errors — e.g. incorrect rendering of components (but it does not have to). In such a situation, use a workaround in the form of a technical field.
{% endhint %}

## Feeding the Repeatable Section with a script

To dynamically populate **the Repeatable Section**, use an external script. To do this, go to **Properties** of the component, select the **Interactions**, and then check **External data source**. This option lets you choose 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 adds extra fields (min, max, count) to the first row if the relevant 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;
}
```

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

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

<figure><img src="/files/915bedfcea7b68784bbdd7627fbac4f530513983" alt=""><figcaption><p><em><strong>Figure 2.</strong> Method of feeding the repeatable section with a script</em></p></figcaption></figure>

<figure><img src="/files/bc2ba2367a976df32798801ba58feb27e90e0d05" alt=""><figcaption><p><em><strong>Figure 3.</strong> Script output parameters</em></p></figcaption></figure>

After the script is properly connected and mapped, the component's behavior becomes fully dynamic. The form will automatically generate and display the exact number of repeatable sections according to the logic implemented in the code.

<figure><img src="/files/5b0c36569fe9d24bd748c16c06e3b79b8725b769" alt=""><figcaption><p><em><strong>Figure 4.</strong> Repeatable section with repetition count control (feeding the section with a script)</em></p></figcaption></figure>

## Example of a Repeatable Section with values to be summed

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 we attach in the **External data source** the 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, we attach the repeating component with values to be summed, and in the output parameters we select output, i.e. the sum of the values, as the text attribute.

<figure><img src="/files/dda6d69d8d525e82d4823ce332269ba1260596d8" 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 feeding a section with a service or script)
* demoRepeatableSectionValidator (form with a validator for repeating values in a section)
  {% endhint %}

{% hint style="info" %}
♿WCAG: [Best WCAG 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.