Action List

Displays the list of actions visible by the user and navigation context.

Action List

Details Navigation

Clicking on a row opens the action details popup.

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

The action details body is predefined, and displays:

The due date by which the action must be completed
The number of days the action is active for
In case of Wear based action, the wear indicator.
The technical description.
In case of spare-parts based action, the list of spare-parts to replace.

On the action list rows, you can also click directly on specific information to jump to the action 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.

In the details popup, you will also find the following buttons:

Discard: the action is discarded
Mark as Done: the action has been completed, so it can be closed as done.

In both cases a confirmation dialog appears, and in case of spare-parts must be preplaced, a double check to proceed is requested.

In case of Maintenance action, it is possible that to confirm the dialog, also additional information (e.g. Maintenance event properties) can be provided to enrich the maintenance registry event related to action completion.

Template Syntax

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


<action-list-widget [title]="'Actions'" [status]="['TODO']" class="flex-fill">
	<property name="dueTimestamp" label="Due Date" filter="millisToDateOrShortPeriod"></property>
	<property name="actionDefinition.name" label="Action"></property>
	<property name="thing.name" label="Machine"></property>
	<property name="location.name" label="Location"></property>
	<property name="actionDefinition.description" label="Description"></property>
</action-list-widget>

Component Reference

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

Action List `<action-list-widget>`

~~Click On Row Behaviour/~~	The expected behaviour when a row is clicked. Name: clickOnRowBehaviour Type: ENUM \| Optional Values: OPEN_DETAILS, OPEN_CONTEXT_OBJECT DEPRECATED `clickOnRowBehaviour="OPEN_DETAILS"`
Controls Enabled	The boolean flag indicating whether controls (e.g. Search, Export) are enabled on the widget. Name: controlsEnabled Type: BOOLEAN \| Optional Default Value: true `[controlsEnabled]="false"`
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. Name: emptyMessage Type: STRING \| Optional `emptyMessage="No customer found"`
Query	The array of conditions filtering out items. For instance: [query]='[{'property': 'connectionStatus', 'predicate': 'eq', 'value': '1'}]' Predicates: eq, beginsWith, like, notLike, isEmpty, isNotEmpty, gt, gte, lt, lte. Name: query Type: QUERY \| Optional Predicates: beginsWith, eq, neq, gt, gte, isEmpty, isNotEmpty, lt, lte, like, notLike `[query]="[{property:'prop1', predicate: 'eq', value: 'foo'}, {property:'prop2', predicate: 'in', value: ['bar', 'baz']}]"`
Query Variable	The id of the page's <things-filter-field> used for searching. Name: queryFieldRef Type: STRING \| Optional `queryFieldRef="query-1"`
Status	The statuses of the actions to load. Name: status Type: ENUM (multiple) \| Optional Values: TODO, DISCARDED, DONE `[status]="['TODO', 'DISCARDED']"`
Title	The title displayed on the top part of the widget box. Name: title Type: STRING \| Optional `[title]="'Details'"`
Topic	The topics of the actions to display. Name: topic Type: ENUM (multiple) \| Optional Values: CONSUMABLES, PERFORMANCE, MAINTENANCE, OPERATIONS `[topic]="['CONSUMABLES', 'PERFORMANCE']"`
Type	The types of the actions to load. Name: type Type: STRING (multiple) \| Optional `[type]="['AAA', 'BBB']"`
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"`
Sub Elements
Property	The property whose label and current value must be rendered as a widget row.

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
Column CSS Class	The name(s) of the column CSS class used to customize the table column. Name: columnClass Type: COLUMN_CSS \| Optional `columnClass="my-column-custom-class"`
Show Header	The flag indicated whether the header is visible. Name: showHeader Type: BOOLEAN \| Optional Default Value: true `[showHeader]="false"`
Visibility Condition	The expression that allows you to reduce the visibility of the element. Name: ngIf Type: STRING \| Optional `ngIf="getUser().organizationId != null"`

Action List

Details Navigation

Template Syntax

Component Reference

Action List <action-list-widget>

Property <property>

Action List `<action-list-widget>`

Property `<property>`