# Example of attaching a service in a component

### Powering a component with a service

Below is an explanation of how to power a component with data fetched dynamically from an external service. This ensures that the options list is always up to date and consistent with the data from the external system.

**Step-by-step configuration of the sample component:**

1. **Selecting a component:** To select a component, in edit mode open the request in **Eximee Designer** and select the component that is to be powered from the service.
2. **Selecting the data source:** In the **Properties** panel, go to the **Interactions** section and find the field **External data source**. Then click the **Select service**button. A window with the list of available services will open. In the search field, enter part of the name to filter the list of services, and then select the correct service from the list.<br>

   <div align="right" data-full-width="true"><figure><img src="https://2112972046-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>Figure 1.</strong> Window for selecting an external data source after clicking the "Select service" option in the "External data source" field</em></p></figcaption></figure></div>
3. **Description and version (optional):** After selecting the service, a short information text describing how the service works (if it has been defined) and the service version in the tooltip next to the name should appear below the field.
4. **Invocation condition (optional):** If the service needs to be called only in certain situations, define an invocation condition. To do this, click the field **Add condition** and enter a conditional expression in JavaScript (you can use `getValue("COMPONENT_ID")`). When the condition returns true, the service will be called.<br>

   <figure><img src="https://2112972046-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>Figure 2.</strong> Example of a condition for invoking the attached service</em></p></figcaption></figure>
5. **Caching results (optional):** When the selected service returns static or rarely changing data (e.g. a country dictionary from the database), it is worth enabling cache. The **Cache** option is located next to the service definition – selecting it will temporarily store the service call result and make subsequent calls less frequent. **Note**: caching is recommended only for services fetching dictionaries or other unchanging data.
6. **Input parameter mapping:** In the **Input parameters** in the EDS configuration window, assign the required service input parameters from the form context. For each parameter, you can select the appropriate form component, a session variable, or enter a constant value. If the service accepts a list of values or multiple parameters at once, it is worth using the **Select multiple** option – it allows you to select several fields and add them sequentially (after clicking **Add**) to a single input parameter.<br>

   <figure><img src="https://2112972046-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>Figure 3.</strong> Window for mapping multiple input parameters available after clicking the "Select multiple" option</em></p></figcaption></figure>
7. **Output parameter mapping:** In the **Output parameters** you should specify which service output fields correspond to which component attributes. The list of available attributes depends on the component type, and the list of parameters depends on the service definition. You should assign, for example:

   * **Value (id)** – identifier/key parameter returned by the service,
   * **Label (text)** – parameter containing the name/description of the item to be displayed,
   * **Additional description (description)** – optional description parameter (second line).

   For each assigned parameter, you can optionally set a formatter – select the formatter name from the list if the data requires formatting (e.g. date format, number masking).\ <br>

   <figure><img src="https://2112972046-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>Figure 4.</strong> Example of mapping the output parameter "value" to the "text" attribute and attaching a formatter to the mapped value</em></p></figcaption></figure>
8. **Applying settings**: After configuration is complete, save the changes. From that moment on, the component will be powered with data from the attached service. During request presentation, Eximee will call the service and automatically fill the list of values.
9. **Additional settings:**
   * If the service returns an additional description for each item (attribute *description*), make sure that in the **Styling** section of the component the **Position of the additional description**field is set. Otherwise, the additional description may not be visible.
   * If needed, you can use the **Simulation** tab to attach a script simulating the service's behavior. This allows you to test the form without access to a real backend – select an existing simulation script or add a new one in this tab.
   * The service can be removed from the component at any time – in the Interactions section, click the trash icon next to the name of the attached service to disconnect the EDS.

#### Repeatable section as a service input parameter <a href="#przykladpodpieciawkomponencieuslugi-sekcjapowtarzalnajakoparametrwejsciowyuslugi" id="przykladpodpieciawkomponencieuslugi-sekcjapowtarzalnajakoparametrwejsciowyuslugi"></a>

As an input parameter for the service, you can provide the identifier of a field located in a repeatable section. In this case, a list of values of the specified field from all rows of the section will be sent to the service.


---

# Agent Instructions: 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:

```
GET https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/zasilanie-wartosciami-z-zewnetrznych-zrodel/przyklad-podpiecia-w-komponencie-uslugi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
