Action List

This list widget displays the actions (upcoming and historical) visible by the user and navigation context.

Action List

The DPS user can switch between Upcoming and Historical actions.

  • Upcoming: it is the list of action that must be performed by someone.

  • Historical: it is the list of actions that someone has marked as done or discarded.

The widget automatically displays the actions considering the navigation context, and User Type of the DPS user.

When an action is marked as done it is immediately moved to the historical ones.

Action Details

Clicking on a row opens a dialog box that provides access to further details about the action.

The action details content is predefined, and displays:

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

  • The due date by which the action must be completed and the number of days the action is active for.

  • The reason that activate the action. For instance, for a wear action, the wear status is displayed.

  • The list of spare parts (if any) involved by the action with also the direct purchase button.

  • The technical description (if defined).  

Directly from the details dialog box, upcoming actions can be discarded or marked as done upon confirmation.

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. custom properties) must be provided to enrich the historical action registry.

Migrating from old widget

In case you are still using the old action widget (without history), you can easily migrate to the new one by changing the tag name in the template.

action-list-widget → action-list-widget-v2

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-v2>

Title

The title displayed on the top part of the widget box.

Name: title

Type: STRING | Optional

[title]="'Details'"

Data

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"

Advanced

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"

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.

Search Field

This field provides the generic search input, which can be customized by defining the search inputs.

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

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"

Search Field <search-field>

Label

The field label.

Name: label

Type: STRING | Optional

label="abc"

Sub Elements

Search Input

The sub-element used to customize the search UI.

Selection Input

The sub-element allowing to select specific things one-to-one.

Search Input <search-input>

Input Type

The type of input to be displayed as part of the search field.

Name: type

Type: ENUM | Required

Values: ADVANCED, KEY, PROPERTY, CLEAR

type="ADVANCED"

Name

The property for which to show the search field inline. It can only be used for input of type PROPERTY.

Name: property

Type: PROPERTY | Required

property="propName"

Selection Input <selection-input>

Sub Elements

Property

The property to be displayed as table column in the selection dialog.

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

Label

The property alternative label.

Name: label

Type: STRING | Optional

label="abc"

Name

The property whose value must be loaded by the widget.

Name: name

Type: PROPERTY | Required

name="propName"

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