---
Added: v2.0.0
Status: Active
---
# Task List component

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

## Basic Usage

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

You can pass schema as data adapter for the tasklist like shown below :

```ts
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
        }
    ]
);
```

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

You can also use HTML-based schema declaration like shown below:

```html
<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 use static custom schema declaration as shown below:

define static custom schema in the app.config.json as shown below json format.

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

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

You can also use both HTML-based and app.config.json custom schema declaration at same time like shown below:

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

```html
<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

adf-tasklist also supports pagination and the same can be used as shown below.

```html
<adf-tasklist
    [appId]="'1'"
    [page]="page"
    [size]="size"
    #taskList>
</adf-tasklist>
<adf-pagination
    *ngIf="taskList"
    [target]="taskList"
    [supportedPageSizes]="supportedPages"
    #taskListPagination>
</adf-pagination>
```

### Properties

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| appId | string |  | The id of the app. |
| processDefinitionKey | string |  | The processDefinitionKey of the process. |
| processInstanceId | string |  | The processInstanceId of the process. |
| presetColumn | string |  | The presetColumn of the custom schema to fetch. |
| page | number | 0 | The page of the tasks to fetch. |
| size | number | 25 | The number of tasks to fetch. |
| assignment | string |  | The assignment of the process. <ul>Possible values are: <li>assignee : where the current user is the assignee</li> <li>candidate: where the current user is a task candidate </li><li>group_x: where the task is assigned to a group where the current user is a member of.</li> <li>no value: where the current user is involved</li> </ul> |
| 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. |
| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
| state | string |  | Define state of the processes. Possible values are: `completed`, `active` |
| hasIcon | boolean | true | Toggle the icon on the left . |
| landingTaskId | string |  | Define which task id should be selected after the reloading. If the task id doesn't exist or nothing is passed it will select the first task |
| sort | string |  | Define the sort of the processes. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |
| data | [DataTableAdapter](datatable-adapter.interface.md) |  | JSON object that represent the number and the type of the columns that you want show (see the [example](#datatableadapter-example) section below) |

### Events

| Name | Description |
| ---- | ----------- |
| success | Raised when the task list is loaded |
| rowClick | Raised when the task in the list is clicked |
| rowsSelected | Raised when the a row is selected/unselected |

## Details

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

### DataTableAdapter example

See the [DataTableAdapter](datatable-adapter.interface.md) 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.

```json
[
 {"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](data-column.component.md) page for more information about these features.

## See also

-   [Data column component](data-column.component.md)
-   [DataTableAdapter](datatable-adapter.interface.md)
-   [Pagination component](pagination.component.md)