--- Title: Task List Cloud component Added: v3.0.0 Status: Experimental Last reviewed: 2019-01-08 --- # [Task List Cloud component](../../../lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.ts "Defined in task-list-cloud.component.ts") Renders a list containing all the tasks matched by the parameters specified. ## Contents - [Basic Usage](#basic-usage) - [Transclusions](#transclusions) - [Class members](#class-members) - [Properties](#properties) - [Events](#events) - [Details](#details) - [Setting the column schema](#setting-the-column-schema) - [Setting Sorting Order for the list](#setting-sorting-order-for-the-list) - [Pagination strategy](#pagination-strategy) - [DataTableAdapter example](#datatableadapter-example) - [DataColumn Features](#datacolumn-features) - [See also](#see-also) ## Basic Usage ```html ``` ### [Transclusions](../../user-guide/transclusion.md) Any content inside an `` sub-component will be shown when the task list is empty: ```html Your Content ``` ## Class members ### Properties | Name | Type | Default value | Description | | ---- | ---- | ------------- | ----------- | | 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). | | createdDate | `string` | "" | Filter the tasks. Display only tasks created on the supplied date. | | dueDate | `string` | "" | Filter the tasks. Display only tasks with dueDate 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. | | 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. | | sorting | [`TaskListCloudSortingModel`](../../../lib/process-services-cloud/src/lib/task/task-list/models/task-list-sorting.model.ts)`[]` | | 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. | ### Events | Name | Type | Description | | ---- | ---- | ----------- | | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when an error occurs. | | rowClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when a task in the list is clicked | | rowsSelected | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when rows are selected/unselected | | success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | 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: ```html ``` You can also set a static custom schema declaration in `app.config.json` as shown below: ```json "adf-cloud-task-list": { "presets": { "customSchema": [ { "key": "name", "type": "text", "title": "name", "sortable": true }], "default": [ { "key": "name", "type": "text", "title": "name", "sortable": true }], } } ``` ```html ``` You can use an HTML-based schema and an `app.config.json` custom schema declaration at the same time: ```json "adf-cloud-task-list": { "presets": { "customSchema": [ { "key": "id", "type": "text", "title": "Id", "sortable": true }], "default": [ { "key": "name", "type": "text", "title": "name", "sortable": true }], } } ``` ```html
{{getFullName(entry.row.obj.assignee)}}
``` ### Setting Sorting Order for the list You can specify a sorting order as shown in the example below: ```ts let sorting = { orderBy: 'created', direction: 'desc' }; ``` ```html ``` ### Pagination strategy The Tasklist also supports pagination as shown in the example below: ```html ``` ### DataTableAdapter example See the [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) page for full details of the interface and its standard implementation, [`ObjectDataTableAdapter`](../../../lib/core/datatable/data/object-datatable-adapter.ts). 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`](../../../lib/core/datatable/data/data-column.model.ts) page for more information about these features. ## See also - [Data column component](../../core/components/data-column.component.md) - [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) - [Pagination component](../../core/components/pagination.component.md)