Sekcja powtarzalna - RepeatableSection

Zestaw pól, które mogą być wielokrotnie wypełnione we wniosku przez użytkownika.

Właściwości komponentu

Właściwość Eximee Designer	Nazwa atrybutu w Źródle	Opis
Minimalna liczba wystąpień sekcji (sekcja Podstawowe właściwości)	minCount	Minimalna liczba wystąpień sekcji powtarzalnej (początkowa wartość 1). W chwili wyświetlania wniosku jest to także liczba wystąpień, które są domyślnie widoczne i dostępne. Usuwając elementy sekcji podczas wypełniania wniosku nie można zejść poniżej tej liczby. Jako wartość pola można podać liczbę (np. 3), wyrażenie odwołujące się do wartości zmiennej lub komponentu (np. ${GesTextField1}) bądź wstawkę js (Wstawki JavaScript).
Maksymalna liczba wystąpień sekcji (sekcja Podstawowe właściwości)	maxCount	Maksymalna liczba wystąpień sekcji powtarzalnej (początkowa wartość 5). Dodając elementy sekcji nie można przekroczyć tej liczby. Jako wartość pola można podać liczbę (np. 3), wyrażenie odwołujące się do wartości zmiennej lub komponentu (np. ${GesTextField1}) bądź wstawkę js (Wstawki JavaScript).
Tytuł (sekcja Podstawowe właściwości)	title	Tytuł. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
Tytuł całej sekcji powtarzalnej (sekcja Podstawowe właściwości)	parentSectionTitle	Tytuł dla całej sekcji powtarzalnej.
Etykieta przycisku zwinięcia sekcji (sekcja Pozostałe)		Etykieta przycisku zwinięcia sekcji. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
Etykieta przycisku rozwinięcia sekcji (sekcja Pozostałe)		Etykieta przycisku rozwinięcia sekcji. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
Sekcja zwijana (sekcja Pozostałe)	foldable	Określa czy sekcja powinna mieć możliwość zwinięcia (początkowo ustawiona na "false"). Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
Warunek zwinięcia sekcji (sekcja Pozostałe)	foldedCondition	Warunek zwinięcia sekcji. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniami.
Sposób prezentacji rozwijania sekcji (sekcja Pozostałe)	presentation	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.
Dynamiczne etykiety przycisków (sekcja Pozostałe)	plusMinusLabels	Warunki dla widoczności przycisków dodawania/usuwania elementów sekcji powtarzalnej.
Etykieta przycisku usunięcia sekcji (sekcja Pozostałe)	minusText	Etykieta dla przycisku minus (usunięcie elementu sekcji powtarzalnej).
Etykieta przycisku dodania sekcji (sekcja Pozostałe)	plusText	Etykieta dla przycisku plus (dodanie elementu sekcji powtarzalnej).
Tytuł rozwijanej sekcji (sekcja Pozostałe)	rowTitleExpanded	Tytuł wyświetlany dla rozwiniętej sekcji. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
Tytuł zwiniętej sekcji (sekcja Pozostałe)	rowTitleCollapsed	Tytuł wyświetlany dla zwiniętej sekcji. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
Obramowanie komponentu (sekcja Pozostałe)	parentSectionFrameVisible	Ustawienie flagi powoduje wyświetlenie ramki wokół wszystkich wystąpień sekcji powtarzalnej (początkowo ustawiona na "false"). Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
Wartość przesunięcia przycisku dodawania (sekcja Pozostałe)	plusButtonOffset	Wartość przesunięcia przycisku dodawania (początkowo ustawiona na 0). Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
Pomoc kontekstowa przycisku usuwania (sekcja Pozostałe)	minusToolTipText	Pomoc kontekstowa przycisku usuwania wiersza

Więcej informacji o właściwościach komponentu: Wspólne właściwości komponentów

Praca z Sekcją powtarzalną

Sekcja powtarzalna umożliwia wielokrotne wyświetlenie tego samego zestawu komponentów na formularzu. Wewnątrz sekcji można umieścić komponenty bazowe, np. Pole tekstowe, Pole wyboru wartości z listy itd. Każde wystąpienie sekcji zawiera ten sam zestaw komponentów, ale może przechowywać inne wartości.

