Skip to content

Tiles Matrix#

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

General Steps#

To use the {{ widgetname }} widget in a UI Page, follow the steps below:

  1. In any UI Page in Build mode, select the {{ widgetname }} from the widgets list located on the left side of the page; drag and drop to the desired place in the UI Page.
  2. Enter the Settings section of the widget through the three vertical dots.
  3. In the General tab, provide a name and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image.

Screenshot showing a matrix of entities with tiles.

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.

  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.

    Screenshot showing a matrix of entity tiles with column configuration options, including wrapping behavior.

    Screenshot showing a matrix of entity tiles with two columns, illustrating the wrap tiles customization setting.

  3. Optionally, define Inputs.

    Screenshot showing an Entity Tile Matrix input field with Ips and O input fields nearby.

  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.

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