> 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/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/wybor-rachunku-accountselector.md). # Account selection - AccountSelector {% hint style="info" %} Availability of functionality depends on the license and may not be available in all deployments. {% endhint %} The account selector component allows selecting an account from a dropdown list. Each item can have separate descriptions, displayed in two rows. Additionally, the component supports grouping of items displayed in the list. ![](/files/696214c6148a9020714d87ba5c5843388ef5b21c) ✅ **When to use:** * Selecting an account from a dropdown list, where items have an additional description, account number, balance, or grouping. :x: **When not to use:** * A single option selection without additional data is sufficient. **Use**: [Radio](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/radio.md) / [Tile](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/kafel-tile.md) / [Combobox](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/pole-wyboru-wartosci-z-listy-combobox.md). ## Component properties | Eximee Designer property | Attribute name in the Source | Description | | ------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Field placeholder** (section **Data quality**) | placeholderText | Text visible in the field before any value is selected. | | **Empty option** | emptyOption | Property added directly to the source. The value `true` displays the first item from the list; the value `false` displays the placeholder (e.g. "Select..."). | > More information about component properties: [Common component properties](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow.md) ## Component input parameters | Parameter name | Description | | --------------------- | ----------------------------------------------------------------------------------------------------------------------- | | **iconUrl** | URL to the icon/photo displayed next to the list item (Eximee server resources). | | **text** | Main label (description) of the list item. | | **description** | Additional description of the item, e.g. account number or detailed information (supports text or boolean values). | | **suffix** | Short additional description displayed at the end of the item, e.g. amount or currency. | | **groupId** | Group identifier. Items with the same ID are grouped and sorted alphabetically within a section. | | **group** | Flag determining whether the version with grouping should be presented (`true`/`false`). | | **ellipsis** | Determines whether `description` should be truncated to one line (`true`/`false`). | | **ellipsisText** | Determines whether `text` should be truncated to one line. By default `true`. Setting `suffix` forces the value `true`. | | **singleAccountList** | Information whether to present a single account list view (`true`/`false`). | | **shortAccountList** | Information whether to present a shortened version of the account list (`true`/`false`). | ## Component variants ![Illustration 1. Component with account names only](/files/7778b41ec0bdce1490048dafdde51149316384f4) ![Illustration 2. Component with additional description](/files/4183f0d66fe25ef423661ed5b3c438044c48ebf7) ![Illustration 3. Component with additional description and sections](/files/f59348809a647c29c9d39afca1861b94070f23ce) ## Component state information Unlike most selection components, AccountSelector stores the value as a JSON object containing all data of the selected item. After selecting a specific option, the component takes the value in the following format: ``` [{ "suffix":"(14 731,21 PLN)", "description":"83 1123 1023 0000 2613 9510 0000", "groupId":"Accounts", "text":"Zero account", "value":"4" }] ``` ## Referring to the selected value It is possible to search for specific text fragments using the method `indexOf()`. For the example component value presented above, the condition: ``` getValue("GesAccountSelector1").indexOf('"value":"4"') != -1 ``` returns: * `true` - if the account with value `4`, * `false` - if another item is selected. {% hint style="info" %} The method `indexOf()` returns the position of the found text or `-1`, if the specified fragment does not occur in the component's value. {% endhint %} This may be useful in situations where the visibility of another component should depend on the selected account. Visibility condition example hiding the component for the account with value `4`: ``` getValue("GesAccountSelector1").indexOf('"value":"4"') == -1 ``` Similarly, you can refer to the other properties of the object, e.g. `text`, `description`, `suffix` or `groupId`. ## Filling the component with values To populate the component with data in the low-code model, configure an External Data Source (EDS). Below is an example returning a list of accounts: ```js function callService(context) { // Retrieve context parameters (optional) const showSuffix = context.getFirstParameter("showSuffix") === "true"; return [ { "value": "1", "text": "Zero account", "description": "83 1123 1023 0000 2613 9510 0000", "suffix": showSuffix ? "(14 731,21 PLN)" : null, "groupId": "Personal accounts", "iconUrl": "/assets/icons/account_active.png", "ellipsis": true }, { "value": "2", "text": "Credit Card MC", "description": "45 1010 1023 0123 2618 9510 1111", "suffix": showSuffix ? "(5 000,00 PLN)" : null, "groupId": "Cards", "iconUrl": "/assets/icons/card_gold.png", "ellipsis": true } ]; } ``` {% hint style="info" %} Note! If the component domain contains only one account, it is automatically selected and the component becomes disabled. {% endhint %} After the selection is made, the component stores the data in the following object array format: ```js [{ "value": "1", "text": "Zero account", "description": "83 1123 1023 0000 2613 9510 0000", "suffix": "(14 731,21 PLN)", "groupId": "Personal accounts" }] ``` Demo request: {% hint style="info" %} Demo request: 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/documentation/documentation-en/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.