Renders a list containing all the tasks matched by the parameters specified.
<adf-cloud-task-list
[appName]="'APPLICATION-NAME'" >
</adf-cloud-task-list>
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>
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. |
environmentId | string | Filter the tasks to display only the ones with this environment ID. | |
id | string | "" | Filter the tasks. Display only tasks with id equal to the supplied value. |
isResizingEnabled | boolean | false | Toggles main datatable column resizing feature. |
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. |
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 |
This component displays lists of tasks related to the application name insterted. Extra filtering can be provided by applying extra input parameters.
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>
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>
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>
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}
]
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.
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.
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.
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.
© 2023 Alfresco Software, Inc. All Rights Reserved.
By using this site, you are agreeing to allow us to collect and use cookies as outlined in Alfresco’s Cookie Statement and Terms of Use (and you have a legitimate interest in Alfresco and our products, authorizing us to contact you in such methods). If you are not ok with these terms, please do not use this website.