# FrontendComponent

{% hint style="info" %}
Availability of the functionality depends on the license and may not be available in all implementations.
{% endhint %}

FrontendComponent is a component to which we pass an artifact of the same name, written in Angular and attached to exForms.

<figure><img src="/files/fc6a6ef9d26b4536f83ea0c4a5a731ae75dc6e2b" alt=""><figcaption></figcaption></figure>

## Component properties

| Eximee Designer property     | Attribute name in Source | Description                                                                                                                                                                                                                                                                                                                                                                            |
| ---------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Component name**           | componentName            | FrontendComponent name                                                                                                                                                                                                                                                                                                                                                                 |
| **Component configuration**  | config                   | An object containing configuration specific to each FrontendComponent. If the source is located in a complex component, provide the full path to it (e.g., if a FrontendComponent uses a text field with id GesTextField5 located in the same complex component with id GesComplexComponent3, then the path to that text field will be as follows: GesComplexComponent3.GesTextField5) |
| **Required check condition** | requiredCheckCondition   | <p>Condition for recognizing the component as having a value.</p><p>A component may have some value, but the condition in <em>requiredCheckCondition</em> ultimately determines its emptiness.</p><p>It is worth noting: <em>requiredCondition</em> - require the FrontendComponent value (required condition)</p>                                                                     |
| **List of services**         | serviceProxies           | A list of services needed to handle the component. It should include the ServiceProxy and ScriptService called from the component.                                                                                                                                                                                                                                                     |
| **List of Content**          | textContents             | A list of used text contents. Remember to add these artifacts also in the Dependencies of the main application template.                                                                                                                                                                                                                                                               |
| **List of translation keys** | translations             | A list of keys that have a value defined in Languages.                                                                                                                                                                                                                                                                                                                                 |

Some standard component properties have been disabled. If, for example, we want the component to have its own tooltip, label, or editability condition, this must be provided on the frontend/Angular side.

The FrontendComponent has no vertical paddings assigned in the grid, because some components do not have a graphical representation. Adding spacing is the responsibility of the component.

## Adding a component to the application

The component is located in the base components palette: ![](/files/9853ae8e897ba1ac7f1aa415159ad1d8070461fd)

Added to the application, it looks as follows:

<figure><img src="/files/96a81c1ab93b63dfc22e937d5b4ea011802f7c29" alt=""><figcaption><p align="center"><em><strong>Figure 1.</strong> FrontendComponent added to the application</em></p></figcaption></figure>

## Component configuration

After placing the component on the application, go to the configuration. To do this, click the option located in the properties **Add Frontend Component** (in the section **FRONTEND COMPONENT CONFIGURATION**). Then enter the component name (in the field **Enter component name**) and define the parameterization: input parameters, translation keys, serviceproxy and content.

<figure><img src="/files/b1f7f2cc707adbf414b1fc8ae3866ac5dd3b3628" alt=""><figcaption><p><em><strong>Figure 2.</strong> Example of translation keys added for a FrontendComponent named CorpoComboboxWithValidationOnItemsComponent</em></p></figcaption></figure>


---

# 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/komponenty-rozszerzone/frontendcomponent.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.
