Skip to content

Latest commit

 

History

History
291 lines (238 loc) · 17.4 KB

task-list.component.md

File metadata and controls

291 lines (238 loc) · 17.4 KB
Raw
Title Added Status Last reviewed
Task List component
v2.0.0
Active
2019-02-08

Task List Component

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-custom-empty-content> sub-component will be shown when the task list is empty:

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

Class members

Properties

Name Type Default value Description
appId number The id of the app.
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).
blurOnResize boolean true Toggles blur when columns of the list are being resized.
data DataTableAdapter Data source object that represents the number and the type of the columns that you want to show.
dueAfter string Filter the tasks. Display only tasks with created_date after dueAfter.
dueBefore string Filter the tasks. Display only tasks with created_date before dueBefore.
isResizingEnabled boolean false Toggles column resizing for task list.
includeProcessInstance boolean Toggles inclusion of Process Instances
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.
multiselect boolean false Toggles multiple row selection, renders checkboxes at the beginning of each row
name string Name of the tasklist.
page number 0 The page number of the tasks to fetch.
presetColumn string Custom preset column schema in JSON format.
processDefinitionId string The Definition Id of the process.
processInstanceId string The Instance Id of the process.
selectFirstRow boolean true Toggles default selection of the first row
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.
showContextMenu boolean false Toggles custom context menu for the component.
size number The number of tasks to fetch. Default value: 25.
sort string Define the sort order of the tasks. Possible values are : created-desc, created-asc, due-desc, due-asc
start number Starting point of the list within the full set of tasks.
state string Current state of the process. Possible values are: completed, active.
stickyHeader boolean false Toggles the sticky header mode.
taskId string The id of a task

Events

Name Type Description
error EventEmitter<any> Emitted when an error occurs.
rowClick EventEmitter<string> Emitted when a task in the list is clicked
rowsSelected EventEmitter<any[]> Emitted when rows are selected/unselected
showRowContextMenu EventEmitter<DataCellEvent> Emitted before the context menu is displayed for a row.
success EventEmitter<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 configure the list to show any of the properties of the TaskRepresentation class. The example below shows how to set up the column schema from 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 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 a 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 Data Table Adapter interface 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 Data Column component page for more information about these features.

showRowContextMenu event

Emitted before the context menu is displayed for a row.

Note that the TaskListComponent itself does not populate the context menu with items. You can provide all necessary content via the handler.

<adf-tasklist
    [contextMenu]="true"
    (showRowContextMenu)="onShowRowContextMenu($event)">
</adf-tasklist>

Event properties:

value: {
    row: DataRow,
    col: DataColumn,
    actions: []
}

Handler example:

onShowRowContextMenu(event: DataCellEvent) {
    event.value.actions = [
        {  title: 'Task List Context Menu' },
        { ... }
    ]
}

This event is cancellable. You can use event.preventDefault() to prevent the default behavior.

The TaskListComponent will automatically render the supplied menu items.

See the ContextMenu documentation for more details on the format and behavior of context actions.

See also