# Repeatable section - RepeatableSection

A set of fields that can be filled in multiple times in the application 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 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 the repeatable section (initial value 1). When the application is displayed, this is also the number of occurrences that are visible and available by default. When removing section elements while filling out the application, it is not possible to go below this number.</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 the repeatable section (initial value 1). When adding section elements, it is not possible to exceed this number.</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 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 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 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>Determines whether the section should be collapsible (initially set to "false").</p><p>The availability of 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 presentation method</strong><br>(section <strong>Other</strong>)</td><td>presentation</td><td><p>Defines how section expansion is presented. Available collapse/expand presentation types: STANDARD and LABELS (more details below).</p><p>The availability of 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 repeatable section elements.</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 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 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 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 this flag displays a frame around all occurrences of the repeatable section (initially set to "false").</p><p>The availability of 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 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>Tooltip for the row delete button</td></tr></tbody></table>

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

## Working with a repeatable section

Placing a repeatable section on the application template adds an area that can be worked with similarly to the entire application. This means that this area has its own page layout and can contain any number of base components. In the example in the figure, the repeatable section instance has been configured as a composite consisting of a text field and list value selection fields with labels. The plus/minus sign in the lower right corner is used to add additional rows of the section.

In the resulting application, repeatable section occurrences are displayed according to the configuration. The user can remove or add occurrences using the button respectively **minus** and **plus**.

<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>Illustration 1.</strong> Example appearance of the component in the request.</em></p></figcaption></figure>

{% hint style="warning" %}
In Repeatable Section, you cannot use [session variables](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/zmienne-sesyjne) — here we use technical fields (e.g. the Text Field component with the property [Technical field](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow)selected). Also, populating fields from a service in a repeatable section may cause unusual errors — for example, incorrect display of components (but it does not have to). In such a case, a workaround in the form of a technical field should be used.
{% endhint %}

## Populating a repeatable section with a service

It is recommended that when creating a ServiceProxy, you inherit from the class **AbstractRepeatableServiceProxy**. This class automatically returns 3 values: minCount, maxCount and count. These values can be set or left untouched — they are optional.

Sample ServiceProxy:

* It has 2 input fields added,
* It has 2 additional output fields added (**minCount**, **maxCount**, **count** is added in the class above),
* To set the parameters, you only need to call the appropriate setters on the model **RepeatableSectionMetadata** ,
* After setting the above parameters, we set the values that we will then map to the individual fields.

```java
@Component
@Service(AbstractServiceProxy.class)
public class RepeatableTestSp extends AbstractRepeatableServiceProxy {

    public RepeatableTestSp(String name, String description) {
        super("RepeatableTestSp", "Description...");
        this.inputFields.add(new ServiceProxyField("input1"));
        this.inputFields.add(new ServiceProxyField("input2"));
        this.outputFields.add(new ServiceProxyField("output1"));
        this.outputFields.add(new ServiceProxyField("output2"));
    }

    @Override
    protected RepeatableSectionMetadata callRepeatableSectionService(
            Map<String, List<String>> requestParams, String lang) throws ServiceProxyException {
        final RepeatableSectionMetadata repeatableSectionMetadata = new RepeatableSectionMetadata();
        repeatableSectionMetadata.setMinCount(1);
        repeatableSectionMetadata.setMaxCount(10);
        repeatableSectionMetadata.setCount(5);
        repeatableSectionMetadata.setRepeatableSectionRows(createRows());
        return repeatableSectionMetadata;
    }

    private List<Map<String, String>> createRows() {
        final List<Map<String, String>> rows = new ArrayList<>();
        rows.add(createRow());
        rows.add(createRow());
        return rows;
    }

    private Map<String, String> createRow() {
        final Map<String, String> map = new HashMap<>();
        map.put("output1", "1");
        map.put("output2", "abc");
        return map;
    }
}
```

To use the above ServiceProxy, in **externalDataSource** the type should be **REPEATABLE\_SCECTION\_SERVICE**.

To summarize: the service added 2 rows, but set the count value to 5. Therefore, 5 rows will be displayed, of which only 2 will be populated with the mapped value from the output1 endpoint.

{% hint style="info" %}
It is also possible to populate a repeatable section with a script.
{% endhint %}

## Example of a repeatable section with values to sum

When we want to sum values from the repeating GesTextField1 component in a repeatable section, we create a new GesTextField2 outside the section and connect it in **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 input parameters of the script, we connect the repeating component with values to be summed, GesTextField1, and in the output parameters we choose 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&#x26;token=a5cae498-992b-4bb1-8868-f8f6af9d1070" alt=""><figcaption><p><em><strong>Figure 2.</strong> Connecting the output parameter in the SumService script</em></p></figcaption></figure>

{% hint style="info" %}
Demo applications:

* demoRepeatableSection
* repeatable\_section\_service (application showing section population by a service or script)
* demoRepeatableSectionValidator (application with a validator for repeated values in a section)
  {% endhint %}

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