---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-tiles-matrix
widgetname: Tiles Matrix
description: "This documentation details configuring a matrix tile widget for displaying and interacting with multiple entities"
---

# Tiles Matrix

:core-static-entitytilesmatrix-lg:{style="font-size: 100px"}

## Overview

This widget offers the possibility to display a set of entities in tiles in a matrix form using multiple Entity List View Widgets for each row. An example of a Tiles Matrix widget is shown below.

![Screenshot showing an example of matrix of entities with tiles](images/uiTilesMatrixExample.png)

## Data Requirements

The Tiles Matrix widget expects data in a matrix structure. The output of the selected data source must match this structure, or be transformed by a compatible converter. Check the expected input and output types before connecting a data source.

For example, **Steps And Resources To Matrix** converts `Step Resources ForAreaCollection` into a Tiles Matrix display. It is designed for that data structure and is not a general-purpose converter for arbitrary data sources. For more information, see [[user-guide-uipages-converters|UI Page Converters]].

## General

{% include-markdown 'includes/pages/ui_widgets_general_steps.md' %}

![Screenshot showing a matrix of entities with tiles.](images/entity_tilesmatrix_general.png)

## Style

{% include-markdown 'includes/pages/ui_widgets_style.md' %}

## Columns

In the **Columns**, choose the matrix column configuration, by defining:

* **Name** - Specify the name of the column.
* **Placeholder Text** - Enter the placeholder text to display when no data is present.
* **Selection Mode** - Select the widget's selection mode: None, Single, or Multiple.
* **Action** - Choose from any of the available actions in the MES system that should be executed when a tile is selected.
* **Action Trigger Mode** - Define how the action should be triggered: On click or On double click.
* **Wrap Tiles** - Define whether the entity tiles should wrap to the next line when there is not enough space in the current line. This option is set to `true` by default.

=== "Column 1"

    ![Screenshot showing a matrix of entity tiles with column configuration options, including wrapping behavior.](images/entity_tilesmatrix_columns_1.png)

=== "Column 2"

    ![Screenshot showing a matrix of entity tiles with two columns, illustrating the wrap tiles customization setting.](images/entity_tilesmatrix_columns_2.png)

## Inputs

Optionally, define **Inputs**.

![Screenshot showing an Entity Tile Matrix input field with Ips and O input fields nearby.](images/entity_tilesmatrix_inputs.png)

## Links

Optionally, define the **Links** between this widget and other elements of the UI Page.

![Screenshot showing links between the widget and other elements on the page.](images/entity_tilesmatrix_links.png)

By saving and closing the settings, the widget will be changed accordingly.