# Formatted content (collapsible) - RollableTextContent

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

A component used to present an artifact **Content** with a collapse/expand option (used e.g. to display a legal notice).

![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/oHPqW3opFxxnWRSP018U/9_files/image2025-5-16_12-44-19.png)

## Component properties

| Eximee Designer property                                             | Attribute name in Source | Description                                                                                                                                                                                                                                                    |
| -------------------------------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Field height** (section **Basic properties**)                      | contentHeight            | Component height (default set to 200). If all the text does not fit in the component, a vertical scroll bar is inserted. Availability of this functionality depends on the license and may not be available in all deployments.                                |
| **Field title** (section **Basic properties**)                       | contentTitle             | Title displayed at the top of the component (default empty). Clicking the title collapses/expands the component content.                                                                                                                                       |
| **Presentation of the field content** (section **Basic properties**) | contentDefaultVisible    | Showing the component content (by default the property is selected - value set to "true"). If the property is deselected (value "false"), the component content is collapsed, and it will be displayed after clicking the expand arrow or the component title. |

> More information about the component properties: [Common component properties](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow)

If the inserted artifact **Content** used the expression **/more/**, a "Show more" button will be displayed in the component at this point (clicking it will display the hidden part of the content).

## Attaching the content source in the component

To display the content in the component, you need to select the artifact created earlier **Content** (artifact creation is described in: [Creating and attaching the Content artifact](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/4-tresci/tresc-textcontent/tworzenie-i-podpiecie-artefaktu-tresc)).

{% stepper %}
{% step %}

#### Select the component

After selecting the component **Formatted content (collapsible)** go in the panel **Properties** to the section **Interactions**.
{% endstep %}

{% step %}

#### Select an external data source

In the field **EXTERNAL DATA SOURCE** click **Select service** and connect the service *TextContentService* (service attachment description: [Example of attaching the service in the component](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)).
{% endstep %}

{% step %}

#### Specify the input parameter and output mappings

As the input parameter "artifact" after clicking the option **Select component or constant** indicate the appropriate artifact **Content**and in the output parameters map the relevant attributes to the service output parameters.
{% endstep %}
{% endstepper %}

![Figure 1. Example appearance of the component in the application (content collapsed)](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/F5duYVMIx18fNWTtjb0K/9_files/image2025-5-16_12-45-12.png)

![Figure 2. Example appearance of the component in the application (content expanded)](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/ZzOtKxDOOCL71yyvf6Bg/9_files/image2025-5-16_12-46-31.png)

{% hint style="info" %}
Demo application: demoRollableTextContent
{% endhint %}

{% hint style="info" %}
♿WCAG: [WCAG best practices for low-code dev](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki)
{% endhint %}