Schema

  • 2 minute(s) read
Prev Next

This widget shows a synoptic of the Thing with overlayed metric data.

Schema

Code View

Template Syntax

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


<schema-widget class="svg" width="1200px" style="width:1200px">
   <composite-part filter="ovenSchemaSvg">
       <metric name="Status"></metric>
       <metric name="Temperature"></metric>
       <metric name="Humidity"></metric>           
   </composite-part>
</schema-widget>

Component Reference

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

Schema <schema-widget>

Title

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

Name: title

Type: STRING | Optional

[title]="'Details'"

Rendering

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"

Width

The width of the widget (e.g. 500px).

Name: width

Type: STRING | Optional

width="500px"

Sub Elements

Metric

The metric whose label and current value must be displayed within the schema.

Property

The property whose label and current value must be displayed within the schema.

Composite Part

The widget part combining multiple properties and metrics.

Metric <metric>

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"

Unit

The unit of measurement to be displayed along the value.

Name: unit

Type: STRING | Optional

unit="&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 <property>

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"

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 <composite-part>

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"

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

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.

Name: name

Type: METRIC | Required

name="Temperature"

Property <property>

Name

The property whose value must be loaded by the widget.

Name: name

Type: PROPERTY | Required

name="serialNumber"