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

Title, Added, Status, Last reviewed

Title	Added	Status	Last reviewed
Task List Cloud component	v3.0.0	Experimental	2019-03-25

Task List Cloud component

Renders a list containing all the tasks matched by the parameters specified.

Contents

• Basic Usage
  • Transclusions
• Class members
  • Properties
  • Events
• Details
  • Setting the column schema
  • Setting Sorting Order for the list
  • Pagination strategy
  • DataTableAdapter example
  • DataColumn Features
• See also

Basic Usage

<adf-cloud-task-list
    [appName]="'APPLICATION-NAME'" >
</adf-cloud-task-list>

Transclusions

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

<adf-cloud-task-list>
    <adf-custom-empty-content>
        Your Content
    </adf-custom-empty-content>
<adf-cloud-task-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.
assignee	string	""	The assignee of the process. Possible values are: "assignee" (the current user is the assignee), "candidate" (the current user is a task candidate", "group_x" (the task is assigned to a group where the current user is a member, no value (the current user is involved).
candidateGroupId	string	""	Filter the tasks. Display only tasks with candidateGroups equal to the supplied value.
completedBy	number		Filter the tasks. Display only tasks with createdBy equal to the supplied value.
completedDate	string	""	Filter the tasks. Display only tasks with completedDate equal to the supplied date.
completedFrom	string	""	Filter the tasks. Display only tasks with completedFrom equal to the supplied date.
completedTo	string	""	Filter the tasks. Display only tasks with completedTo equal to the supplied date.
createdDate	Date		Filter the tasks. Display only tasks created on the supplied date.
createdFrom	string	""	Filter the tasks. Display only tasks with createdFrom equal to the supplied date.
createdTo	string	""	Filter the tasks. Display only tasks with createdTo equal to the supplied date.
dueDate	Date		Filter the tasks. Display only tasks with dueDate equal to the supplied date.
dueDateFrom	string	""	Filter the tasks. Display only tasks with dueDate greater or equal than the supplied date.
dueDateTo	string	""	Filter the tasks. Display only tasks with dueDate less or equal to the supplied date.
id	string	""	Filter the tasks. Display only tasks with id equal to the supplied value.
lastModifiedFrom	string	""	Filter the tasks. Display only tasks with lastModifiedFrom equal to the supplied date.
lastModifiedTo	string	""	Filter the tasks. Display only tasks with lastModifiedTo equal to the supplied date.
multiselect	boolean	false	Toggles multiple row selection, rendering a checkbox at the beginning of each row.
name	string	""	Filter the tasks. Display only tasks with the supplied name.
owner	string	""	Filter the tasks. Display only tasks with owner equal to the supplied value.
parentTaskId	string	""	Filter the tasks. Display only tasks with parentTaskId equal to the supplied value.
presetColumn	string		Custom preset column schema in JSON format.
priority	number		Filter the tasks. Display only tasks with priority equal to the supplied value.
processDefinitionId	string	""	Filter the tasks. Display only tasks with processDefinitionId equal to the supplied value.
processDefinitionName	string	""	Filter the tasks. Display only tasks with processDefinitionName equal to the supplied value.
processInstanceId	string	""	Filter the tasks. Display only tasks with processInstanceId equal to the supplied value.
selectionMode	string	"single"	Row selection mode. Can be none, single or multiple. For multiple mode, you can use the 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	Toggles main datatable actions.
sorting	TaskListCloudSortingModel[]		Specifies how the table should be sorted. The parameters are for BE sorting.
standalone	boolean	false	Filter the tasks. Display only the tasks that belong to a process in case is false or tasks that doesn't belong to a process in case of true.
status	string	""	Filter the tasks. Display only tasks with status equal to the supplied value.
stickyHeader	boolean	false	Toggles the sticky header mode.

Events

Name	Type	Description
error	EventEmitter<any>	Emitted when an error occurs.
executeRowAction	EventEmitter<DataRowActionEvent>	Emitted when the user executes a row action.
rowClick	EventEmitter<string>	Emitted when a task in the 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 task list is loaded

Details

This component displays lists of tasks related to the application name insterted. Extra filtering can be provided by applying extra input parameters.

Setting the column schema

You can use an HTML-based schema declaration to set a column schema for the tasklist as shown below:

<adf-cloud-task-list ...>
    <data-columns>
        <data-column key="name" title="NAME" class="full-width name-column"></data-column>
        <data-column key="created" title="Created" class="hidden"></data-column>
    </data-columns>
</adf-cloud-task-list>

You can also set a static custom schema declaration in app.config.json as shown below:

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

<adf-cloud-task-list
    [appId]="'1'"
    [presetColumn]="'customSchema'">
</adf-cloud-task-list>

You can use an HTML-based schema and an app.config.json custom schema declaration at the same time:

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

<adf-cloud-task-list
    [appName]="'appName'">
    <data-columns>
        <data-column key="assignee" title="Assignee" 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-task-list>

Setting Sorting Order for the list

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

let sorting = { orderBy: 'created', direction: 'desc' };

<adf-cloud-task-list
    [appId]="'1'"
    [sorting]="[sorting]">
</adf-cloud-task-list>

Pagination strategy

The Tasklist also supports pagination as shown in the example below:

<adf-cloud-task-list #taskCloud
                        [appName]="'APPLICATION-NAME'">
</adf-cloud-task-list>
<adf-pagination [target]="taskCloud"
                (changePageSize)="onChangePageSize($event)">
</adf-pagination>

DataTableAdapter example

See the DataTableAdapter page for full details of the interface and its standard implementation, ObjectDataTableAdapter. Below is an example of how you can set up the adapter for a typical tasklist.

[
 {"type": "text", "key": "id", "title": "Id"},
 {"type": "text", "key": "name", "title": "Name", "cssClass": "full-width name-column", "sortable": true},
 {"type": "text", "key": "formKey", "title": "Form Key", "sortable": true},
 {"type": "text", "key": "created", "title": "Created", "sortable": true}
]

DataColumn Features

You can customize the styling of a column and also add features like tooltips and automatic translation of column titles. See the DataColumn page for more information about these features.

showRowContextMenu event

Emitted before the context menu is displayed for a row.

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

<adf-cloud-task-list
    [contextMenu]="true"
    (showRowContextMenu)="onShowRowContextMenu($event)">
</adf-cloud-task-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 TaskListCloudComponent 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 TaskListCloudComponent 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 TaskListCloudComponent 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-task-list
    [actions]="true"
    (showRowActionsMenu)="onShowRowActionsMenu($event)"
    (executeRowAction)="onExecuteRowAction($event)">
</adf-cloud-task-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 TaskListCloudComponent 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.

See also

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