v7.3.0

Working with tasks

A TaskBoard visualizes tasks as cards in multiple columns (or lists), optionally divided into horizontal swimlanes. This guide shows how to define and manipulate tasks, for more information on columns and swimlanes see these guides:

Also relevant in relation to tasks is how to assign resources, see:

Defining tasks

Tasks are on the data level represented by task records (instances of TaskModel) in a task store (an instance of TaskStore). The store is in turn part of a project (ProjectModel), which holds multiple other related stores (such as for resources and assignments).

Tasks can be supplied inline or loaded from a backend using the projects built-in CrudManager functionality. This snippet shows how to create a TaskBoard with inline data:

const taskBoard = new TaskBoard({
   project : {
       tasks : [
           { id : 1, name : 'Learn about tasks', status : 'doing' },
           /*...*/
       ]
   } 
});

And this snippet shows how to load from a backend:

const taskBoard = new TaskBoard({
   project : {
       transport : {
           load : {
               url : 'backend/load.php'
           }
       },

       autoLoad : true
   } 
});

TaskBoards data layer is an extended/specialized version of Schedulers/Calendars. TaskModel extends Schedulers EventModel, and as such it has many predefined fields you can use (not all of which have an impact on the UI in TaskBoard). The most useful ones are probably (in alphabetical order):

  • eventColor - Pick from a predefined set of colors, applied as currentColor to the tasks element. Useful for styling
  • name - Name of the task, by default displayed in a cards header
  • description - Task description, by default displayed in a cards body
  • prio - Task priority, in demos used for swimlanes
  • status - Task status, in demos used for columns (todo, doing, done etc)

Linking tasks to columns and swimlanes

Tasks can be linked to a specific column and optionally a swimlane using any field defined on the task. Which fields to use are defined on the TaskBoard, as columnField and optionally swimlaneField. The task will be displayed in the column/swimlane whose id matches the value of the corresponding field on the task.

This snippet illustrates a basic setup:

const taskBoard = new TaskBoard({
    // Match tasks to columns using the status field
    columnField : 'status',

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

    // Match tasks to swimlanes using the prio field
    swimlaneField : 'prio',

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

    project : {
        tasks : [
            // Task that will be displayed in the "todo" column in the "high" swimlane
            { id : 1, name : 'Task 1', status : 'todo', prio : 'high' },
            // Task that will be display in the "done" column in the "low" swimlane
            { id : 2, name : 'Task 2', status : 'done', prio : 'low' }
        ]
    }
});

Accessing and manipulating tasks at runtime

Loaded tasks can be accessed at runtime using the task store defined on TaskBoards project:

// The task store
const taskStore = taskBoard.project.taskStore

To retrieve a task, you can look it up using its id: 

// Access task #2
const task2 = taskStore.getById(2)

The fields of the task can be read/manipulated at runtime, changes will be reflected in the UI automatically (if the field has a representation in the UI):

// Change the name of task #2
task2.name = 'Newly named';

To remove a task, you can either call remove() on the record or on the store. Upside of calling it on the store is that you can remove multiple tasks at once:

// Remove single task
task2.remove();
// Remove multiple tasks 
taskStore.remove([task1, task2]);

To add a new task, supply a task data object to store add():

// Append a new task #3
taskStore.add({
  id     : 3,
  name   : 'Task 3',
  status : 'todo',
  prio   : 'low'
});

Task widgets & features

Also worth mentioning in this guide are the built-in widgets and features that are associated with tasks.

Features

  • TaskDrag - Rearrange tasks by dragging and dropping them between columns and swimlanes:
  • TaskEdit - Edit task fields, column, swimlane and assign resources:

Widgets

  • TaskColorCombo - Combo listing predefined colors, used in the task editor (double click a task in the demo):
  • TaskEditor - The editor that by default is displayed by the TaskEdit feature:

Contents