# 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. ![](/files/DgYu5nunsjsLOZW9PyZL) ✅ **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](/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/radio.md) / [Tile](/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/kafel-tile.md) / [Combobox](/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/pole-wyboru-wartosci-z-listy-combobox.md). ## 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](/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow.md) ## 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](/files/6b4b050440d3b23a36f871b361e94ee44e96e695) ![Ilustracja 2. Komponent z dodatkowym opisem](/files/9f7880e7a2a8a217b62f7f6015b257bd3a777d05) ![Ilustracja 3. Komponent z dodatkowym opisem oraz sekcjami](/files/b1244eca9f75800efecf8007fa77155e815cb05b) ## 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 %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/wybor-rachunku-accountselector.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.