Thing Details

  • 2 minute(s) read

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

Thing Details

Template Syntax

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


<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 <thing-details-widget>

Column Span

The number of columns the widget must span its sub-elements (default 1).

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.

Type: ENUM | Optional

Values: TABLE, ALTERNATE_ROWS

Default Value: TABLE

layout="TABLE"

Title

The title displayed on the top part of the widget box.

Type: STRING | Optional

[title]="'Details'"

Rendering

CSS Class

The name(s) of the CSS class used to customize the widget layout.

Type: STRING | Optional

class="my-custom-class"

Visibility Condition

The expression that allows you to reduce the visibility of the element.

Type: STRING | Optional

*ngIf="getUser().organizationId != null"

Sub Elements

Metric

The metric whose label and current value must be rendered as a widget row.

Property

The property whose label and current value must be rendered as a widget row.

Composite Part

The widget part combining multiple properties and metrics.

Widget Title

Compose the widget title by using properties.

Metric <metric>

Aggregation

The aggregation to apply on the retrieved value.

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.

Type: FILTER | Optional

filter="fooBarFilter"

Label

The metric alternative label.

Type: STRING | Optional

label="Temperature"

Name

The metric whose value(s) must be loaded by the widget.

Type: METRIC | Required

name="Temperature"

Quick History

The flag enabling the quick history popup used to access the metric historical data.

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.

Type: BOOLEAN | Optional

Default Value: false

[resettable]="true"

Show Label

The flag indicated whether the label is visible.

Type: BOOLEAN | Optional

Default Value: true

[showLabel]="false"

Unit

The unit of measurement to be displayed along the value.

Type: STRING | Optional

unit="&deg;C"

Advanced

Visibility Condition

The expression that allows you to reduce the visibility of the element.

Type: STRING | Optional

*ngIf="getUser().organizationId != null"

Property <property>

Description

The property description.

Type: STRING | Optional

description="abc"

Filter

The name of the filter used to transform and display values.

Type: FILTER | Optional

filter="fooBarFilter"

Label

The property alternative label.

Type: STRING | Optional

label="Temperature"

Name

The property whose value must be loaded by the widget.

Type: PROPERTY | Required

name="serialNumber"

Show Label

The flag indicated whether the label is visible.

Type: BOOLEAN | Optional

Default Value: true

[showLabel]="false"

Advanced

Visibility Condition

The expression that allows you to reduce the visibility of the element.

Type: STRING | Optional

*ngIf="getUser().organizationId != null"

Composite Part <composite-part>

Description

The composite-part description.

Type: STRING | Optional

description="abc"

Filter

The filter applied on the composite-part to transform or display its value.

Type: FILTER | Optional

filter="fooBarFilter"

Label

The label displayed by the widget.

Type: STRING | Optional

label="abc"

Name

The composite-part name.

Type: STRING | Optional

name="abc"

Show Label

The flag indicated whether the label is visible.

Type: BOOLEAN | Optional

Default Value: true

[showLabel]="false"

Advanced

Visibility Condition

The expression that allows you to reduce the visibility of the element.

Type: STRING | Optional

*ngIf="getUser().organizationId != null"

Sub Elements

Metric

The metric whose value must be loaded within the composite-part.

Property

The property whose value must be loaded within the composite-part.

Metric <metric>

Name

The metric whose value(s) must be loaded by the widget.

Type: METRIC | Required

name="Temperature"

Property <property>

Name

The property whose value must be loaded by the widget.

Type: PROPERTY | Required

name="serialNumber"

Widget Title <widget-title>

Filter

The filter applied on the composite-part to transform or display its value.

Type: FILTER | Optional

filter="fooBarFilter"

Sub Elements

Property

The property whose value must be loaded within the composite-part.

Property <property>

Filter

The name of the filter used to transform and display values.

Type: FILTER | Optional

filter="fooBarFilter"

Name

The property whose value must be loaded by the widget.

Type: PROPERTY | Required

name="serialNumber"