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-group-list-widget [title]="'Actions'">
   
</action-group-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>
PROPERTIES
CSS Class	The name(s) of the CSS class used to customize the widget layout. Type: STRING \| Optional class="my-custom-class"
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"
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"
Status	The statuses of the actions to load. Type: ENUM_ARRAY \| Optional \| Values: TODO DISCARDED DONE [status]="['V1', 'V2', 'VN']"
Title	The title displayed on the top part of the widget box. Type: STRING \| Optional [title]="'Details'"
Topic	The topics of the actions to display. Type: ENUM_ARRAY \| Optional \| Values: CONSUMABLES PERFORMANCE MAINTENANCE OPERATIONS [topic]="['V1', 'V2', 'VN']"
Type	The types of the actions to load. Type: STRING_ARRAY \| Optional type="STRING_ARRAY"
Visibility Condition	The expression that allows you to reduce the visibility of the element. Type: STRING \| Optional *ngIf="getUser().organizationId != null"
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 label and current value must be rendered as a widget row. Multiple \| Optional <property name="serialNumber"></property>

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"