Event Details

  • 2 minute(s) read

Displays the properties of an event in a details box.

Event Details

Configuration

Template Syntax

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


<event-details-widget title="Event Details">
    <property name="name"></property>
	<property name="title"></property>
	<property name="eventSeverity"></property>
	<property name="technicalDescription"></property>
</event-details-widget>

Component Reference

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

Event Details <event-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

Property

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

Composite Part

The widget part combining multiple properties.

Widget Title

Compose the widget title by using properties.

Property <property>

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

Property

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

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"