alfresco-ng2-components/docs/process-services-cloud/components/process-list-cloud.component.md

Title, Added, Status, Last reviewed

Title	Added	Status	Last reviewed
Process Instance List Cloud component	v3.0.0	Experimental	2018-11-09

Process Instance List Cloud component

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

Contents

• Basic Usage
  • Transclusions
• Class members
  • Properties
  • Events
• Details
  • Setting Sorting Order for the list
  • Pagination strategy
• See also

Basic Usage

app.component.html

<adf-cloud-process-list
    [appName]="'app-name'">
</adf-cloud-process-list>

Transclusions

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

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

Class members

Properties

Name	Type	Default value	Description
appName	string	""	The name of the application.
appVersion	string	""	The related application version.
businessKey	string	""	Filter the tasks to display only the ones with this businessKey value.
id	string	""	Filter the processes to display only the ones with this ID.
initiator	string	""	Name of the initiator of the process.
multiselect	boolean	false	Toggles multiple row selection and renders checkboxes at the beginning of each row
name	string	""	Filter the processes to display only the ones with this name.
presetColumn	string		Custom preset column schema in JSON format.
processDefinitionId	string	""	Filter the processes to display only the ones with this process definition ID.
processDefinitionKey	string	""	Filter the processes to display only the ones with this process definition key.
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.
sorting	ProcessListCloudSortingModel[]		Array of objects specifying the sort order and direction for the list. The sort parameters are for BE sorting.
status	string	""	Filter the processes to display only the ones with this status.

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.
rowsSelected	EventEmitter<any[]>	Emitted when rows are selected/unselected.
success	EventEmitter<any>	Emitted when the list of process instances has been loaded successfully from the server.

Details

You can define a custom schema for the list in the app.config.json file and access it with the presetColumn property as shown below:

"`adf-cloud-process-list`": {
        "presets": {
            "customSchema": [
            {
                    "key": "name",
                    "type": "text",
                    "title": "name",
                    "sortable": true
            }],
            "default": [
                {
                    "key": "name",
                    "type": "text",
                    "title": "name",
                    "sortable": true
            }],
        }
}

<adf-cloud-process-list
    [appName]="'appName'">
</adf-cloud-process-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-cloud-process-list": {
        "presets": {
            "customSchema": [
            {
                    "key": "id",
                    "type": "text",
                    "title": "Id",
                    "sortable": true
            }],
            "default": [
                {
                    "key": "name",
                    "type": "text",
                    "title": "name",
                    "sortable": true
            }],
        }
}

<adf-cloud-process-list
    [appName]="'appName'" >
    <data-columns>
        <data-column key="key" title="title" class="full-width name-column">
            <ng-template let-entry="$implicit">
                    <div>{{getFullName(entry.row.obj.assignee)}}</div>
            </ng-template>
        </data-column>
    </data-columns>
</adf-cloud-process-list>

These are all the available columns that can be displayed in this component: appName, businessKey, description, id, initiator, lastModified, processName, parentId, processDefinitionId, processDefinitionKey, startDate and status.

Setting Sorting Order for the list

You can specify a sorting order as shown in the example below:

let sorting = [{ orderBy: 'status', direction: 'desc' }];

<adf-cloud-process-list
    [appName]="'appName'"
    [sort]="sorting">
</adf-cloud-process-list>

Pagination strategy

The Process Instance List also supports pagination:

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

See also

• Data column component
• Data Table Adapter interface
• Pagination component