v7.3.0

TaskBoard features

Features are classes that add functionality to a TaskBoard. The purpose of this guide is to give an overview of the) features that ships with TaskBoard and show how you can configure them.

Enabling/disabling and configuring features

Features are configured using TaskBoards features-config. Some features are enabled by default, in which case you can disable them like this:

const taskBoard = new TaskBoard({
    features : {
        columnToolbars : false,
        taskDrag       : false
    }
});

Others require you to enable them:

const taskBoard = new TaskBoard({
    features : {
        columnDrag  : true,
        taskTooltip : true
    }
});

Some features have configuration options (see the API docs for each feature for the options). In such cases you can specify a configuration object instead of true:

const taskBoard = new TaskBoard({
    features : {
        columnToolbars : { // Configuration object
            topItems : {
              // ...
            }
        }
    }
});

If you need to access a feature at runtime, they are available through the features property on TaskBoard:

taskBoard.features.taskEdit.editTask(taskRecord);

Built-in features

AI (API docs)

This feature provides an AI agent for TaskBoard which allows the user to use natural language to interact with the TaskBoard in different ways. The feature and all its related components are marked as experimental and are subject to change.

This feature is disabled by default.

ColumnDrag (API docs)

Allows drag and drop rearrangement of the columns on a TaskBoard.

This feature is disabled by default.

ColumnFilter (API docs)

Allows filtering of tasks per individual column on a TaskBoard.

This feature is disabled by default.

ColumnHeaderMenu (API docs)

Adds a menu and a button to show it to column headers. The menu is populated by the other features and by application code.

This feature is enabled by default.

ColumnLock (API docs)

Allows user to lock columns to the left or right.

This feature is disabled by default.

ColumnRename (API docs)

Lets users rename a column by using the header menu or by double-clicking the title element.

This feature is disabled by default.

ColumnResize (API docs)

Allows user to change the width of columns by using a resize handle between column headers.

This feature is disabled by default.

ColumnSort (API docs)

Allows sorting of tasks per individual column on a TaskBoard.

This feature is disabled by default.

ColumnToolbars (API docs)

Adds toolbars to each column/swimlane intersection. Items and location (top and/or bottom) is configurable.

This feature is enabled by default.

FilterBar (API docs)

Adds a filter input to the column header to filter tasks by text match in multiple fields.

This feature is disabled by default.

SimpleTaskEdit (API docs)

Inline editing of items on a tasks card.

This feature is disabled by default.

SwimlaneDrag (API docs)

Allow drag and drop rearrangement of the swimlanes on a TaskBoard.

This feature is disabled by default.

TaskDrag (API docs)

Allow drag and drop rearrangement of tasks, within a column or between columns and swimlanes.

This feature is enabled by default.

TaskDragSelect (API docs)

Marquee selection of tasks. Mouse down on an empty part of the TaskBoard and move the mouse to select tasks.

This feature is enabled by default.

TaskEdit (API docs)

Edit tasks in a customizable popup editor. Changes are reflected live (if not configured otherwise).

This feature is enabled by default.

More info in the task editor customization guide.

TaskMenu (API docs)

Customizable context menu for tasks.

This feature is enabled by default.

More info in the menu customization guide.

TaskTooltip (API docs)

Task tooltip with customizable contents, shown when hovering tasks.

This feature is disabled by default.

Importing features from sources

A feature is registered when the application imports it. When using the regular module/umd bundle, this is done automatically, as the bundle encapsulates all code inside. However, when utilizing sources or thin bundles, a feature might not be imported by default. For any feature not enabled by default, it is essential to ensure that you have imported it to be able to use it.

Example:

import TaskBoard from 'PATH_TO_SOURCE/TaskBoard/view/TaskBoard.js';
import 'PATH_TO_SOURCE/TaskBoard/feature/ColumnDrag.js';

const taskBoard = new TaskBoard({
    features : {
        columnDrag : {
            // feature config
        }
    }
});

Contents