---
title: "Thing Details"
slug: "thing-details-widget"
updated: 2026-07-31T10:19:14Z
published: 2026-07-31T10:19:14Z
canonical: "learn.servitly.com/thing-details-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Thing Details

Displays in a single box properties and metrics of a specific thing.

![Thing Details](https://components-manager.servitly.com/components/ThingDetails_1/IMAGES/_screenshot?owner=AG_Servitly)

## Template Syntax

Below you can find some examples of how to use the component within a template.

```xml

            <thing-details-widget title="Info">
            <property name="serialNumber"></property>
            <property name="thingDefinition.name" label="Model Name"></property>
            <metric name="Temperature" filter="singleDecimalFormat"></metric>
            <metric.....></metric>
            </thing-details-widget>
        
```

## Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

#### Thing Details `&lt;thing-details-widget&gt;`

| *Column Span* | The number of columns the widget must span its sub-elements (default 1). **Name**: columns **Type**: INTEGER \| Optional `columns="2"` |
| --- | --- |
| *Layout* | The layout used to display properties in the widget: TABLE: Displays one column for the label and another for the property value. ALTERNATE_ROWS: Displays a gray row for the label and a white row for the property value. **Name**: layout **Type**: ENUM \| Optional **Values**: *TABLE*, *ALTERNATE_ROWS* **Default Value**: *TABLE* `layout="TABLE"` |
| *Title* | The title displayed on the top part of the widget box. **Name**: title **Type**: STRING \| Optional `[title]="'Thing'"` |
| **Expandable Details** |
| *Details Button Icon* | The Angular Material icon displayed inside the details button. **Name**: expandableDetails.expandIcon **Type**: STRING \| Optional `[expandableDetails]="{expandIcon: 'abc'}"` |
| *Mode* | The way the details is opened. **Name**: expandableDetails.mode **Type**: ENUM \| Optional **Values**: *EMBEDDED*, *POPUP* **Default Value**: *POPUP* `[expandableDetails]="{mode: 'EMBEDDED'}"` |
| *Popup Title* | The title displayed on the top part of the popup. **Name**: expandableDetails.popupTitle **Type**: STRING \| Optional `[expandableDetails]="{popupTitle: 'abc'}"` |
| *Template* | The name of the template to display. **Name**: expandableDetails.template **Type**: STRING \| Optional `[expandableDetails]="{template: 'abc'}"` |
| **Rendering** |
| *Availability* | Configure availability based on active features on Digital Plan on Add-ons **Name**: hasFeature **Type**: FEATURE (multiple) \| Optional `[hasFeature]="['feature_a', 'feature_b']"` |
| *Collapse / Expand* | The flag indicating whether the widget is collaspible. **Name**: collapsible **Type**: BOOLEAN \| Optional **Default Value**: *false* `[collapsible]="true"` |
| *CSS Class* | The name(s) of the CSS class used to customize the widget layout. **Name**: class **Type**: STRING \| Optional `class="my-custom-class"` |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |
| **Sub Elements** |
| [*Metric*](/docs/thing-details-widget/#metric) | The metric whose label and current value must be rendered as a widget row. |
| [*Property*](/docs/thing-details-widget/#property) | The property whose label and current value must be rendered as a widget row. |
| [*Composite Part*](/docs/thing-details-widget/#composite-part) | The widget part combining multiple properties and metrics. |
| [*Widget Title*](/docs/thing-details-widget/#widget-title) | Compose the widget title by using properties. |
| [*Link*](/docs/thing-details-widget/#link-element) | Make the widget clickable by defining an address to browse. |

#### Metric `&lt;metric&gt;`

| *Aggregation* | The aggregation to apply on the retrieved value. **Name**: aggregation **Type**: ENUM \| Optional **Values**: *MIN*, *MIN_HOURS_1*, *MIN_DAYS_1*, *MIN_MONTHS_1*, *MAX*, *MAX_HOURS_1*, *MAX_DAYS_1*, *MAX_MONTHS_1*, *AVG*, *AVG_HOURS_1*, *AVG_DAYS_1*, *AVG_MONTHS_1*, *DELTA*, *DELTA_HOURS_1*, *DELTA_DAYS_1*, *DELTA_MONTHS_1* `aggregation="MIN"` |
| --- | --- |
| *Filter* | The name of the filter used to transform and display values. **Name**: filter **Type**: FILTER \| Optional `filter="fooBarFilter"` |
| *Label* | The metric alternative label. **Name**: label **Type**: STRING \| Optional `label="Temperature"` |
| *Name* | The metric whose value(s) must be loaded by the widget. **Name**: name **Type**: METRIC \| Required `name="Temperature"` |
| *Quick History* | The flag enabling the quick history popup used to access the metric historical data. **Name**: quickHistory **Type**: BOOLEAN \| Optional **Default Value**: *false* `[quickHistory]="true"` |
| *Resettable* | The flag enabling the reset button. The reset is enabled only for counters and algorithms metrics, moreover, the user must have the WRITE_METRIC_VALUE permission. **Name**: resettable **Type**: BOOLEAN \| Optional **Default Value**: *false* `[resettable]="true"` |
| *Show Label* | The flag indicated whether the label is visible. **Name**: showLabel **Type**: BOOLEAN \| Optional **Default Value**: *true* `[showLabel]="false"` |
| *Unit* | The unit of measurement to be displayed along the value. **Name**: unit **Type**: STRING \| Optional `unit="&amp;deg;C"` |
| **Advanced** |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

#### Property `&lt;property&gt;`

| *Description* | The property description. **Name**: description **Type**: STRING \| Optional `description="abc"` |
| --- | --- |
| *Filter* | The name of the filter used to transform and display values. **Name**: filter **Type**: FILTER \| Optional `filter="fooBarFilter"` |
| *Label* | The property alternative label. **Name**: label **Type**: STRING \| Optional `label="Temperature"` |
| *Name* | The property whose value must be loaded by the widget. **Name**: name **Type**: PROPERTY \| Required `name="serialNumber"` |
| *Show Label* | The flag indicated whether the label is visible. **Name**: showLabel **Type**: BOOLEAN \| Optional **Default Value**: *true* `[showLabel]="false"` |
| **Advanced** |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

#### Composite Part `&lt;composite-part&gt;`

| *Description* | The composite-part description. **Name**: description **Type**: STRING \| Optional `description="abc"` |
| --- | --- |
| *Filter* | The filter applied on the composite-part to transform or display its value. **Name**: filter **Type**: FILTER \| Optional `filter="fooBarFilter"` |
| *Label* | The label displayed by the widget. **Name**: label **Type**: STRING \| Optional `label="abc"` |
| *Name* | The composite-part name. **Name**: name **Type**: STRING \| Optional `name="abc"` |
| *Show Label* | The flag indicated whether the label is visible. **Name**: showLabel **Type**: BOOLEAN \| Optional **Default Value**: *true* `[showLabel]="false"` |
| **Advanced** |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |
| **Sub Elements** |
| [*Metric*](/docs/thing-details-widget/#metric) | The metric whose value must be loaded within the composite-part. |
| [*Property*](/docs/thing-details-widget/#property) | The property whose value must be loaded within the composite-part. |

#### Metric `&lt;metric&gt;`

| *Name* | The metric whose value(s) must be loaded by the widget. **Name**: name **Type**: METRIC \| Required `name="Temperature"` |
| --- | --- |

#### Property `&lt;property&gt;`

| *Name* | The property whose value must be loaded by the widget. **Name**: name **Type**: PROPERTY \| Required `name="serialNumber"` |
| --- | --- |

#### Widget Title `&lt;widget-title&gt;`

| *Filter* | The filter applied on the composite-part to transform or display its value. **Name**: filter **Type**: FILTER \| Optional `filter="fooBarFilter"` |
| --- | --- |
| **Sub Elements** |
| [*Property*](/docs/thing-details-widget/#property) | The property whose value must be loaded within the composite-part. |

#### Property `&lt;property&gt;`

| *Filter* | The name of the filter used to transform and display values. **Name**: filter **Type**: FILTER \| Optional `filter="fooBarFilter"` |
| --- | --- |
| *Name* | The property whose value must be loaded by the widget. **Name**: name **Type**: PROPERTY \| Required `name="serialNumber"` |

#### Link `&lt;link-element&gt;`

| *Description* | The description displayed as link tooltip. **Name**: description **Type**: STRING \| Optional `description="Show more details..."` |
| --- | --- |
| *Icon* | The [Google Fonts](https://fonts.google.com/icons) icon (e.g. save) or [Google Fonts (5 free)](https://fontawesome.com/v5/search?ic=free-collection) icon (e.g. fas fa-home) to be displayed before the link label. **Name**: icon **Type**: STRING \| Optional `icon="abc"` |
| *URL* | The URL to browse, '/..' for application relative URL, 'https://....' for external URLs, else it is considered relative to the current page. **Name**: url **Type**: STRING \| Required `url="abc"` |
| **Rendering** |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the link. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

## Full Syntax Example

```xml

<thing-details-widget    
    [title]="'Thing'"
    columns="2"
    layout="TABLE"
    [expandableDetails]="{
        mode: 'EMBEDDED',
        expandIcon: 'abc',
        template: 'abc',
        popupTitle: 'abc'
    }"
    [collapsible]="true"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']">
    <metric        
            name="Temperature"
            label="Temperature"
            filter="fooBarFilter"
            unit="&deg;C"
            [showLabel]="false"
            [resettable]="true"
            [quickHistory]="true"
            aggregation="MIN"
            *ngIf="getUser().organizationId != null"></metric>
    <property        
            name="serialNumber"
            label="Temperature"
            description="abc"
            filter="fooBarFilter"
            [showLabel]="false"
            *ngIf="getUser().organizationId != null"></property>
    <composite-part        
            name="abc"
            label="abc"
            description="abc"
            filter="fooBarFilter"
            *ngIf="getUser().organizationId != null"
            [showLabel]="false">
            <metric            
                        name="Temperature"></metric>
            <property            
                        name="serialNumber"></property>
    </composite-part>
    <widget-title        
            filter="fooBarFilter">
            <property            
                        name="serialNumber"
                        filter="fooBarFilter"></property>
    </widget-title>
    <link-element        
            description="Show more details..."
            url="abc"
            icon="abc"
            *ngIf="getUser().organizationId != null"></link-element>
</thing-details-widget>
```