# Pole wyboru wartości z listy - Combobox Pole wyboru wartości z listy ![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/xe2WAmAmUpXOkjX7bQsB/10_files/image2025-5-14_15-0-11.png) ✅ **Kiedy stosować:** * Lista jest długa (np. lista krajów) lub potrzebna jest opcja wyszukiwania. :x: **Kiedy nie stosować:** * Opcji jest kilka i powinny być widoczne lub opcje wykluczają się wzajemnie (np. TAK/NIE). **Stosuj**: [Radio](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/radio) / [Tile](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/kafel-tile). * Wybór dotyczy obiektu z dodatkowymi danymi (np. rachunek z saldem). **Stosuj**: [AccountSelector](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/wybor-rachunku-accountselector). Pole wyboru wartości z listy to komponent wymagający zasilenia źródłem danych. Aby to zrobić, należy w panelu **Właściwości** komponentu przejść do sekcji **Interakcje** i wybrać **Źródło danych zewnętrznych**. Następnie w widocznym oknie należy kliknąć w **Wybierz serwis** i wyszukać na liście odpowiedni **słownik, usługę** lub **skrypt**. Każdy z tych elementów jest oznaczony na liście inną ikonką. Po wybraniu odpowiedniego źródła danych w sekcji **Źródło danych zewnętrznych** widnieje jego nazwa oraz informacja o rodzaju: * DICTIONARY - jeśli wybrano słownik, * EDS - jeśli wybrano usługę, * SCRIPT - jeśli wybrano serwis skryptowy. Szczegóły: [Podpięcie słownikowego źródła danych](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/zasilanie-wartosciami-z-zewnetrznych-zrodel/podpiecie-slownikowego-zrodla-danych). ## Właściwości komponentu | Właściwość Eximee Designer | Nazwa atrybutu w Źródle | Opis | | --------------------------------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Liczba znaków do rozpoczęcia wyszukiwania** (sekcja **Podstawowe właściwości**) | minTextLenghtToSearch | Określenie po ilu wpisanych znakach ma nastąpić przeszukiwanie wartości komponentu. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Włączenie opcji szukania** (sekcja **Podstawowe właściwości**) | searchable |

Włączenie opcji szukania (domyślnie właściwość nie jest zaznaczona) - w zależności od licencji i/lub kanału:

| | **Opis pola** (sekcja **Jakość danych**) | description | Tekst wyświetlany jako opis pola poniżej niego, domyślnie jest to wartość pusta. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Pozycja dodatkowego opisu** (sekcja **Stylizacja**) | descriptionPosition | Pozycja opisu (do wyboru wartości **NONE, BOTTOM** i **RIGHT**). W celu wyświetlenia słownika z opisem należy podpiąć dedykowaną usługę (pole **Źródło danych zewnętrznych**). Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Etykieta dla jednej pozycji na liście** (sekcja **Pozostałe**) | singleValueLabel | Określa zachowanie komponentu w przypadku, gdy na liście znajduje się tylko jeden element. Jeżeli opcja jest wybrana, lista rozwijana zastępowana jest przez etykietę (domyślnie właściwość nie jest zaznaczona). | | **Prezentacja treści dostosowana do rozmiaru pola** (sekcja **Pozostałe**) | truncateContent | Właściwość pozwala na ograniczenie prezentowania wybranej wartości do tylu znaków ile mieści się w standardowym rozmiarze komponentu dodanego na wniosek. Wszystkie znaki wykraczające poza ten rozmiar zostaną zastąpione wielokropkiem (...). Domyślnie właściwość jest zaznaczona. W przypadku odznaczenia właściwości, wysokość komponentu zostanie dostosowana do rozmiaru tekstu w wybranej wartości. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Natywny na mobile** (sekcja **Pozostałe**) | nativeOnMobile | Określa czy w wersji mobilnej wyświetla się natywny komponent "". Odznaczenie właściwości powoduje wyświetlenie popupu dla każdego urządzenia (domyślnie właściwość jest zaznaczona). Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Dodatkowa etykieta** (sekcja **Pozostałe**) | descriptionLabel | Jest to dodatkowy opis dotyczący komponentu. Podrzędny do właściwości **Etykieta**. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Wyświetlanie "Wybierz..."** (sekcja **Pozostałe**) | emptyOption | Wyświetlanie jako pierwszej pozycji komponentu opcji "Wybierz..." (domyślnie właściwość jest zaznaczona). Odznaczenie właściwości powoduje wyświetlenie pierwszego elementu słownika. | | **Alternatywny tekst dla "Wybierz..."** (sekcja **Pozostałe**) | emptyOptionCustomText | Tekst wyświetlany zamiast "Wybierz...", gdy opcja "Wyświetlanie 'Wybierz...'" jest zaznaczona. | | **Ukrycie "Wybierz..." na liście dostępnych do wyboru opcji** | hideEmptyOptionOnList | Ukrycie domyślnej wartości "Wybierz..." na liście wyboru (domyślnie właściwość nie jest zaznaczona). Aby właściwość ta miała sens, konieczne jest włączenie opcji **Wyświetlanie "Wybierz..."**. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Wysokość listy słownikowej** | listHeight | Wysokość listy słownikowej (domyślnie wartość -1). Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Szerokość listy słownikowej** | listWidth | Szerokość listy słownikowej (domyślnie wartość -1). Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Reprezentacja graficzna komponentu** | presentation | Reprezentacja graficzna komponentu (do wyboru wartości **STANDARD**, **WHEEL**, **WARIANT 2.0**). Wartość **STANDARD** określa standardowy wygląd komponentu, **WHEEL** jest prezentacją komponentu w postaci przewijanej rolki (dostępne tylko w wybranych wdrożeniach). Wartość **WARIANT 2.0** określa nowy wygląd komponentu (dostępny tylko w wybranych wdrożeniach). | > Więcej informacji o właściwościach komponentu: [Wspólne właściwości komponentów](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow) ## Parametry wyjściowe komponentu przy zasileniu ze skryptu | Parametr | Opis | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **id** | Identyfikator poszczególnych elementów | | **text** | Etykieta poszczególnych elementów | | **description** | Dodatkowa etykieta poszczególnych elementów | | **value** | Wartość komponentu | | **iconUrl** | URL wskazujący grafikę prezentowaną jako ikonka w polu. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **initValue** | Wartość początkowa | | **metadata** | Dodatkowe dane poszczególnego elementu, wykorzystywane przy zbieraniu metryk. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. |

