> For the complete documentation index, see [llms.txt](https://docs.eximee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/wybor-rachunku-accountselector.md). # 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 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ę. {% hint style="info" %} Metoda `indexOf()` zwraca pozycję znalezionego tekstu lub `-1`, jeśli wskazany fragment nie występuje w wartości komponentu. {% endhint %} 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: ```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 This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/wybor-rachunku-accountselector.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.