# Tile group - TileGroup

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

Single-choice group whose graphic representation of options is a tile

![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/j1m4NGDLpv7zrm5B8WVw/5s_files/image2025-5-16_13-50-40.png)

## Component properties

| Eximee Designer property                                                       | Attribute name in Source | Description                                                                                                                                                    |
| ------------------------------------------------------------------------------ | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>Label<br>(section <strong>Basic properties</strong>)</p>                    | label                    | Label for the component.                                                                                                                                       |
| <p><strong>Number of columns</strong><br>(section <strong>Layout</strong>)</p> | columns                  | Number of columns in the component - the value is taken into account only when the component domain is fed by **External data source** (External Data Source). |

> 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)

## Component value

The component value is set to the value of the field selected by the user **Tile** ([Tile - Tile](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/kafel-tile)). No selection means that the property **value** of the component is empty text.

## Internal components

Inside the component **Tile group** one type of component can be embedded — **Tile** (component description in [Tile - Tile](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/kafel-tile)). The way components are arranged inside **tile group** can be specified using the field **Number of columns** available in the section **Layout**.

## Component input parameters

| Parameter             | Description                                                                                                                                                                                                                                                            |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **id**                | The value taken by the selected tile (required field). An empty value returned from the service will cause a system error.                                                                                                                                             |
| **content**           | The tile content saved in HTML (scripts inside this HTML are not supported by the platform).                                                                                                                                                                           |
| **additionalContent** | Additional tile content saved in HTML (scripts inside this HTML are not supported by the platform). Functionally, it may behave differently depending on the selected implementation, for example, content to be additionally displayed when a given tile is selected. |
| **title**             | Tile title.                                                                                                                                                                                                                                                            |
| **columns**           | The number of columns on which the tiles are to be arranged (optional field). The value returned from the service overrides the value set in the Number of columns parameter.                                                                                          |
| **value**             | The value the group will take after domain population (optional field). If a value outside the domain is returned, the default value will be set (if it is in the new domain) or left empty.                                                                           |
| **popupTriggerLabel** | The label text whose click will show a popup (Optional functionality. Not available in all implementations.)                                                                                                                                                           |
| **popupTextContent**  | The name and version of the text content (in the name-version format) that will be shown in the popup (Optional functionality. Not available in all implementations.)                                                                                                  |

## Clearing the selection

To clear the current selection, set the component to an empty value (**value**), where an empty value means empty text: "". It should also be noted that resetting the selection does not mean restoring the default value, but deselecting the currently selected Tile.

<figure><img src="https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/AOfS0MRMgyVUW3cT0CyC/5s_files/Zaznaczenie_333.png" alt=""><figcaption><p><em><strong>Illustration 1.</strong> Example appearance of the component in the request.</em></p></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/sprf82XuoASPR7FK0OPP/5s_files/Zaznaczenie_332.png" alt=""><figcaption><p><em><strong>Figure 2.</strong> Example appearance of a component with tiles containing a title.</em></p></figcaption></figure>

{% hint style="info" %}
Demo conclusions: demoTileGroup
{% endhint %}

{% hint style="info" %}
♿WCAG: [WCAG best practices for low-code dev](https://github.com/Consdata/eximee-docs/blob/main/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki.md)
{% endhint %}