6.8 KiB
Title, Added, Status, Last reviewed
| Title | Added | Status | Last reviewed |
|---|---|---|---|
| Process Instance List Cloud component | v3.0.0 | Experimental | 2019-03-25 |
Process Instance List Cloud component
Renders a list containing all the process instances matched by the parameters specified.
Contents
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. | |
| businessKey | string |
"" | Filter the processes 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. |
| lastModifiedFrom | string |
"" | Filter the processes. Display only process with lastModifiedTo equal to the supplied date. |
| lastModifiedTo | string |
"" | Filter the processes. Display only process with lastModifiedTo equal to the supplied date. |
| 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, 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
[appName]="'myApp'"
#processList>
</adf-cloud-process-list>
<adf-pagination
*ngIf="processList"
[target]="processList"
[supportedPageSizes]="supportedPages"
#processListPagination>
</adf-pagination>
The configuration related to the pagination can be changed from the app.config.json, as described in the example below:
"pagination": {
"size": 20,
"supportedPageSizes": [ 5, 10, 15, 20 ]
},