Reusing the Infinity Portal Component - Worklist

An HTML5 UI component called Worklist is provided to embed in a client application. The Worklist component can be customized to configure the following:

This chapter covers the following:

Usage of Worklist Initialization Attribute

The Worklist can be initialized with a single attribute sda-query.

<div sd-activity-table sda-query="{type: 'personal'}"/>

Worklist Types

Following are the worklist types:

The data source for the Worklist can be set using the attribute sda-query.

Definition :sda-query = "<angular expression>"

Worklist Types Key Values Example
Worklist by Predefined Types type personal, total, highCriticality, unified, resubmission, alive
<div sd-activity-table sda-query="{type: 'highCriticality'}"/>
Worklist by Time Period from today, thisWeek , thisMonth, thisQuarter, lastSixMonths, lastYear, all
<div sd-activity-table sda-query="{from:'thisWeek', type:'myWorkSince'}"/>
Worklist by User userId The userId of the desired User
<div sd-activity-table sda-query="{userId:'motu', type:'user'}"/>
Worklist by Participant Qualified Id participantQId Qualified participant Id
<div sd-activity-table sda-query="{participantQId:'Administrator'}"/>
Worklist by Process Qualified Id processQId Qualified Process Id
<div sd-activity-table sda-query="{processQId:'{model1}Process1'}"/>

Configuring Columns

The columns can be configured using the attribute sda-columns. Definition:sda-columns = "<angular expression>" or sda-columns="[{name:'columnId1',columnId2'}]".

Order is based as per the column's index in the supplied JSON Array. If the attribute is not defined the Worklist is rendered using its standard configuration. Column Id can be one of the several columns that Worklist offers or it can be the DescriptorId of a Descriptor.

Usage

Params Description
filter If false, turn filtering OFF on the column.
Default: If filtering is supported by a column then filter is turned ON by default.
fixed If true, the column do not appear in the column selector and is always be visible.
Default: false.
name One of the Columns supported by Worklist as per the table below or DescriptorId in case of a Descriptor.
sort If false, turns sorting OFF on the column.
Default: If sorting is supported by a column then sort is turned ON by default.
visible If false, the column is hidden by default. It can be made visible by picking it from the column selector.
Default: true.

Supported Column IDs

Following column IDs are supported:

ID Description
activityName Activity
activityOID Activity OID
priority Priority
criticality Criticality
descriptors Descriptors
startTime Start time
lastModified Last modified
duration Duration
status Status
assignedTo Assigned TO
processName Process
rootProcessName Root Process
lastPerformer Last Performer
data Data
actions Actions

Configuring Toolbar

The toolbar can be configured using the attribute sda-toolbar. Definition: sda-toolbar = "['item1','item2']". If the attribute is not defined then the Worklist is rendered with the default toolbar.

Usage

Examples

Supported Toolbar Icons

ID Description
columnSelector Select Columns
export Export Worklist as csv etc
saveFilters Save Filter and sort values for the worklist.
complete Complete Activity
delegate Delegate Activity
abort Abort Activity
refresh Refresh Worklist

Configuring Actions

The action icons of the Worklist can be configured using the attribute sda-actions. Definition: sda-actions = "['item1','item2']". If the attribute is not defined then the Worklist is rendered with the default actions.

Usage

sda-actions="['id1', 'id2']" - Shows only the icon mentioned in the array.

Example

To show only selected action buttons:

<div sd-activity-table sda-query="{type: 'personal'}"
     sda-actions = "['complete','delegate','abort']"/>

Supported Actions

Following is the supported list of actions:

ID Description
processDetails Show Process Details
complete Complete Activity
delegate Delegate Activity
abort Abort Activity
notes Open Notes
relocate Relocate Activity
processDocuments Open Process Documents

Configuring Page Size

The Page Size can be configured using the attribute sda-page-size. Definition: sda-page-size = "<number>"</number> . If the attribute is not defined then the Worklist is rendered using the default page size in Infinity.

Usage

sda-page-size = "<number>"

Example

<div sd-activity-table sda-query="{ type:'personal'}" sda-page-size="4" />

