alfresco-ng2-components/docs/task-list.component.md

Added, Status, Last reviewed

Added	Status	Last reviewed
v2.0.0	Active	2018-03-12

Task List component

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

Basic Usage

<adf-tasklist 
    [appId]="'1'" 
    [state]="'open'" 
    [assignment]="'assignee'">
</adf-tasklist>

Properties

Name	Type	Default value	Description
appId	number		The id of the app.
processInstanceId	string		The Instance Id of the process.
processDefinitionKey	string		The Definition Key of the process.
state	string		Current state of the process. Possible values are: completed, active.
assignment	string		The assignment 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).
sort	string		Define the sort order of the processes. Possible values are : created-desc, created-asc, due-desc, due-asc
name	string		Name of the tasklist.
landingTaskId	string		Define which task id should be selected after reloading. If the task id doesn't exist or nothing is passed then the first task will be selected.
data	any		Data source object that represents the number and the type of the columns that you want to show.
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.
presetColumn	string		Custom preset column schema in JSON format.
multiselect	boolean	false	Toggles multiple row selection, renders checkboxes at the beginning of each row
page	number	0	The page number of the tasks to fetch.
size	number	See description	The number of tasks to fetch. Default value: 25.

Events

Name	Type	Description
rowClick	EventEmitter<string>	Emitted when a task in the list is clicked
rowsSelected	EventEmitter<any[]>	Emitted when rows are selected/unselected
success	EventEmitter<any>	Emitted when the task list is loaded
error	EventEmitter<any>	Emitted when an error occurs.

Details

This component displays lists of process instances both active and completed, using any defined process filter, and render details of any chosen instance.

Setting the column schema

You can pass a DataTableAdapter instance to set a column schema for the tasklist as shown below :

let data = new ObjectDataTableAdapter(
    // Row data
    [
        { id: 1, name: 'Name 1' },
        { id: 2, name: 'Name 2' }
    ],
    // Column schema
    [
        { 
            type: 'text', 
            key: 'id', 
            title: 'Id', 
            sortable: true 
        },
        {
            type: 'text', 
            key: 'name', 
            title: 'Name', 
            sortable: true
        }
    ]
);

<adf-tasklist
    [data]="'data'">
</adf-tasklist>

Alternatively, you can use an HTML-based schema declaration:

<adf-tasklist ...>
    <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-tasklist>

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

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

<adf-tasklist 
    [appId]="'1'" 
    [presetColumn]="'customSchema'">
</adf-tasklist>

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

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

<adf-tasklist
    [appId]="'1'" 
    [presetColumn]="'customSchema'">
    <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-tasklist>

Pagination strategy

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

<adf-tasklist
    [appId]="'1'"
    [page]="page"
    [size]="size"
    #taskList>
</adf-tasklist>
<adf-pagination
    *ngIf="taskList"
    [target]="taskList"
    [supportedPageSizes]="supportedPages"
    #taskListPagination>
</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.

See also

• Data column component
• DataTableAdapter
• Pagination component