# Account selection - AccountSelector {% hint style="info" %} Availability of the functionality depends on the license and may not be available in all deployments. {% endhint %} The account selector component allows you to choose an account from a dropdown list. Each item can have separate descriptions, displayed in two rows. Additionally, the component supports grouping items that appear on the list. ![](https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-a9d818da76ba5ebbe55788e763a6af58286ed018%2FaccountSelector.png?alt=media) ✅ **When to use:** * Selecting an account from a dropdown list, where the items have an additional description, account number, balance, or grouping. :x: **When not to use:** * A single option selection without additional data is enough. **Use**: [Radio](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/radio) / [Tile](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/kafel-tile) / [Combobox](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/pole-wyboru-wartosci-z-listy-combobox). ## 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. Value `true` displays the first item from the list; value `false` displays the placeholder (e.g. "Select..."). | > More information about the component properties: [Common component properties](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow) ## Component input parameters | Parameter name | Description | | --------------------- | ----------------------------------------------------------------------------------------------------------------------- | | **iconUrl** | URL to the icon/image displayed next to the item on the list (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 logical 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 indicating whether the variant with grouping should be displayed (`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 on whether to display the single account list view (`true`/`false`). | | **shortAccountList** | Information on whether to display the shortened version of the account list (`true`/`false`). | ## Component variants ![Figure 1. Component with account names only](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/iFerW96MOtF1gmDGLBBL/12_files/image2020-10-7_15-59-47.png) ![Figure 2. Component with additional description](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/tYyWFwwhFTRlYIOV8HqM/12_files/image2020-10-7_16-0-16.png) ![Figure 3. Component with additional description and sections](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/QlJzxtg4ImJkeN9YE3Xz/12_files/image2020-10-7_16-0-56.png) ## Component state information 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" }] ``` If more than one item is selected, this list will contain more items. ## Populating the component with values To populate the component with data in the low-code model, you need to 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": "MC Credit Card", "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 there is only one account in the component domain, it is selected automatically and the component becomes locked. {% endhint %} After making a selection, 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 application: {% hint style="info" %} Demo application: demoAccountSelector {% endhint %}