Skip to content

Latest commit

 

History

History
242 lines (197 loc) · 8.17 KB

process-list.component.md

File metadata and controls

242 lines (197 loc) · 8.17 KB
Title Added Status Last reviewed
Process Instance List
v2.0.0
Active
2019-01-16

Process Instance List

Renders a list containing all the process instances matched by the parameters specified.

Contents

Basic Usage

app.component.html

<adf-process-instance-list
    [appId]="'1'"
    [state]="'all'">
</adf-process-instance-list>

Transclusions

Any content inside an <adf-custom-empty-content> sub-component will be shown when the process list is empty:

<adf-process-instance-list>
    <adf-custom-empty-content>
        Your Content
    </adf-custom-empty-content>
</adf-process-instance-list>

Class members

Properties

Name Type Default value Description
appId number The id of the app.
blurOnResize boolean true Toggles blur when columns of the list are being resized.
data DataTableAdapter Data source to define the datatable.
isResizingEnabled boolean false Toggles column resizing for processes list.
multiselect boolean false Toggles multiple row selection, which renders checkboxes at the beginning of each row
page number 0 The page number of the processes to fetch.
presetColumn string Custom preset column schema in JSON format.
processDefinitionId string The Definition Id of the process.
processInstanceId number | string The id of the process instance.
resolverFn Function null Resolver function is used to show dynamic complex column objects see the docs to learn how to configure a resolverFn.
selectFirstRow boolean true Toggles default selection of the first row
selectionMode string "single" Row selection mode. Can be none, single or multiple. For multiple mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows.
showContextMenu boolean false Toggles custom context menu for the component.
size number The number of processes to fetch in each page.
sort string Defines the sort ordering of the list. Possible values are created-desc, created-asc, ended-desc, ended-asc.
state string Defines the state of the processes. Possible values are running, completed and all
stickyHeader boolean false Toggles the sticky header mode.

Events

Name Type Description
error EventEmitter<any> Emitted when an error occurs while loading the list of process instances from the server.
rowClick EventEmitter<string> Emitted when a row in the process list is clicked.
showRowContextMenu EventEmitter<DataCellEvent> Emitted before the context menu is displayed for a row.
success EventEmitter<ProcessListModel> Emitted when the list of process instances has been loaded successfully from the server.
rowsSelected EventEmitter<ObjectDataRow[]> Emmitted when rows are selected or unselected.

Details

The list can show any of the properties of the ProcessInstance class. The example below shows how to define a custom schema for the list in the app.config.json file and access it with the presetColumn property:

"adf-process-list": {
        "presets": {
            "customSchema": [
            {
                    "key": "name",
                    "type": "text",
                    "title": "name",
                    "sortable": true         
            }],
            "default": [
                {
                    "key": "name",
                    "type": "text",
                    "title": "name",
                    "sortable": true
            }],
        }
}
<adf-process-instance-list
    [appId]="'1'"
    [state]="'all'"
    [presetColumn]="'customSchema'">
</adf-process-instance-list>

You can also define the schema in the HTML using the Data column component. You can combine this with schema information defined in app.config.json as in the example below:

"adf-process-list": {
        "presets": {
            "customSchema": [
            {
                    "key": "id",
                    "type": "text",
                    "title": "Id",
                    "sortable": true
            }],
            "default": [
                {
                    "key": "name",
                    "type": "text",
                    "title": "name",
                    "sortable": true
            }],
        }
}
<adf-process-instance-list
    [appId]="'1'" 
    [presetColumn]="'customSchema'">
    <data-columns>
        <data-column key="key" title="title" class="full-width name-column">
            <ng-template let-entry="$implicit">
                    <div>{{entry.row.obj.assignee | fullName}}</div>
            </ng-template>
        </data-column>
    </data-columns>
</adf-process-instance-list>

Setting Sorting Order for the list

you can pass sorting order as shown in the example below:

// Possible values are : `created-desc`, `created-asc`, `ended-desc`, `ended-asc` |
let sortParam = 'created-desc'; 
<adf-process-instance-list
    [appId]="'1'"
    [sort]="sortParam">
</adf-process-instance-list>

Pagination strategy

The Process Instance List also supports pagination:

<adf-process-instance-list
    [appId]="'1'"
    [page]="page"
    [size]="size"
    #processList>
</adf-process-instance-list>
<adf-pagination
    *ngIf="processList"
    [target]="processList"
    [supportedPageSizes]="supportedPages"
    #processListPagination>
</adf-pagination>

showRowContextMenu event

Emitted before the context menu is displayed for a row.

Note that the ProcessInstanceListComponent itself does not populate the context menu with items. You can provide all necessary content via the handler.

<adf-process-instance-list
    [contextMenu]="true"
    (showRowContextMenu)="onShowRowContextMenu($event)">
</adf-process-instance-list>

Event properties:

value: {
    row: DataRow,
    col: DataColumn,
    actions: []
}

Handler example:

onShowRowContextMenu(event: DataCellEvent) {
    event.value.actions = [
        {  title: 'Process List Context Menu' },
        { ... }
    ]
}

This event is cancellable. You can use event.preventDefault() to prevent the default behavior.

The ProcessInstanceList will automatically render the supplied menu items.

See the ContextMenu documentation for more details on the format and behavior of context actions.

See also