# Section - Section

Section component allowing other components to be grouped.

![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/kD2gjION4QLRjFVTB4J2/18s_files/image2025-5-14_14-10-34.png)

✅ **When to use:**

* You want to group other components into a logical block (e.g. personal data).

:x: **When not to use:**

* It is only a simple separator without grouping content. **Use**: [HorizontalLine](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/0-struktura-i-nawigacja/linia-horizontalline).
* There should be an option to enter the same type of data repeatedly (e.g. children’s data). **Use**: [Repeatable section](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/7-komponenty-specjalne/sekcja-powtarzalna-repeatablesection).

## Component properties

<table><thead><tr><th>Eximee Designer property</th><th width="180.88330078125">Attribute name in the Source</th><th>Description</th></tr></thead><tbody><tr><td><strong>Title</strong> (section <strong>Basic properties</strong>)</td><td>title</td><td>Section title. It is possible to refer to variables or fields in the section title, e.g. <em>${sessionVariableName}</em> or <em>${GesTextField1}.</em></td></tr><tr><td><strong>Collapsible section</strong> (section <strong>Other</strong>)</td><td>foldable</td><td>Specifies whether the section should be collapsible. Default "false" - no collapsing.</td></tr><tr><td><strong>Section collapse condition</strong> (section <strong>Other</strong>)</td><td>foldedCondition</td><td>Section collapse condition - if it is met, the section is collapsed. For <strong>presentation</strong>=STANDARD the condition is calculated at the very beginning and is used only for the first display of the section. For <strong>presentation</strong>=LABELS, changing the value of the condition causes the section to be modified (collapsed and expanded) while the application is being displayed.</td></tr><tr><td><strong>Graphical representation of the field</strong> (section <strong>Other</strong>)</td><td>presentation</td><td>Defines how the section expansion is presented. Available collapse/expand presentation types: STANDARD and LABELS (more detailed description below). Availability of the feature depends on the license and may not be available in all implementations.</td></tr><tr><td><strong>Dynamic section title</strong> (section <strong>Other</strong>)</td><td>sectionDynamicTitles</td><td>Allows you to provide section titles that depend on conditions. The first title in order whose condition is met will be displayed. If none of the conditions is met, the title provided in the property is displayed <em>title.</em> It is possible to refer to variables or fields, e.g. <em>${sessionVariableName}</em> or <em>${GesTextField1}.</em></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)

## Dependencies of components in the section

When the value of a component on which the section depends changes, the state of the section and all components inside it is recalculated.

When any component in the section changes, the values of all components depending on it are recalculated.

## Arranging components (layout)

A layout can be defined on the section analogously to the layout for the application page (more in: [Changing component widths (layout)](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/zmiana-szerokosci-komponentow)).

## Dynamic feeding of the section title

The section title can be fed dynamically, e.g. using session variables. If in the property *title* we enter a session variable in the form `${sessionVariableName}` then the section title will take the value of the session variable, and each time the value of this variable changes, the section title will also change.

Another way of dynamically feeding the section title is to use the property **Dynamic section title** ([Section - dynamic section titles](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/0-struktura-i-nawigacja/sekcja-section/sekcja-dynamiczne-tytuly-sekcji)). In the displayed window, each subsequent title is added by clicking the button **Add dynamic section title**. In the column **TITLE KEY** you should enter the key previously defined in the **Translations** tab. The key value will be displayed automatically in the column **PREVIEW**. The condition is defined according to the description in [Advanced condition editor](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/logika-biznesowa/jezyk-wyrazen-definiowania-warunkow-warunki-z-getvalue/zaawansowany-edytor-warunkow).

<figure><img src="https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/neTpRfUGY4eUxDEuE8kF/18s_files/image2023-2-6_14-53-35.png" alt=""><figcaption><p><em><strong>Figure 1.</strong> Window for defining conditional section titles.</em></p></figcaption></figure>

In the property **Dynamic section title** conditions are defined for when the section title should change. If the condition `getValue("@GesCheckbox1")=="Y"` is met (i.e. Checkbox1 takes the value Y - is checked), then the section title will take the value (**PREVIEW**) assigned to the defined key **TITLE KEY** (i.e. in this situation, meeting the condition sets the section title to *"Title changed after clicking ..."*). If the condition is not met, the title provided in the property will be displayed **Title**.

<figure><img src="https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/V7idrS5bSxlk4wHT6JJC/18s_files/image2025-5-15_8-40-34.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/5OmRdsiCYWssFdex27PT/18s_files/image2025-5-15_8-41-5.png" alt=""><figcaption><p><em><strong>Figures 2 and 3.</strong> Dynamic feeding of the section title - preview on the application.</em></p></figcaption></figure>

## Section with collapse/expand capability

{% hint style="info" %}
Availability of the functionality depends on the license and may not be available in all deployments.
{% endhint %}

For sections, two collapse/expand presentation types are available (property **Graphical representation of the field**):

* **STANDARD** - section collapsed/expanded using a button located at the end of the section

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FLbpzZLtejlzoQrs73Doc%2Fimage2018-9-4_15-58-41.png?alt=media&#x26;token=574c1b04-444d-49f8-90af-5641eecc8e7e" alt="" width="563"><figcaption></figcaption></figure>

* **LABELS** - section (without a title!) collapsed/expanded using text set in **Label for the section collapse/expand button**.

<div data-with-frame="true"><figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Ft93P1MoEhUHAJql1H936%2Fimage2018-9-4_16-1-40.png?alt=media&#x26;token=f2608fea-79c2-4235-8ece-46c4e65c8a80" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
If a validation error occurs on components inside a collapsed section, the user will not be notified in any way and will also not be able to move to the next page. It is the application designer’s responsibility to provide an appropriate validator on the page.
{% endhint %}

{% hint style="info" %}
Demo application: demoSection
{% endhint %}