Ilustracja 1. Lista wartości dostępna po podpięciu słownika z listą krajów.

{% hint style="warning" %} Wartości w słowniku zawsze będą wyświetlane w kolejności, w jakiej znajdują się w źródle zasilającym. {% endhint %} ## Przykład pól z dodatkowym opisem W komponentach Combobox w Źródło danych zewnętrznych można podpiąć skrypty, które do pola poza kluczem (id) i etykietą (label) zwracają również inne wartości, np. opis (description). Aby opis (description) był widoczny, poza zasileniem parametru należy również ustawić Pozycję dodatkowego opisu (Stylizacja). Przykładowo, pole Combobox może być zasilone skryptem z podstawowymi parametrami wyjściowymi na id pola (cardId) oraz nazwę pola (cardName) oraz z ustawieniem Pozycji dodatkowego pola na BOTTOM (Stylizacja). Przykładowa implementacja skryptu zasilającego z dodatkowymi parametrami wyjściowymi na opis pola (cardDesc) oraz ikonę pola (cardIcon): {% code title="demoComboboxWithIconScript.js" expandable="true" %} ```js function callService(context) { const result = [ { 'cardOrder': "1", 'cardId': "icon1", 'cardIcon': "BB014_ic_radio_button.d91bc285933ad3ab.svg", 'cardName': "Karta 1", 'cardDesc': "*2321 (Jan Kowalski)" }, { 'cardOrder': "2", 'cardId': "icon2", 'cardIcon': "BB013_ic_check_box.b1a7fe0d7d753cf4.svg", 'cardName': "Karta 2", 'cardDesc': "*4978 (Janusz Nowak)" }, { 'cardOrder': "3", 'cardId': "icon3", 'cardIcon': "AC148_ic_ZUS_document_add.1b6eb10c6160e0b2.svg", 'cardName': "Karta 3", 'cardDesc': "*1417 (Gerwazy Torpeda)" } ] return result; } ``` {% endcode %}

Ilustracja 2. Przykład podpięcia wyjść w komponencie zasilanym skryptem

Przykładowa implementacja skryptu zasilającego z dodatkowym parametrem wyjściowym na opis pola (description): {% code title="demoComboboxSlownik.js" expandable="true" %} ```js function callService(context) { const rachunki = { rachunek1: { numer: "64 1140 0000 1811 5461 7042 2796", relacja: "właściciel", saldo: "10 000,00 PLN", dataZamkniecia: "01.01.2022" }, rachunek2: { numer: "43 1840 0007 8519 1222 0331 1083", relacja: "właściciel", saldo: "3 488,00 PLN", dataZamkniecia: "" }, rachunek3: { numer: "15 1610 0006 7705 7581 6839 8900", relacja: "współwłaściciel", saldo: "13 680,00 PLN", dataZamkniecia: "08.05.2019" }, rachunek4: { numer: "54 1950 0001 4324 4271 6620 4943", relacja: "właściciel", saldo: "566,00 PLN", dataZamkniecia: "" }, rachunek5: { numer: "22 1240 0001 0453 0518 5950 6955", relacja: "pełnomocnik", saldo: "2 300,00 PLN", dataZamkniecia: "" } }; const klucze = Object.keys(rachunki); const rachunkiPosiadane = {}; for (let i = 0; i < klucze.length; i++) { const klucz = klucze[i]; rachunkiPosiadane[klucz] = `${rachunki[klucz].numer}`; } return wartoscComboboxa(rachunkiPosiadane); // FUNKCJE function wartoscComboboxa(listaRachunkow) { const wynik = []; for (const rachunek in listaRachunkow) { wynik.push(new DictElement(rachunek, "Konto osobiste", listaRachunkow[rachunek])); } return wynik; } function DictElement(value, label, description) { this.value = value; this.label = label; this.description = description; } } ``` {% endcode %}

Ilustracja 3. Przykład podpięcia wyjść w komponencie zasilanym skryptem

{% hint style="info" %} Wniosek demo: demoCombobox {% endhint %} {% hint style="info" %} ♿WCAG: [Dobre praktyki WCAG dla low-code dev](https://docs.eximee.com/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki) {% endhint %}