Liczbę dostępnych wystąpień sekcji określają właściwości Minimalna liczba wystąpień sekcji oraz Maksymalna liczba wystąpień sekcji. Użytkownik może podczas wypełniania formularza dodawać kolejne wystąpienia sekcji lub usuwać istniejące za pomocą odpowiednich przycisków.

Na poniższym przykładzie każde wystąpienie Sekcji powtarzalnej zawiera dwa Pola tekstowe.

Ilustracja 1. Przykładowy wygląd komponentu na wniosku

W Repeatable Section nie można użyć zmiennych sesyjnych — tutaj używamy pól technicznych (np. komponent Pole tekstowe z zaznaczoną właściwością Pole techniczne). Również zasilanie pól z usługi w sekcji powtarzalnej może powodować nietypowe błędy — np. nieprawidłowe wyświetlanie komponentów (ale nie musi). W takiej sytuacji należy zastosować obejście w postaci pola technicznego.

Zasilenie Sekcji powtarzalnej skryptem

Aby dynamicznie zasilić danymi Sekcję powtarzalną, należy skorzystać z zewnętrznego skryptu. W tym celu przejdź do Właściwości komponentu, wybierz zakładkę Interakcje, a następnie zaznacz Źródło danych zewnętrznych. Opcja ta pozwala na wybór skryptu, który dostarczy dane do komponentu.

Przykład skryptu generującego listę powtarzalną

Poniższy skrypt generuje listę powtarzalnych sekcji danych testowych na podstawie zadanej liczby wierszy i opcjonalnie dołącza dodatkowe pola (min, max, count) do pierwszego wiersza, jeśli odpowiednie flagi są ustawione.

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;
}

Kluczowym etapem po wybraniu źródła danych jest odpowiednia konfiguracja przepływu informacji:

• mapowanie pól - upewnij się, że parametry wejściowe skryptu (np. pole określające liczbę wierszy) są poprawnie powiązane z komponentami na wniosku. Podobnie, wyjściowe parametry skryptu (zwracane dane) muszą zostać przypisane do konkretnych atrybutów komponentu,
• nasłuchiwanie - pamiętaj o dodaniu nasłuchiwań na komponenty wzbudzające zmianę. Dzięki nim skrypt uruchomi się automatycznie i przeładuje sekcję, gdy tylko użytkownik zmieni wartość na formularzu (np. wpisze inną liczbę powtórzeń).

Ilustracja 2. Sposób zasilenia sekcji powtarzalnej skryptem

Ilustracja 3. Parametry wyjściowe skryptu

Po prawidłowym podpięciu i zmapowaniu skryptu, zachowanie komponentu staje się w pełni dynamiczne. Formularz automatycznie wygeneruje i wyświetli dokładną liczbę sekcji powtarzalnych, zgodnie z logiką wpisaną w kodzie.

Ilustracja 4. Sekcja powtarzalna ze sterowaniem liczbą powtórzeń (zasilenie sekcji skryptem)

Przykład Sekcji powtarzalnej z wartościami do zsumowania

Gdy chcemy zsumować wartości z powtarzającego się komponentu Pola tekstowego w Sekcji powtarzalnej, dodajemy kolejne Pole tekstowe poza sekcją i w jego właściwościach podpinamy w Źródle danych zewnętrznych skrypt SumService:

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)}];
}

W parametrach wejściowych skryptu podpinamy powtarzający się komponent z wartościami do zsumowania, a w parametrach wyjściowych wybieramy output, czyli sumę wartości, jako atrybut text.

Ilustracja 5. Podpięcie parametru wyjściowego w skrypcie SumService

Wnioski demo:

• demoRepeatableSection
• repeatable_section_service (wniosek pokazujący zasilenie sekcji usługą lub skryptem)
• demoRepeatableSectionValidator (wniosek z walidatorem dla powtarzających się wartości w sekcji)

♿WCAG: Dobre praktyki WCAG dla low-code dev