TaskBoardSwimlanes

Mixin

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' }
       ]
   }
});

Has a corresponding runtime swimlaneField property.

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' }
   ]
});

Has a corresponding runtime swimlanes property.

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' }
       ]
   }
});