Welcome to the Alfresco Builder Network

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

Contents

Basic Usage

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

Transclusions

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

<adf-tasklist>
    <adf-empty-custom-content>
        Your Content
    </adf-empty-custom-content>
<adf-tasklist>

Class members

Properties

NameTypeDefault valueDescription
appIdnumberThe id of the app.
assignmentstringThe 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).
dataDataTableAdapter(Deprecated: 2.4.0) Data source object that represents the number and the type of the columns that you want to show.
dueAfterstringFilter the tasks. Display only tasks with created_date after dueAfter.
dueBeforestringFilter the tasks. Display only tasks with created_date before dueBefore.
includeProcessInstancebooleanToggles inclusion of Process Instances
landingTaskIdstringDefine 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.
multiselectbooleanfalseToggles multiple row selection, renders checkboxes at the beginning of each row
namestringName of the tasklist.
pagenumber0The page number of the tasks to fetch.
processDefinitionIdstringThe Definition Id of the process.
processInstanceIdstringThe Instance Id of the process.
selectFirstRowbooleantrueToggles default selection of the first row
selectionModestring"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.
sizenumberThe number of tasks to fetch. Default value: 25.
sortstringDefine the sort order of the tasks. Possible values are : created-desc, created-asc, due-desc, due-asc
startnumber0Starting point of the
statestringCurrent state of the process. Possible values are: completed, active.
taskIdstringThe id of a task

Events

NameTypeDescription
errorEventEmitter<any>Emitted when an error occurs.
rowClickEventEmitter<string>Emitted when a task in the list is clicked
rowsSelectedEventEmitter<any[]>Emitted when rows are selected/unselected
successEventEmitter<any>Emitted when the task list is loaded

Details

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

Setting the column schema

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

<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>{{entry.row.obj.assignee | fullName}}</div>
            </ng-template>
        </data-column>
    </data-columns>
</adf-tasklist>

Setting Sorting Order for the list

you can pass sorting order as shown in the example below:

// Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc`
let sortParam = 'created-desc'; 
<adf-tasklist
    [appId]="'1'"
    [sort]="sortParam">
</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

Interested in trying Alfresco?

Try Now