# Wybór rachunku - AccountSelector

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

Komponent wyboru rachunku umożliwia wybranie go z listy rozwijanej. Każda pozycja może mieć osobno opisy, prezentowane w dwóch rzędach. Dodatkowo komponent wspiera grupowanie elementów pojawiających się na liście.

![](https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-a9d818da76ba5ebbe55788e763a6af58286ed018%2FaccountSelector.png?alt=media)

✅ **Kiedy stosować:**

* Wybór rachunku z listy rozwijanej, gdzie pozycje mają dodatkowy opis, numer konta, saldo lub grupowanie.

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

* Wystarczy wybór jednej opcji bez dodatkowych danych. **Stosuj**: [Radio](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/radio) / [Tile](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/kafel-tile) / [Combobox](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/pole-wyboru-wartosci-z-listy-combobox).

## Właściwości komponentu

| Właściwość Eximee Designer                      | Nazwa atrybutu w Źródle | Opis                                                                                                                                                     |
| ----------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Placeholder pola** (sekcja **Jakość danych**) | placeholderText         | Tekst widoczny w polu przed wybraniem jakiejkolwiek wartości.                                                                                            |
| **Pusta opcja**                                 | emptyOption             | Właściwość dodawana bezpośrednio do źródła. Wartość `true` wyświetla pierwszy element z listy; wartość `false` wyświetla placeholder (np. "Wybierz..."). |

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

## Parametry wejściowe komponentu

| Nazwa parametru       | Opis                                                                                                               |
| --------------------- | ------------------------------------------------------------------------------------------------------------------ |
| **iconUrl**           | Adres URL do ikony/zdjęcia wyświetlanego obok pozycji na liście (zasoby serwera Eximee).                           |
| **text**              | Główna etykieta (opis) pozycji na liście.                                                                          |
| **description**       | Dodatkowy opis pozycji, np. numer konta lub szczegółowe informacje (obsługuje wartości tekstowe lub logiczne).     |
| **suffix**            | Krótki opis dodatkowy wyświetlany na końcu pozycji, np. kwota lub waluta.                                          |
| **groupId**           | Identyfikator grupy. Pozycje z tym samym ID są grupowane i sortowane alfabetycznie w ramach sekcji.                |
| **group**             | Flaga określająca, czy ma być prezentowany wariant z podziałem na grupy (`true`/`false`).                          |
| **ellipsis**          | Określa, czy `description` ma być skracane do jednej linii (`true`/`false`).                                       |
| **ellipsisText**      | Określa, czy `text` ma być skracany do jednej linii. Domyślnie `true`. Ustawienie `suffix` wymusza wartość `true`. |
| **singleAccountList** | Informacja, czy prezentować widok pojedynczej listy kont (`true`/`false`).                                         |
| **shortAccountList**  | Informacja, czy prezentować skróconą wersję listy kont (`true`/`false`).                                           |

## Warianty komponentu

![Ilustracja 1. Komponent z samymi nazwami kont](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/iFerW96MOtF1gmDGLBBL/12_files/image2020-10-7_15-59-47.png)

![Ilustracja 2. Komponent z dodatkowym opisem](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/tYyWFwwhFTRlYIOV8HqM/12_files/image2020-10-7_16-0-16.png)

![Ilustracja 3. Komponent z dodatkowym opisem oraz sekcjami](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/QlJzxtg4ImJkeN9YE3Xz/12_files/image2020-10-7_16-0-56.png)

## Informacje o stanie komponentu

Po wybraniu konkretnej opcji komponent przyjmuje wartość w następującym formacie:

```
[{
    "suffix":"(14 731,21 PLN)",
    "description":"83 1123 1023 0000 2613 9510 0000",
    "groupId":"Konta",
    "text":"Konto za zero",
    "value":"4"
}]
```

Jeżeli elementów zostanie wybranych więcej niż jeden, lista ta będzie zawierać więcej pozycji.

## Zasilenie komponentu wartościami

Aby zasilić komponent danymi w modelu low-code, należy skonfigurować Zewnętrzne Źródło Danych (EDS). Poniżej znajduje się przykład zwracający listę rachunków:

```js
function callService(context) {
    // Pobranie parametrów kontekstowych (opcjonalnie)
    const showSuffix = context.getFirstParameter("showSuffix") === "true";

    return [
        {
            "value": "1",
            "text": "Konto za Zero",
            "description": "83 1123 1023 0000 2613 9510 0000",
            "suffix": showSuffix ? "(14 731,21 PLN)" : null,
            "groupId": "Konta osobiste",
            "iconUrl": "/assets/icons/account_active.png",
            "ellipsis": true
        },
        {
            "value": "2",
            "text": "Karta Kredytowa MC",
            "description": "45 1010 1023 0123 2618 9510 1111",
            "suffix": showSuffix ? "(5 000,00 PLN)" : null,
            "groupId": "Karty",
            "iconUrl": "/assets/icons/card_gold.png",
            "ellipsis": true
        }
    ];
}
```

{% hint style="info" %}
Uwaga! Jeśli w domenie komponentu znajduje się wyłącznie jeden rachunek, wówczas zostaje on automatycznie wybrany, a komponent staje się zablokowany.
{% endhint %}

Po dokonaniu wyboru, komponent przechowuje dane w formacie tablicy obiektów:

```js
[{
    "value": "1",
    "text": "Konto za Zero",
    "description": "83 1123 1023 0000 2613 9510 0000",
    "suffix": "(14 731,21 PLN)",
    "groupId": "Konta osobiste"
}]
```

Wniosek demo:

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