Grupa checkbox - CheckboxGroup

Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.

Komponent Grupy checkboxów zasilany ze słownika lub usługi.

Właściwości komponentu

Właściwość Eximee Designer

Nazwa atrybutu w Źródle

Opis

Liczba kolumn (sekcja Układ)

columns

Liczba kolumn, w których mają zostać rozłożone checkboxy (domyślnie puste, czyli rozłożenie w jednej kolumnie). Wartość należy dobrać z uwzględnieniem czytelności komponentu. Zbyt duża liczba kolumn może powodować nieczytelne wyświetlanie treści, opisów, ikon lub linków powiązanych z checkboxami.

Czy oznaczać zmianę na podsumowaniu (sekcja Pozostałe)

changedByUserSummaryInfoCondition

Określa, czy zmiana wartości komponentu powinna zostać oznaczona w komponencie Podsumowanie wniosku (FormSummary). Właściwość ma zastosowanie wyłącznie w formularzach wykorzystujących komponent Podsumowanie wniosku.

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

Rozmieszczenie checkboxów w kolumnach

Po ustawieniu większej liczby kolumn checkboxy są rozmieszczane kolejno w wierszach, od lewej do prawej.

Przykładowo dla 6 elementów i 3 kolumn układ będzie następujący:

1  2  3
4  5  6

Przykład rozmieszczenia checkboxów zasilonych tym samym źródłem danych - dla jednej, dwóch i trzech kolumn - przedstawiono na Ilustracji 1.

Słownik jako źródło danych

Komponent może otrzymać dane ze słownika. Wystarczy utworzony wcześniej słownik podpiąć w polu ŹRÓDŁO DANYCH ZEWNĘTRZNYCH.

Skrypt jako źródło danych

W komponentach CheckboxGroup w ŹRÓDŁO DANYCH ZEWNĘTRZNYCH (External Data Source) można podpiąć skrypty, które nie licząc pola Id, zwracają inne wartości w zależności od wybranych opcji na wejściu. Pozwala to na definiowanie zawartości wyświetlanych Checkboxów w grupie zgodnie z naszymi potrzebami oraz zależnościami wprowadzanymi na wejściu w sposób dynamiczny. Możemy zdefiniować wyświetlanie się Checkboxu z ikoną, opisem, dodatkowym opisem, linkiem uruchamiającym popup, tytuł popupu, treść popupu, liczbę występujących Checkboxów oraz ich zaznaczenie.

Przykładowa implementacja skryptu zasilającego zwracającego zdefiniowane opisy pól i ikon w zależności od wybranych opcji wejściowych:

demo-checkbox-group-items-with-popup.js

function callService(context) {
    const isNullOrFalse = v => v === false || v === 'false' || v == null;
    const withoutDescription = context.getFirstParameter("withoutDescription");
    const withoutIconUrl = context.getFirstParameter("withoutIconUrl");
    const withoutPopupLinkText = context.getFirstParameter("withoutPopupLinkText");
    const withoutPopupContentHtml = context.getFirstParameter("withoutPopupContentHtml");
    const withoutPopupTitle = context.getFirstParameter("withoutPopupTitle");
    const withCount = +context.getFirstParameter("withCount") || 3;

    const items = [];
    for (let idx = 1; idx <= withCount; ++idx) {
        items.push({
            id: 'checkbox' + idx,
            text: 'Opcja ' + idx,
            description: isNullOrFalse(withoutDescription) ? 'Opis pola ' + idx : null,
            iconUrl: isNullOrFalse(withoutIconUrl) ? 'assets/icons_3d/CA019_ic3d_wallet.png' : null,
            popupLinkText: isNullOrFalse(withoutPopupLinkText) ? 'Więcej' : null,
            popupContentHtml: isNullOrFalse(withoutPopupContentHtml) ? 'Tekst <strong>sformatowany</strong> <em>z usługi</em> na popupie.' : null,
            popupTitle: isNullOrFalse(withoutPopupTitle) ? 'Przykładowa treść' : null
        });
    }
    return items;
}

Wniosek demo: demoGesCheckboxGroup

WsteczCheckbox DalejCheckbox - prezentacja typu SWITCH

Ostatnia aktualizacja 1 miesiąc temu

Czy to było pomocne?

demo-checkbox-group-items-with-popup.js

function callService(context) {
    const isNullOrFalse = v => v === false || v === 'false' || v == null;
    const withoutDescription = context.getFirstParameter("withoutDescription");
    const withoutIconUrl = context.getFirstParameter("withoutIconUrl");
    const withoutPopupLinkText = context.getFirstParameter("withoutPopupLinkText");
    const withoutPopupContentHtml = context.getFirstParameter("withoutPopupContentHtml");
    const withoutPopupTitle = context.getFirstParameter("withoutPopupTitle");
    const withCount = +context.getFirstParameter("withCount") || 3;

    const items = [];
    for (let idx = 1; idx <= withCount; ++idx) {
        items.push({
            id: 'checkbox' + idx,
            text: 'Opcja ' + idx,
            description: isNullOrFalse(withoutDescription) ? 'Opis pola ' + idx : null,
            iconUrl: isNullOrFalse(withoutIconUrl) ? 'assets/icons_3d/CA019_ic3d_wallet.png' : null,
            popupLinkText: isNullOrFalse(withoutPopupLinkText) ? 'Więcej' : null,
            popupContentHtml: isNullOrFalse(withoutPopupContentHtml) ? 'Tekst <strong>sformatowany</strong> <em>z usługi</em> na popupie.' : null,
            popupTitle: isNullOrFalse(withoutPopupTitle) ? 'Przykładowa treść' : null
        });
    }
    return items;
}