Historical Work Session List

Displays the list of completed work sessions considering the navigation context.

Details Navigation

Clicking on a row opens the work-session details popup. Optionally the work-session details can be opened in a full page (see Details Mode option).

The header of the work-session details popup contains the work-session name, description, and a breadcrumb that provides the context of the work-session, and whose tokens can be clicked to quickly jump to related objects (e.g. Customer, Location, Thing).

The work-session details body is generated through a template specified within the work-session definition page. If not specified the click on the row produces no effect.

On the work-session list rows, you can also click directly on specific information to jump to the work-session related objects:

Customer Name / Code → Customer details page
Location name → Location details page
Thing Name / Serial Number → Thing details page

In all other case the work-session details popup/page is opened.

Template Syntax

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


<historical-work-session-list-widget-v2 [title]="'Completed Cookings'">
	<property name="name"></property>
	<property name="date"></property>
	<property name="duration"></property>
	<property name="metrics.Recipe Energy.CURRENT" label="Energy [kWh]" filter="divBy1000_2dec"></property>
</historical-work-session-list-widget-v2>

Component Reference

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

Historical Work Session List <historical-work-session-list-widget-v2>
PROPERTIES
CSS Class	The name(s) of the CSS class used to customize the widget layout. Type: STRING \| Optional class="my-custom-class"
Details Mode	The way the details page is opened when the details icon is clicked. If non the details icon is not present. Type: ENUM \| Optional \| Values: PAGE POPUP NONE detailsMode="PAGE"
Empty Message	The blank message to be displayed in the widget in case no item was found. To manage translations, you can define a label and use the key as the value of the property. Type: STRING \| Optional emptyMessage="No customer found"
Page Size	The number of items to load on each page. Type: INTEGER \| Optional \| Default: 50 [pageSize]="100"
Query	The array of conditions filtering out items. For instance: [query]='[{'property': 'connectionStatus', 'predicate': 'eq', 'value': '1'}]' Predicates: eq, neq, beginsWith, like, notLike, isEmpty, isNotEmpty, gt, gte, lt, lte. Type: QUERY \| Optional query="[{'property': 'connectionStatus', 'predicate': 'eq', 'value': '1'}, {...}]"
Query Variable	The id of the page's <things-filter-field> used for searching. Type: STRING \| Optional queryFieldRef="query-1"
Title	The title displayed on the top part of the widget box. Type: STRING \| Optional [title]="'Details'"
Click On Row Behaviour	The expected behaviour when a row is clicked. Type: ENUM \| Optional \| Values: OPEN_DETAILS OPEN_CONTEXT_OBJECT clickOnRowBehaviour="OPEN_CONTEXT_OBJECT" [DEPRECATED]
SUB-ELEMENTS
Property	The property whose value must be displayed within the work session detail row. Multiple \| Optional <property name="serialNumber"></property>
Composite Part	The composite part whose value must be displayed within the work session detail row. Multiple \| Optional <composite-part> <property name="metrics.Pieces.DELTA"></property> <property name="metrics.Temperature.MAX"></property> </composite-part>

Property <property>
PROPERTIES
Column CSS Class	The name(s) of the column CSS class used to customize the table column. Type: COLUMN_CSS \| Optional columnClass="my-column-custom-class"
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"
Show Header	The flag indicated whether the header is visible. Type: BOOLEAN \| Optional \| Values: true false [showHeader]="true"
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>

PROPERTIES

Column CSS Class

The name(s) of the column CSS class used to customize the table column.
Type: COLUMN_CSS | Optional
columnClass="my-column-custom-class"

Description

The composite-part description.
Type: STRING | Optional
description="fooBar"

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="fooBar"

Name

The composite-part name.
Type: STRING | Optional
name="fooBar"

Show Header

The flag indicated whether the header is visible.
Type: BOOLEAN | Optional | Values:

true

false

[showHeader]="true"

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.
Multiple | Optional

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

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