# Example of binding a service in the component ### Feeding a component with a service Below is an explanation of how to feed a component with data retrieved 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 fed from the service. 2. **Selecting the data source:** In the **Properties** panel you need to go to the section **Interactions** and find the field **External data source**. Then click the **Select service**. A window with the list of available services will open. In the search field, enter a fragment of the name to filter the list of services, and then select the correct service from the list.

Figure 1. Window for selecting an external data source after clicking the "Select service" option in the "External data source" field

3. **Description and version (optional):** After selecting the service, a short message describing how the service works (if it has been defined) and the service version should appear below the field in the hint next to the name. 4. **Invocation condition (optional):** If the service needs to be called only in specific situations, you need to 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.

Figure 2. Example of a condition for invoking a linked service

5. **Caching results (optional):** When the selected service returns static or infrequently 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 result of the service call and reduce the frequency of repeated calls. **Note**: caching is recommended only for services that retrieve dictionaries or other unchanging data. 6. **Input parameter mapping:** In the tab **Input parameters** in the EDS configuration window you need to 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 consecutively (after clicking **Add**) to a single input parameter.

Figure 3. Window for mapping multiple input parameters available after clicking the "Select multiple" option

7. **Output parameter mapping:** In the tab **Output parameters** you need to determine which output fields from the service 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).\

Figure 4. Example of mapping the output parameter "value" to the "text" attribute and attaching a formatter for the mapped value

8. **Applying the settings**: After finishing the configuration, you need to save the changes. From that moment on, the component will be fed with data from the linked service. When displaying the request, 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 component's **Styling** section the field **Position of additional description**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 operation. This allows you to test the form without access to the 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 linked service to disconnect the EDS. #### Repeating section as a service input parameter As an input parameter for the service, you can provide the identifier of a field located in the repeating section. In such a case, a list of values from the specified field from all rows in the section will be sent to the service.