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

# Tiles Matrix

![tilesMatrixIcon][tilesMatrixIcon]

## 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.

![tilesMatrixExample][tilesMatrixExample]

## General Steps

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

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

## Widget Customization

1. Optionally, in the **Style** tab, you can define a Border Width and Color.

    ![Screenshot showing the Entity Tile Matrix Style settings in the Widget Tools Main Settings.](images/entity_tilesmatrix_style.png)

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

3. Optionally, define **Inputs**.

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

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

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

[tilesMatrixIcon]: images/uiTilesMatrix.png
[tilesMatrixExample]: images/uiTilesMatrixExample.png