---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-entity-details
widgetname: Entity Details
description: "This documentation details a widget for displaying entity properties and attributes, customizable for UI pages"
---

# Entity Details

![entityDetails][entityDetails]

## Overview

The Entity Details widget displays a set of selected properties and attributes for a given entity instance.
For example, it can be used to display the properties of a given **Material** or **Resource**. An example is shown below, where this widget is used to show the details of a **Production Order**.

![entityDetailsExample][entityDetailsExample]

## General Steps

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

 ![entityDetailsGeneral][entityDetailsGeneral]

## Widget Customization

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

    ![Screenshot showing customization options for an entity's details page, including border width and color, font, and font size settings.](images/entitydetails_style.png)

2. In the **Setup** tab provide visualization and data related properties, such as:

    * **Show Entity Icon** - Choose if the widget displays the icon of the Entity selected. This option is set to `true` by default.
    * **Entity Icon Size** - Choose the size of the icon (Small or Large).
    * **Entity Type** - Choose the Entity Type available on your MES system.
    * **Entity** - Choose the Entity instance.

    ![entityDetailsSetup][entityDetailsSetup]

3. Optionally, define **Properties** that will be displayed. It is necessary to provide a name, that will be displayed to identify the property. If it's not user defined, select a value from the provided list of properties; if it is user defined, input a value.

    ![entityDetailsProperties][entityDetailsProperties]

4. Optionally, define the **Links** between this widget and other elements of the UI Page. In this section, it's necessary to define the input to the instance to be displayed by the widget.
  
    ![entityDetailsLinks](images/entitydetails_links1.png)

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

## Real Use Case

It often makes sense to see selected Entity Details displayed on a UI Page to avoid having to open the entity itself. To accomplish this, the Entity Details widget can be linked to an [[user-guide-uipage-widgets-entity-list]] widget or a [[user-guide-uipage-widgets-form]] widget that provides the entity.

Depending on the properties to be displayed, a Load Entity converter may be used to load additional data of the selected entity.

!!! info
	An example of the need for converters can be the access to the name of an area of a **Resource**. Since this information is not stored directly in the same database table as the **Resource** but linked to it as a foreign key in the same table. This means that in order for the information to be displayed in an Entity Details widget, the **Resource** entity has to be loaded for more levels. Each level in this context represents the distance of the desired property from the initial entity. For example, the **Area** name is 1 level away since **Area** is directly linked to **Resource**.

1. Add an integer property to the page (later required to define how many levels to load):

    ![Screenshot showing a UI with an incomplete properties section, including "Properties" and "DT property Details".](images/entitydetails_usecase_1.png)

2. Configure entity details widget for entity:

    ![entityDetailsSetup][entityDetailsSetup]

3. Add properties as required:

    ![Screenshot showing a UI with a property name labeled "Lproperty" and an option to add more properties.](images/entitydetails_usecase_2.png)

    !!! note
        Adding properties (i.e. **Area** Description) which are not in the provided list, select option **User Defined** and provide the path of the property in syntax as shown in the picture below:

    ![Screenshot showing a UI with properties listed, including "Property" and "User Defined" options.](images/entitydetails_usecase_3.png)

4. Link the resource entity form field to the Entity Details widget and use the converter Load Entity, specifying the number of `levels to load`.

    === "Links"

        ![entityDetailsLinks][entityDetailsLinks]

    === "Converter"

        ![Screenshot showing the Entity Details widget with settings.](images/entitydetails_usecase_4.png)

5. The final result should look like this:

    ![Screenshot showing a sample user interface with a completed configuration.](images/image-20210518171144717.png)

[entityDetails]: images/uiEntityDetails.png
[entityDetailsExample]: ../interaction-widgets/images/uiPageExample8.png
[entityDetailsGeneral]: images/entitydetails_general.png
[entityDetailsSetup]: images/entitydetails_setup.png
[entityDetailsProperties]: images/entitydetails_properties.png