mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00

Change process and task search api selection from token-provided to input-provided (#10488 )

2024-12-12 14:30:37 +01:00

13 KiB

Raw Permalink Blame History

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.

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
actionsPosition	`string`	"right"	Position of the actions dropdown menu. Can be "left" or "right".
appName	`string`	""	The name of the application.
appVersion	`number \| number[]`		The version of the application.
businessKey	`string`	""	Filter the processes to display only the ones with this businessKey value.
completedDate	`string`	""	Filter the processes. Display only process with completedDate equal to the supplied date.
completedFrom	`string`	""	Filter the processes. Display only process with completedFrom equal to the supplied date.
completedTo	`string`	""	Filter the processes. Display only process with completedTo equal to the supplied date.
environmentId	`string`		Filter the processes to display only the ones with this environment ID.
id	`string`	""	Filter the processes to display only the ones with this ID.
initiator	`string`	""	Name of the initiator of the process.
isResizingEnabled	`boolean`	false	Toggles main datatable column resizing feature.
lastModifiedFrom	`Date`		Filter the processes. Display only process with lastModifiedTo equal to the supplied date.
lastModifiedTo	`Date`		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.
processDefinitionName	`string`	""	Filter the processes to display only the ones with this process definition name.
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.
showActions	`boolean`	false	Toggles the data actions column.
showContextMenu	`boolean`	false	Toggles custom context menu for the component.
showMainDatatableActions	`boolean`	false	Toggle main datatable actions.
sorting	`ProcessListCloudSortingModel[]`		Array of objects specifying the sort order and direction for the list. The sort parameters are for BE sorting.
startFrom	`string`	""	Filter the processes. Display only process with startedDate greater then the supplied date.
startTo	`string`	""	Filter the processes. Display only process with startedDate less than the supplied date.
status	`string`	""	Filter the processes to display only the ones with this status.
stickyHeader	`boolean`	false	Toggles the sticky header mode.
suspendedFrom	`string`	""	Filter the processes. Display only process with suspendedFrom equal to the supplied date.
suspendedTo	`string`	""	Filter the processes. Display only process with suspendedTo equal to the supplied date.
searchApiMethod	`'POST' \| 'GET'`	`'GET'`	The HTTP method to use when searching for tasks. 'POST' value is supported from Activiti 8.7.0 forward.
names	`string[]`	[]	Filter the processes. Display only processes with names matching any of the supplied strings. This input will be used only if `searchApiMethod` input is provided with `POST` value.
initiators	`string[]`	[]	Filter the processes. Display only processes started by any of the users whose usernames are present in the array. This input will be used only if `searchApiMethod` input is provided with `POST` value.
appVersions	`string[]`	[]	Filter the processes. Display only processes present in any of the specified app versions. This input will be used only if `searchApiMethod` input is provided with `POST` value.
statuses	`string[]`	[]	Filter the processes. Display only processes with provided statuses. This input will be used only if `searchApiMethod` input is provided with `POST` value.

Events

Name	Type	Description
error	`EventEmitter<any>`	Emitted when an error occurs while loading the list of process instances from the server.
executeRowAction	`EventEmitter<DataRowActionEvent>`	Emitted when the user executes a row action.
rowClick	`EventEmitter<string>`	Emitted when a row in the process list is clicked.
rowsSelected	`EventEmitter<any[]>`	Emitted when rows are selected/unselected.
showRowActionsMenu	`EventEmitter<DataCellEvent>`	Emitted before the actions menu is displayed for a row.
showRowContextMenu	`EventEmitter<DataCellEvent>`	Emitted before the context menu is displayed for a row.
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 ] 
},

showRowContextMenu event

Emitted before the context menu is displayed for a row.

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

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

Event properties:

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

Handler example:

onShowRowContextMenu(event: DataCellEvent) {
    event.value.actions = [
        {  title: 'Hello Context Action' },
        { ... }
    ]
}

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

The ProcessListCloud will automatically render the supplied menu items.

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

showRowActionsMenu event

Emitted before the actions menu is displayed for a row. Requires the actions property to be set to true.

Event properties:

value: {
    row: DataRow,
    action: any
}

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

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

executeRowAction event

Emitted when the user executes a row action.

This usually accompanies a showRowActionsMenu event. The ProcessListCloud itself does not execute actions but provides support for external integration. If actions are provided using the showRowActionsMenu event then executeRowAction will be automatically executed when the user clicks a corresponding menu item.

<adf-cloud-process-list
    [actions]="true"
    (showRowActionsMenu)="onShowRowActionsMenu($event)"
    (executeRowAction)="onExecuteRowAction($event)">
</adf-cloud-process-list>

import { DataCellEvent, DataRowActionEvent } from '@alfresco/adf-core';

onShowRowActionsMenu(event: DataCellEvent) {
    let myAction = {
        title: 'Hello Action'
        // your custom metadata needed for onExecuteRowAction
    };
    event.value.actions = [
        myAction
    ];
}

onExecuteRowAction(event: DataRowActionEvent) {
    let args = event.value;
    console.log(args.row);
    console.log(args.action);
    window.alert(`My custom action: ${args.action.title}`);
}

You can use any payloads for row actions. The only requirement for the objects is that they must have a title property.

When an action is selected in the dropdown menu, the ProcessListCloud invokes the executeRowAction event. Use this to handle the response, inspect the action payload (and all custom properties defined earlier), and perform the corresponding actions.

13 KiB Raw Permalink Blame History