The sub-element referencing a property of the context object.

Access to the property values inside the widgets is made through the property tag that identifies the property whose value must be printed or read.

<property name="serialNumber"></property>

When displaying a property within the page, the system uses the property's Label.
The Label can be localized according to the defined translations, see the Labels article.

code_blocksCode View

Template Syntax

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

<property name="serialNumber"></property>

Component Reference

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

Property <property>

PROPERTIES

Description

The property description.
Type: STRING | Optional
description="fooBar"

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"

Visibility Condition

The expression that allows you to reduce the visibility of the element.
Type: STRING | Optional
*ngIf="getUser().organizationId != null"

Referencing Properties

Depending on the property name attribute, the widget retrieves the value from the context object (e.g. thing, location, customer, partner). By using the dot notation you can print out properties belonging to the related objects (e.g. thing → location → customer).

In this way, if you are within a thing dashboard, within the context you can access directly also its parent location and customer.

Custom properties require to prefix the name with "properties.", this is because custom property values are stored under the object sub-node named "properties".

For instance, this is a JSON object describing a thing.

{
  "id": "5aeae841005da10006e6be35",
  "name": "Hall",
  "serialNumber": "OVENx200014",
  "customer": {
     "id": "5aeae80405c5940006f7befe",
     "name": "Ristorante Fornaroli",
     "country": "Italy",
     "properties": {
        "vatNumber": "1234567890"
     },
     "type": "BUSINESS"
     "code": "C000012"
  },
  "location": {
     "id": "5aeae8054e22a20006f61476",
     "country": "Italy",
     "name": "Cisliano",
     "gpsPosition": "45.444669,8.990243",
     "properties": {
         "address": "Via Montefeltro 140, 20080 Cisliano, MI",
         "city": "Cisliano"
     },
     "partner": {
         "id": "5cf5270f2d4d4a0008f5a27c",
         "name": "Oven Service"
     },
     "metrics": {
       "performance": {"value": 0.5256877229073239, "lastUpdateTimestamp": 1632961832517}
     }
  },
  "gpsPosition": "45.47072521359533,8.889312744140627",
  "properties": {
     "serviceDueDate": 1633108201324,
     "status": "STANDBY"
  },
  "activationDate": 1525344321757,
  "thingDefinition": {
     "id": "5c795c602074420008bcd6ef",
     "name": "Oven-1200w",
     "description": "Oven 1200w with fan and steam.",
     "properties": {
        "fooBar2": "baz"
     }
  },
  "serviceLevel": {
     "id": "5aeae7a7d554780006bc0fed",
     "name": "Free",
     "level": 300,
     "alertingFeature": false,
     "notificationsFeature": false,
     "_default": true,
     "features": {
       "OEE": false,
       "Cookings": true,
       "System_Status": true,
       "Energy": false
     }
  },
  "connectionStatus": 1,
  "connectionStatusLastUpdateTimestamp": 1620735199626,
  "partner": {
     "id": "5cf5270f2d4d4a0008f5a27c",
     "name": "Oven Service"
  }
}

Here are reported the details-widgets samples for the various objects.

Thing details

<thing-details-widget title="Thing Details">
    <property name="name"></property>
    <property name="properties.fooBar"></property>
    <property name="thingDefinition.name"></property>
    <property name="thingDefinition.properties.fooBar2"></property>
    <property name="location.name"></property>
    <property name="location.properties.address"></property>
    <property name="customer.name"></property>
    <property name="customer.properties.vatNumber"></property>
</thing-details-widget>

Location details

<location-details-widget title="Location Details">
    <property name="name"></property>
    <property name="properties.address"></property>
    <property name="customer.name"></property>
    <property name="customer.properties.vatNumber"></property>
</location-details-widget>

Customer details

<customer-details-widget title="Customer Details">
    <property name="name"></property>
    <property name="properties.vatNumber"></property>
</customer-details-widget>

Partner details

<partner-details-widget title="Partner Details">
    <property name="name"></property>
    <property name="properties.vatNumber"></property>
</partner-details-widget>

Applying Filters

Properties values can be rendered through filters.

<customer-details-widget title="Customer Details">
    <property name="name"></property>
    <property name="properties.phoneNumber" filter="phoneNumber"></property>
</customer-details-widget>