# Sekcja - Section

Komponent sekcji pozwalający grupować inne komponenty.

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

✅ **Kiedy stosować:**

* Chcesz grupować inne komponenty w logiczny blok (np. dane osobowe).

:x: **Kiedy nie stosować:**

* Chodzi tylko o prosty separator bez grupowania treści. **Stosuj**: [HorizontalLine](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/0-struktura-i-nawigacja/linia-horizontalline).
* Powinna istnieć opcja wprowadzenia tego samego rodzaju danych wielokrotnie (np. dane dzieci). **Stosuj**: [Sekcja powtarzalna](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/7-komponenty-specjalne/sekcja-powtarzalna-repeatablesection).

## Właściwości komponentu

<table><thead><tr><th>Właściwość Eximee Designer</th><th width="180.88330078125">Nazwa atrybutu w Źródle</th><th>Opis</th></tr></thead><tbody><tr><td><strong>Tytuł</strong> (sekcja <strong>Podstawowe właściwości</strong>)</td><td>title</td><td>Tytuł sekcji. Istnieje możliwość odwołania się do zmiennych lub pól w tytule sekcji, np. <em>${sessionVariableName}</em> lub <em>${GesTextField1}.</em></td></tr><tr><td><strong>Sekcja zwijana</strong> (sekcja <strong>Pozostałe</strong>)</td><td>foldable</td><td>Określa czy sekcja powinna mieć możliwość zwinięcia. Domyślnie "false" - bez zwijania.</td></tr><tr><td><strong>Warunek zwinięcia sekcji</strong> (sekcja <strong>Pozostałe</strong>)</td><td>foldedCondition</td><td>Warunek zwinięcia sekcji - jeżeli jest spełniony to sekcja jest zwinięta. Dla <strong>presentation</strong>=STANDARD warunek jest obliczany na samym początku i służy tylko do pierwszego wyświetlenia sekcji. Dla <strong>presentation</strong>=LABELS zmiana wartości warunku powoduje modyfikację (zwinięcie i rozwinięcie) sekcji w trakcie wyświetlania wniosku.</td></tr><tr><td><strong>Reprezentacja graficzna pola</strong> (sekcja <strong>Pozostałe</strong>)</td><td>presentation</td><td>Określenie sposobu prezentacji rozwijania sekcji. Dostępne typy prezentacji zwijania/rozwijania: STANDARD i LABELS (poniżej szerszy opis). Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.</td></tr><tr><td><strong>Dynamiczny tytuł sekcji</strong> (sekcja <strong>Pozostałe</strong>)</td><td>sectionDynamicTitles</td><td>Umożliwia podanie tytułów sekcji, które są zależne od warunków. Wyświetlony zostanie pierwszy tytuł w kolejności, którego warunek zostanie spełniony. Jeżeli żaden z warunków nie zostanie spełniony, wyświetlany jest tytuł podany we własności <em>title.</em> Istnieje możliwość odwołania się do zmiennych lub pól np. <em>${sessionVariableName}</em> lub <em>${GesTextField1}.</em></td></tr></tbody></table>

> Więcej informacji o właściwościach komponentu: [Wspólne właściwości komponentów](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow)

## Zależności komponentów w sekcji

Dla zmiany wartości komponentu, od którego zależna jest sekcja, przeliczany jest stan sekcji, oraz wszystkich komponentów wewnątrz.

Dla zmiany dowolnego komponentu w sekcji przeliczane są wartości wszystkich komponentów od niej zależnych.

## Układanie komponentów (layout)

Na sekcji można zdefiniować layout analogicznie do layoutu dla strony wniosku (więcej w: [Zmiana szerokości komponentów (layout)](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/zmiana-szerokosci-komponentow)).

## Dynamiczne zasilanie tytułu sekcji

Tytuł sekcji można zasilać dynamicznie np. za pomocą zmiennych sesyjnych. Jeżeli we właściwości *title* wpiszemy zmienną sesyjną w postaci `${sessionVariableName}` to tytuł sekcji będzie przyjmował wartość zmiennej sesyjnej i za każdym razem kiedy zmieni się wartość tej zmiennej, zmieni się również tytuł sekcji.

Innym sposobem dynamicznego zasilania tytułu sekcji jest wykorzystanie właściwości **Dynamiczny tytuł sekcji** ([Sekcja - dynamiczne tytuły sekcji](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/0-struktura-i-nawigacja/sekcja-section/sekcja-dynamiczne-tytuly-sekcji)). W wyświetlonym oknie każdy kolejny tytuł dodajemy po kliknięciu przycisku **Dodaj dynamiczny tytuł sekcji**. W kolumnie **KLUCZ TYTUŁU** należy podać zdefiniowany wcześniej w zakładce **Tłumaczenia** klucz. Wartość klucza wyświetli się automatycznie w kolumnie **PODGLĄD**. Warunek definiujemy zgodnie z opisem w [Zaawansowany edytor warunków](https://docs.eximee.com/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>Ilustracja 1.</strong> Okno definiowania warunkowych tytułów sekcji.</em></p></figcaption></figure>

We właściwości **Dynamiczny tytuł sekcji** definiowane są warunki dla jakich tytuł sekcji ma ulec zmianie. Jeśli warunek `getValue("@GesCheckbox1")=="Y"` zostanie spełniony (czyli Checkbox1 przyjmie wartość Y - zostanie zaznaczony) to tytuł sekcji przyjmie wartość (**PODGLĄD**) wskazaną dla zdefiniowanego klucza **KLUCZ TYTUŁU** (czyli w tej sytuacji spełnienie warunku ustawia tytuł sekcji na *"Tytuł zmieniony po kliknięciu ..."*). Jeśli warunek nie zostanie spełniony, wyświetlany będzie tytuł podany we własności **Tytuł**.

<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>Ilustracja 2 i 3.</strong> Dynamiczne zasilanie tytułu sekcji - podgląd na wniosku.</em></p></figcaption></figure>

## Sekcja z możliwością zwijania/rozwijania

{% hint style="info" %}
Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
{% endhint %}

Dla sekcji dostępne są dwa typy prezentacji zwijania/rozwijania (właściwość **Reprezentacja graficzna pola**):

* **STANDARD** - sekcja zwijana/rozwijana za pomocą przycisku umiejscowionego na końcu sekcji

<figure><img src="https://1082717226-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** - sekcja (bez tytułu!) zwijana/rozwijana za pomocą tekstu ustawianego w **Etykieta przycisku zwinięcia/rozwinięcia sekcji**.

<div data-with-frame="true"><figure><img src="https://1082717226-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" %}
W przypadku wystąpienia błędu walidacji na komponentach, które znajdują się wewnątrz zwiniętej sekcji, użytkownik nie zostanie w żaden sposób powiadomiony i jednocześnie nie będzie mógł przejść na kolejną stronę. Rolą projektanta wniosku jest dostarczenie odpowiedniego walidatora na stronie.
{% endhint %}

{% hint style="info" %}
Wniosek demo: demoSection
{% endhint %}