Custom Row Template - Example

This example explains how to take control of the entire Table including header and body. You can decide how many columns should be displayed. The template of the worklist can be customized by transcluding the desired row template in the sd-activity-table directive.

<table sd-activity-table="cardViewTable"

    sda-query="{type : 'unified',fetchDescriptors:true,sortBy :[{name :'activityOID', dir : 'desc'}]}"

    sda-toolbar="false">

    <!--Header Template -->

                    <thead ng-non-bindable class="card-view-header">

                        <tr>

                            <th sda-label="Card Column"></th>

                        </tr>

                    </thead>

    <!--BodyTemplate -->

                    <tbody ng-non-bindable>

                        <tr class="no-border-row">

                            <td>

                                <div class="list-group"

                                    ng-class="'card-prio-'+rowData.priority.name">

                                    <div class="list-group-item">

                                        <div>

                                            <b>{{rowData.activity.name}} #{{rowData.activityOID}} </b>

                                        </div>

                                        <div>

                                            <b>Historic Tolerance - </b>{{rowData.descriptorValues["HistoricTolerance"].value}}

                                            %

                                        </div>

                                        <div>

                                            <b>Vendor - </b>{{rowData.descriptorValues["Vendor"].value}}

                                        </div>

                                    </div>

                                </div>

                            </td>

                        </tr>

                    </tbody>
              </table>

The following table provides more information about the attributes used in the above example:

Attribute Description
sda-query
  • {type : 'unified',fetchDescriptors:true:true,sortBy :[{name :'activityOID', dir : 'desc'}]}
    fetchDescriptors - If you need to show descriptors in table data, use fetchDescriptors:true parameter. A more efficient option is to mention the descriptors required. For example, fetchDescriptors:['activitiyName','activityOID']
  • sortBy - The sorting criteria can be mentioned in the sortBy parameter. It takes the name of the column and direction as: [{name :<columnName>, dir : 'desc'}]. Direction can be asc or desc.
<thead ng-non-bindable> The thead section contains the template for table headers. For the directive to function, thead is compulsory. If required, it can be hidden using style class.
<tbody ng-non-bindable> The tbody section contains the template for the table body. The data for each row is available on rowData variable on each individual row scope. In case descriptor values are required to be shown on the following template : {{rowData.descriptorValues["<descriptor id>"].value}}.
sd-activity-table="<variable on scope>" sd-activity-table can be binded to a variable on scope. Exposed activity table APIs can be accessed using this variable. sd-activity-table="cardViewTable". In controller JS, - $scope.cardViewTable.activate('12', true)
API Description
activate:(activityOID, isInteractionAware) To activate any activity use: $scope.cardViewTable.activate('12', true); This method returns a promise with activity information.
getSelection:() To get selected rows use: $scope.cardViewTable.getSelection();
refresh:(retainPageIndex) To refresh the table data use: $scope.cardViewTable.refresh(true);

The Worklist would be rendered in the Card Layout after executing the Custom Row Template example as shown in the following screenshot:

Card View
Figure: Custom Row Template Example - Card Layout UI of the worklist

Rest End Points

Function End Point Description
Activate Activity POST : <IPP BASE URL>/services/rest/portal/activity-instances/activate?interactionAware=true
Post Data : {activityOID: 457}
Use this Endpoint for activating activity.
Complete Activity POST : <IPP BASE URL>/services/rest/portal/activity-instances/complete/{activityOid}</IPP> Note: To set OUTdata, use Interaction Uri.
Suspend & Save Activity POST :<IPP BASE URL>/services/rest/portal/activity-instances/suspend-and-save/{activityOid},
Query Param: toUser=true|false, default is false.
Note: To set OUT data use Interaction Uri. If toUser is true, activity goes to user's personal worklist. If toUser is false, activity goes to user's participant worklist.
Suspend Activity POST : <IPP BASE URL>/services/rest/portal/activity-instances/suspend/{activityOid},
Query Param: toUser=true|false, default is false.
Note: OUT data is not considered here If toUser is true, activity goes to user's personal worklist. If toUser is false, activity goes to user's participant worklist.