# Creating and attaching a formatter

## Adding a new formatter <a href="#tworzenieformatera-dodawanienowegoformatera" id="tworzenieformatera-dodawanienowegoformatera"></a>

To create a new formatter or edit an existing one, go to the module **Library** and select the tab **Formatters.** A list of formatters will be displayed. From this view, you can create a new formatter, review the save history, or edit an existing artifact.

<figure><img src="/files/1436790bd0314b5db9d3f3b25b65f4ef54145e13" alt=""><figcaption><p><em><strong>Figure 1.</strong> Window with the list of formatters and the context menu of one of the artifacts</em></p></figcaption></figure>

## Preview / Edit <a href="#formatery-podglad-edycja" id="formatery-podglad-edycja"></a>

After going to a specific formatter, its content will be displayed in the editor. From this level, you can start editing the artifact and save its new version.

<figure><img src="/files/667b0a848e6a9583f3d059d19caf90e576c7e0aa" alt=""><figcaption></figcaption></figure>

## Setting formatting for a component <a href="#title-text" id="title-text"></a>

### Components supporting formatting <a href="#ustawienieformatowaniadlakomponentu-komponentyobslugujaceformatowanie" id="ustawienieformatowaniadlakomponentu-komponentyobslugujaceformatowanie"></a>

Formatting is available for the following components:

* **Text field** (Text Field),
* **Text area** (Text Area),
* **Date** (Date picker).

### Setting a formatter for a component <a href="#ustawienieformatowaniadlakomponentu-ustawienieformateradlakomponentu" id="ustawienieformatowaniadlakomponentu-ustawienieformateradlakomponentu"></a>

The formatter can be set in the component properties view (the component must be selected first).

The component has 2 properties responsible for the formatter's operation (available in the section **Interactions**):

|                          |                                                                                                                                                                               |
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **FORMATTER**            | In this field, select the appropriate formatter.                                                                                                                              |
| **Real-time formatting** | Specifies whether formatting occurs after entering the next character (property enabled) or after leaving the field (property disabled). The property is disabled by default. |

<figure><img src="/files/3dcf7b1c763984521ea4035cf5547ce68dbecad4" alt=""><figcaption><p><em><strong>Figure 3.</strong> Example of the attached formatter "duzeMaleLitery"</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/logika-biznesowa/scriptcode/formatery/tworzenie-i-podpiecie-formatera.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.