---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-entity-tiles
widgetname: Entity Tiles
description: "This documentation details a UI widget displaying entity instances in tiles with customizable options and actions"
---

# Entity Tiles

![entityTiles][entityTiles]

## Overview

The Entity Tiles widget displays a list of instances for a given entity type in square or rectangle tiles. It is possible to associate an action to be triggered when the tile is double clicked. An Example is shown below, where an Entity Tiles widget is used in the left of the UI Page, to show multiple **Products**.

![entityTilesExample][entityTilesExample]

## General Steps

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

![entityTilesGeneral][entityTilesGeneral]

## Widget Customization

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

      ![Screenshot showing a widget customization interface with options for border width and color.](images/entitytiles_style.png)

2. In the **Setup** tab, provide the Selection and View mode details:

      * **Tiles Display Mode** - Choose the shape of the tiles used to display entities: Rectangle or Square
      * **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.
      * **Sort Property** - Choose the property by which the entities will be sorted alphabetically. You can select from any of the properties available for the chosen entity type.
      * **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.
      * **Entity Type** - Specify the entity type you wish to configure.

      ![entityTilesSetup][entityTilesSetup]

3. Optionally, define **Inputs**.

      ![entityTilesInputs][entityTilesInputs]

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

      ![entityTilesLinks][entityTilesLinks]

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

[entityTiles]: images/uiEntityTiles.png
[entityTilesExample]: images/uiPageExample11.png
[entityTilesGeneral]: images/entitytiles_general.png
[entityTilesInputs]: images/entitytiles_inputs.png
[entityTilesLinks]: images/entitytiles_links.png
[entityTilesSetup]: images/entitytiles_setup.png