Action List

  • 2 minute(s) read

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>

Click On Row Behaviour/

The expected behaviour when a row is clicked.

Type: ENUM | Optional

Values: OPEN_DETAILS, OPEN_CONTEXT_OBJECT

DEPRECATED

clickOnRowBehaviour="OPEN_DETAILS"

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, beginsWith, like, notLike, isEmpty, isNotEmpty, gt, gte, lt, lte.

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.

Type: STRING | Optional

queryFieldRef="query-1"

Status

The statuses of the actions to load.

Type: ENUM (multiple) | Optional

Values: TODO, DISCARDED, DONE

[status]="['TODO', 'DISCARDED']"

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 (multiple) | Optional

Values: CONSUMABLES, PERFORMANCE, MAINTENANCE, OPERATIONS

[topic]="['CONSUMABLES', 'PERFORMANCE']"

Type

The types of the actions to load.

Type: STRING (multiple) | Optional

[type]="['AAA', 'BBB']"

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.

Property <property>

Description

The property description.

Type: STRING | Optional

description="abc"

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"

Advanced

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"

Show Header

The flag indicated whether the header is visible.

Type: BOOLEAN | Optional

Default Value: true

[showHeader]="false"

Visibility Condition

The expression that allows you to reduce the visibility of the element.

Type: STRING | Optional

*ngIf="getUser().organizationId != null"