# Przykład podpięcia w komponencie usługi

### Zasilenie komponentu usługą

Poniżej przedstawiono, jak zasilić komponent danymi pobieranymi dynamicznie z usługi zewnętrznej. Dzięki temu lista opcji będzie zawsze aktualna i spójna z danymi z systemu zewnętrznego.

**Konfiguracja przykładowego komponentu krok po kroku:**

1. **Wybór komponentu:** W celu wybrania komponentu należy w trybie edycji otworzyć wniosek w **Eximee Designer** i zaznaczyć komponent, który ma być zasilany z usługi.
2. **Wybór źródła danych:** W panelu **Właściwości** trzeba przejść do sekcji **Interakcje** i znaleźć pole **Źródło danych zewnętrznych**. Następnie kliknąć przycisk **Wybierz serwis**. Otworzy się okno listy dostępnych usług. W polu wyszukiwania należy wpisać fragment nazwy, aby odfiltrować listę usług, a następnie wybrać właściwą usługę z listy.<br>

   <div align="right" data-full-width="true"><figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2F3lpjxA38FgcYu1Iw8ESI%2Fimage.png?alt=media&#x26;token=6f678f58-2a5c-4cb2-af7e-4fbfa0a4b931" alt=""><figcaption><p><em><strong>Ilustracja 1.</strong> Okno wyboru zewnętrznego źródła danych po kliknięciu w polu "Źródło danych zewnętrznych" opcji "Wybierz serwis"</em></p></figcaption></figure></div>
3. **Opis i wersja (opcjonalnie):** Po wybraniu serwisu poniżej pola powinna wyświetlić się krótka informacja opisująca działanie usługi (jeśli została zdefiniowana) oraz wersja usługi w podpowiedzi obok nazwy.
4. **Warunek wywołania (opcjonalnie):** W przypadku potrzeby wywoływania usługi tylko w określonych sytuacjach należy zdefiniować warunek wywołania. W tym celu kliknąć pole **Dodaj warunek** i wpisać wyrażenie warunkowe w języku JavaScript (można używać `getValue("ID_KOMPONENTU")`). Gdy warunek zwróci true, usługa zostanie wywołana.<br>

   <figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FWEu6HD75dbCdWPz2PIMC%2Fimage.png?alt=media&#x26;token=c3750c20-2b5f-4b84-b000-18372d105d30" alt="" width="563"><figcaption><p><em><strong>Ilustracja 2.</strong> Przykład warunku wywołania podpiętej usługi</em></p></figcaption></figure>
5. **Cache’owanie wyników (opcjonalnie):** Gdy wybrana usługa zwraca dane statyczne lub rzadko zmienne (np. słownik krajów z bazy), warto włączyć cache. Opcja **Cache** znajduje się obok definicji usługi – jej zaznaczenie spowoduje tymczasowe zapisanie wyniku wywołania usługi i rzadsze ponowne wywołania. **Uwaga**: cache’owanie zaleca się tylko dla usług pobierających słowniki lub inne niezmienne dane.
6. **Mapowanie parametrów wejściowych:** W zakładce **Parametry wejściowe** okna konfiguracji EDS należy przypisać wymagane parametry wejściowe usługi z kontekstu formularza. Dla każdego parametru można wybrać odpowiedni komponent formularza, zmienną sesyjną lub wpisać stałą wartość. Jeśli usługa przyjmuje listę wartości lub wiele parametrów naraz, warto skorzystać z opcji **Wybierz wiele** – pozwala ona wskazać kilka pól i dodać je kolejno (po kliknięciu **Dodaj**) do jednego parametru wejściowego.<br>

   <figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FOrSiBtayzKvCjTn6sFk7%2Fimage.png?alt=media&#x26;token=05d46228-1f3e-4a84-9b16-a88857277349" alt="" width="563"><figcaption><p><em><strong>Ilustracja 3.</strong> Okno mapowania wielu parametrów wejściowych dostępne po kliknięciu opcji "Wybierz wiele"</em></p></figcaption></figure>
7. **Mapowanie parametrów wyjściowych:** W zakładce **Parametry wyjściowe** należy określić, które pola wyjściowe z usługi odpowiadają którym atrybutom komponentu. Lista dostępnych atrybutów zależy od typu komponent, a lista parametrów – od definicji usługi. Należy przyporządkować np.:

   * **Wartość (id)** – parametr identyfikatora/klucza zwracanego przez usługę,
   * **Etykieta (text)** – parametr zawierający nazwę/opis pozycji do wyświetlenia,
   * **Dodatkowy opis (description)** – parametr opcjonalnego opisu (druga linia).

   Dla każdego przypisanego parametru można opcjonalnie ustawić formater – należy wybrać z listy nazwę formatera, jeśli dane wymagają formatowania (np. format daty, maskowanie numeru).\ <br>

   <figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FTXBZmPeRLfxaVQdTfUzw%2Fimage.png?alt=media&#x26;token=b3b51fbe-9832-4dbf-8a21-f93aad38ea5d" alt=""><figcaption><p><em><strong>Ilustracja 4.</strong> Przykład zmapowania parametru wyjściowego "value" do atrybutu "text" oraz podpięcia formatera dla zmapowanej wartości</em></p></figcaption></figure>
8. **Zastosowanie ustawień**: Po zakończeniu konfiguracji należy zapisać zmiany. Od tego momentu komponent będzie zasilany danymi z podpiętej usługi. Podczas prezentacji wniosku Eximee wywoła usługę i automatycznie wypełni listę wartości.
9. **Dodatkowe ustawienia:**
   * Jeśli usługa zwraca dodatkowy opis dla każdej pozycji (atrybut *description*), należy upewnić się, że w sekcji **Stylizacja** komponentu ustawiono pole **Pozycja dodatkowego opisu**. W przeciwnym razie dodatkowy opis może nie być widoczny.
   * W razie potrzeby można skorzystać z zakładki **Symulacja** w celu podpięcia skryptu symulującego działanie usługi. Pozwala to testować formularz bez dostępu do realnego backendu – należy wybrać istniejący skrypt symulacyjny lub dodać nowy w tej zakładce.
   * Usługę można usunąć z komponentu w dowolnym momencie – w sekcji Interakcje należy kliknąć ikonę kosza obok nazwy podpiętego serwisu, aby odłączyć EDS.

#### Sekcja powtarzalna jako parametr wejściowy usługi <a href="#przykladpodpieciawkomponencieuslugi-sekcjapowtarzalnajakoparametrwejsciowyuslugi" id="przykladpodpieciawkomponencieuslugi-sekcjapowtarzalnajakoparametrwejsciowyuslugi"></a>

Jako parametr wejściowy dla usługi można podać identyfikator pola znajdującego się w sekcji powtarzalnej. W takim przypadku do usługi zostanie wysłana lista wartości wskazanego pola ze wszystkich wierszy sekcji.