Wybór rachunku - AccountSelector

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

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.

✅ Kiedy stosować:

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

❌ Kiedy nie stosować:

• Wystarczy wybór jednej opcji bez dodatkowych danych. Stosuj: Radio / Tile / 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

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

Ilustracja 2. Komponent z dodatkowym opisem

Ilustracja 3. Komponent z dodatkowym opisem oraz sekcjami

Informacje o stanie komponentu

W przeciwieństwie do większości komponentów wyboru, AccountSelector przechowuje wartość jako obiekt JSON zawierający wszystkie dane wybranej pozycji.

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"
}]

Odwoływanie się do wybranej wartości

Możliwe jest wyszukiwanie konkretnych fragmentów tekstu za pomocą metody indexOf().

Dla przykładowej wartości komponentu zaprezentowanej powyżej, warunek:

getValue("GesAccountSelector1").indexOf('"value":"4"') != -1

zwróci:

• true - jeżeli wybrano konto o wartości 4,
• false - jeżeli wybrano inną pozycję.

Metoda indexOf() zwraca pozycję znalezionego tekstu lub -1, jeśli wskazany fragment nie występuje w wartości komponentu.

Może to być przydatne w sytuacji, gdy widoczność innego komponentu ma być zależna od wybranego rachunku.

Przykład warunku widoczności ukrywający komponent dla konta o wartości 4:

getValue("GesAccountSelector1").indexOf('"value":"4"') == -1

W analogiczny sposób można odwoływać się do pozostałych właściwości obiektu, np. text, description, suffix lub groupId.

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:

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

Uwaga! Jeśli w domenie komponentu znajduje się wyłącznie jeden rachunek, wówczas zostaje on automatycznie wybrany, a komponent staje się zablokowany.

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

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

Wniosek demo:

Wniosek demo: demoAccountSelector