TaskBoard

Columns hold their tasks in stores chained off the project's task store. Filters applied to the project store are by default not applied to the column stores; they are only affected by their own filters. By configuring chainFilters : true, the filters from the project store will also be taken into account when filtering the columns.

Filters on the columns' stores are applied separately, and clearing the filters on them by using clearFilters will not clear the filter(s) on the project's store.

See also chainFilters.

Field on a task record used to determine which column the task belongs to.

const taskBoard = new TaskBoard({
   columnField : 'status',

   columns : [
       'todo',
       'done'
   ],

   project : {
       tasks : [
           // Linked using the status field, to the done column
           { id : 1, name : 'Fun task', status : 'done' }
       ]
   }
});

Store containing the TaskBoard columns. A tasks columnField is matched against the id of a column to determine in which column it is displayed.

Accepts an array of column records/objects/strings, a store instance, a store id or a store config object used to create a new store.

When supplying an array, a store configured with {Core.data.mixin.StoreProxy#config-objectify} is automatically created. Using that config allows for a nicer interaction syntax with the columns:

// Without objectify:
taskBoard.columns.getById('done').text = 'Finished';

// With objectify:
taskBoard.columns.done.text = 'Finished';

When supplying strings, the raw string will be used as the columns id and a capitalized version of it is used as the columns text:

taskBoard = new TaskBoard({
   columns : [
       'doing',
       'done'
   ]
});

Is equivalent to:

taskBoard = new TaskBoard({
   columns : [
       { id : 'doing', text : 'Doing' },
       { id : 'done', text : 'Done' }
   ]
});

Columns data can be also be loaded remotely as part of the Project dataset.

An object containing Feature configuration objects (or true if no configuration is required) keyed by the Feature class name in all lowercase.

See Keyboard shortcuts for details

Path to load resource images from. Used by the for example the resource picker in the task editor and by the ResourceAvatars task item. Set this to display miniature images for each resource using their image field.

NOTE: The path should end with a /:

new TaskBoard({
  resourceImagePath : 'images/resources/'
});

Show task count for a column in its header, appended after the title

new TaskBoard({
  showCountInHeader : false
});

Makes column and swimlane headers sticky

new TaskBoard({
  stickyHeaders : true
});

Setting this will cause cards to expand to share the available width if there are fewer than tasksPerRow.

By default, the tasksPerRow always applies, and if it is 3, then a single card in a column will be 33% of the available width.

To have fewer cards than the tasksPerRow evenly share available column width, configure this as true;

Field on a task record used to determine which swimlane the task belongs to.

const taskBoard = new TaskBoard({
   // Use the "prio" field of tasks to determie which swimlane a task belongs to
   swimlaneField : 'prio',

   swimlanes : [
       'high',
       'low'
   ],

   project : {
       tasks : [
           // Linked using the prio field, to the high swimlane
           { id : 1, name : 'Fun task', prio : 'high' }
       ]
   }
});

Store containing the TaskBoard swimlanes. A tasks swimlaneField is matched against the id of a swimlane to determine in which swimlane it is displayed.

Accepts an array of swimlane records/objects, a store instance, a store id or a store config object used to create a new store.

When supplying an array, a store configured with objectify is automatically created. Using that config allows for a nicer interaction syntax with the swimlanes:

// Without objectify:
taskBoard.swimlanes.getById('highprio').text = 'Important!';

// With objectify:
taskBoard.swimlanes.done.text = 'Finished';

When supplying strings, the raw string will be used as the swimlanes id and a capitalized version of it is used as the swimlanes text:

taskBoard = new TaskBoard({
   swimlanes : [
       'high',
       'low'
   ]
});

Is equivalent to:

taskBoard = new TaskBoard({
   swimlanes : [
       { id : 'high', text : 'High' },
       { id : 'low', text : 'Low' }
   ]
});

Controls how many cards are rendered to a row in each column. Can be controlled on a per column basis by setting tasksPerRow

new TaskBoard({
  tasksPerRow : 3
});

The name of the event that should activate a task and trigger editing (if an editing feature is active). Available options are: 'taskClick', 'taskDblClick' or null (disable)

Set to true to auto generate columns when columns is undefined.

A column will be created for each distinct value of columnField on the tasks. The columns will be sorted in alphabetical order. The following snippet will yield two columns, Q1 and Q2:

const taskBoard = new TaskBoard({
   columnField : 'quarter',

   autoGenerateColumns : true,

   project : {
       tasks : [
           { id : 1, name : 'Inform tenants', quarter : 'Q1' },
           { id : 2, name : 'Renovate roofs', quarter : 'Q2' }
       ]
   }
});

Set to true to auto generate swimlanes when swimlanes is undefined.

A swimlane will be created for each distinct value of swimlaneField on the tasks. The swimlanes will be sorted in alphabetical order. The following snippet will yield two swimlanes, Q1 and Q2:

const taskBoard = new TaskBoard({
   swimlaneField : 'quarter',

   autoGenerateSwimlanes : true,

   project : {
       tasks : [
           { id : 1, name : 'Inform tenants', quarter : 'Q1' },
           { id : 2, name : 'Renovate roofs', quarter : 'Q2' }
       ]
   }
});

The function is called for each task as part of the render loop, and is expected to return the height in pixels for the task. Using this function is only recommended when using partial virtualized rendering, see the virtualize setting.

How the height is determined is up to the application, it could for example return a fixed value:

taskBoard = new TaskBoard({
    getTaskHeight() {
        return 150;
    }
}

Or get the height from data:

taskBoard = new TaskBoard({
    getTaskHeight(taskRecord) {
        return taskRecord.myTaskHeight;
    }
}

Or use some custom application logic:

taskBoard = new TaskBoard({
    getTaskHeight(taskRecord) {
        if (taskRecord.isCollapsed) {
            return 20;
        }

        return taskRecord.myTaskHeight;
    }
}

Default scroll options, see the options for scrollIntoView

Defaults to:

scrollOptions : {
    animate   : true,
    block     : 'nearest',
    highlight : true
}

Can be overridden per call for all scroll functions.

An empty function by default, but provided so that you can override it. This function is called each time a swimlane is rendered into the task board. It allows you to manipulate the DOM config object used for the swimlane before it is synced to DOM, thus giving you control over styling and contents.

const taskBoard = new TaskBoard({
   swimlaneRenderer({ swimlaneRecord, swimlaneConfig }) {
       // Add an icon to all swimlane headers
       swimlaneConfig.children.header.children.icon = {
           tag   : 'i',
           class : 'fa fa-dog'
       }
   }
});

Allows sorting tasks in the UI independent of how they are sorted in the task store.

Specify true to force sorting tasks by weight.

Supply a sort function to force a custom sort order.

This is likely something you will want to use if combining TaskBoard with other products, sharing the project. Without this, sorting tasks in for example Gantt will also rearrange the cards on the board.

As described above it accepts either a boolean or a Function, but it always returns a sorter function.

CSS variable prefix, appended to the keys used in css.

Normally you do not need to change this value.

Inline assignments, will be loaded into an internally created AssignmentStore as a part of a project.

Default values to apply to task records created by task boards features (such as the column header menu and the column toolbar)

A project config object or an instance that holds all stores and data used by the TaskBoard.

const taskBoard = new TaskBoard({
    project : {
        // Use a custom task model
        taskModelClass : MyTaskModel,

        // Supply inline data
        tasks : [
            { id : 1, name: 'Task 1', ... },
            ...
        ]
});

Project has built-in crud manager functionality to handle syncing with a backend:

const taskBoard = new TaskBoard({
    project : {
        loadUrl : 'data/data.json'
    },
    autoLoad : true
});

Also has built-in state tracking manager functionality to handle undo/redo:

```javascript
const taskBoard = new TaskBoard({
    stm : {
        autoRecord : true,
        disabled   : false
    }
});

Inline resources, will be loaded into an internally created ResourceStore as a part of a project.

Inline tasks, will be loaded into an internally created TaskStore as a part of a project.

Experimental, animate actions that cannot be animated using CSS transitions. Currently includes:

• Programmatically moving tasks
• Moving tasks using the task editor
• Adding tasks
• Removing tasks
• Sorting tasks
• Hiding/showing/filtering columns
• Hiding/showing/filtering swimlanes

new TaskBoard({
  useDomTransition : true
});

NOTE: This flag is not supported for Lightning Web Components

TaskBoard does not use a sync mask by default. If you want one, see syncMask for configuration options.

By default, the header text is HTML-encoded. Set this flag to false disable this and allow html elements in the column headers. Can also be specified on a single column.

A function which renders the text, HTML, or DomConfig object to show as the column title. If you provide a DomConfig object, it will replace the title element and you are responsible for styling it + laying it out.

new TaskBoard({
    columnTitleRenderer({ columnRecord }) {
        const highPrioCount = columnRecord.taskStore.query(task => task.status === columnRecord.id && task.prio === 'high').length;

        return `${columnRecord.text} <span class="highprio-count">(${highPrioCount} high prio)</span>`;
    }
})

Whether to draw cards on scroll, or only when scrolling ends.

Only applies when using partial virtualized rendering (see getTaskHeight).

Setting this to false will boost scroll performance, but cards scrolled into view will be empty outlines until scrolling ends.

By turning on this setting you enable partial virtualized rendering for the board, which reduces initial rendering time and makes interaction less sluggish when using thousands of tasks. The tradeoff is that scrolling in most cases will be slower.

For a nice UX, it is strongly recommended to also implement a getTaskHeight function. Without it, the height of tasks out of view will be unknown and the behaviour when scrolling will be less than ideal.

Configuration values for the ScrollManager class. It is used to manage column/body scrolling during task, column or swimlane drag.

new TaskBoard({
    scrollManager : {
        zoneWidth   : 100, // increase zone size
        scrollSpeed : 3    // and scroll speed
    }
})

An empty function by default, but provided so that you can override it. This function is called each time a task is rendered into the task board. It allows you to manipulate the DOM config object used for the card before it is synced to DOM, thus giving you control over styling and contents.

const taskBoard = new TaskBoard({
   taskRenderer({ taskRecord, cardConfig }) {
       // Add an icon to all tasks header
       cardConfig.children.header.children.icon = {
           tag   : 'i',
           class : 'fa fa-beer'
       }
   }
});

For more information, see the Customize task contents guide.

Field on a task record used to determine which column the task belongs to.

taskBoard.columnField = 'category';

Store containing the TaskBoard columns.

The ProjectModel instance, containing the data visualized by the TaskBoard.

Setting this will cause cards to expand to share the available width if there are fewer than tasksPerRow.

By default, the tasksPerRow always applies, and if it is 3, then a single card in a column will be 33% of the available width.

To have fewer cards than the tasksPerRow evenly share available column width, configure this as true;

Field on a task record used to determine which swimlane the task belongs to.

taskBoard.swimlaneField = 'category';

Store containing the TaskBoard swimlanes.

The function is called for each task as part of the render loop, and is expected to return the height in pixels for the task. Using this function is only recommended when using partial virtualized rendering, see the virtualize setting.

How the height is determined is up to the application, it could for example return a fixed value:

taskBoard = new TaskBoard({
    getTaskHeight() {
        return 150;
    }
}

Or get the height from data:

taskBoard = new TaskBoard({
    getTaskHeight(taskRecord) {
        return taskRecord.myTaskHeight;
    }
}

Or use some custom application logic:

taskBoard = new TaskBoard({
    getTaskHeight(taskRecord) {
        if (taskRecord.isCollapsed) {
            return 20;
        }

        return taskRecord.myTaskHeight;
    }
}

Inline assignments, will be loaded into an internally created AssignmentStore as a part of a project.

Inline resources, will be loaded into an internally created ResourceStore as a part of a project.

Inline tasks, will be loaded into an internally created TaskStore as a part of a project.

Whether to draw cards on scroll, or only when scrolling ends.

Only applies when using partial virtualized rendering (see getTaskHeight).

Setting this to false will boost scroll performance, but cards scrolled into view will be empty outlines until scrolling ends.

By turning on this setting you enable partial virtualized rendering for the board, which reduces initial rendering time and makes interaction less sluggish when using thousands of tasks. The tradeoff is that scrolling in most cases will be slower.

For a nice UX, it is strongly recommended to also implement a getTaskHeight function. Without it, the height of tasks out of view will be unknown and the behaviour when scrolling will be less than ideal.

Add a new task to the specified column / swimlane intersection (swimlane is optional), scroll it into view and start editing it (if an editing feature is enabled).

By default the task is created using the data defined in the newTaskDefaults combined with values for the columnField, the swimlaneField and a generated weight to place it last. To override these or to supply your own values for any field, pass the taskData argument.

If project is configured to auto sync changes to backend, the sync request will be awaited before editing starts.

Removes one or more tasks from the linked task store (and thus the TaskBoard).

First fires a 'beforeTaskRemove' event, which is preventable and async. Return false or a promise that resolves to false from a listener to prevent the operation.

taskBoard.on({
    async beforeRemoveTask() {
        const result = await askForConfirmation();
        return result;
    }
});

taskBoard.remove(myTask);

Retrieves the element for the supplied column.

Only applicable when not using swimlanes. If you are using swimlanes, see getColumnElements.

Retrieves the elements for the supplied column. When using swimlanes, a column has one element per swimlane.

Retrieves the header element for the supplied column.

Retrieves the element for the supplied swimlane / column intersection.

const element = taskBoard.getSwimlaneColumnElement(taskBoard.swimlanes.first, taskBoard.columns.last);

Retrieves the element for the supplied swimlane.

const swimlaneElement = taskBoard.getSwimlaneElement(taskBoard.swimlanes.first);

Retrieves the element for the column that holds the supplied task record.

const columnElement = taskBoard.getColumnElement(taskRecord);

Retrieves the task element (card) corresponding to the supplied task record.

const cardElement = taskBoard.getTaskElement(taskRecord);

Retrieves the element for the swimlane that holds the supplied task record.

const swimlaneElement = taskBoard.getTaskSwimlaneElement(taskRecord);

Retrieves a column record resolved from the supplied element. Has to be a .b-task-board-column element or descendant thereof (such as a card).

const columnRecord = taskBoard.resolveColumnRecord(taskElement);

Retrieves a swimlane record resolved from the supplied element. Has to be a .b-task-board-swimlane element or descendant thereof.

const swimlaneRecord = taskBoard.resolveSwimlaneRecord(taskElement);

Retrieves a task record corresponding to the supplied element. Has to be a .b-task-board-card element or descendant thereof.

const taskRecord = taskBoard.resolveTaskRecord(taskElement);

Scroll specified column into view.

taskBoard.scrollToColumn('backlog');
taskBoard.scrollToColumn(taskBoard.columns.first);

Scroll to the intersection between specified swimlane and column.

taskBoard.scrollToIntersection('high', 'done');
taskBoard.scrollToIntersection(taskBoard.swimlanes.low, taskBoard.columns.todo);

Scroll specified swimlane into view.

taskBoard.scrollToSwimlane('high');
taskBoard.scrollToSwimlane(taskBoard.swimlanes.last);

Scroll the specified task into view.

taskBoard.scrollToTask(10);
taskBoard.scrollToTask(taskStore.first);