# Grupa checkbox - CheckboxGroup

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

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

![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/xKlEda8T6CdBMGM660B3/14_files/image2025-5-14_14-23-19.png)

## Właściwości komponentu

| Właściwość Eximee Designer                                               | Nazwa atrybutu w Źródle | Opis                                                                                                            |
| ------------------------------------------------------------------------ | ----------------------- | --------------------------------------------------------------------------------------------------------------- |
| <p><strong>Liczba kolumn</strong><br>(sekcja <strong>Układ</strong>)</p> | columns                 | Liczba kolumn, w których mają zostać rozłożone checkboxy (domyślnie puste, czyli rozłożenie w jednej kolumnie). |

> 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)

<figure><img src="https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/MjJJSoDR5zwLtG77x1va/14_files/image2025-5-19_12-36-46.png" alt=""><figcaption><p><em><strong>Ilustracja 1.</strong> Przykładowy wygląd komponentu na wniosku.</em></p></figcaption></figure>

## 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:

{% code title="demo-checkbox-group-items-with-popup.js" expandable="true" %}

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

```

{% endcode %}

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FVhQQP65ijCH7OOUbmxRu%2Fimage.png?alt=media&#x26;token=d310effc-d03e-4ca5-981a-47793d1ea146" alt=""><figcaption><p><em><strong>Ilustracja 2.</strong> Przykład podpięcia wyjść w komponencie zasilanym skryptem.</em></p></figcaption></figure>

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