TaskBoardBase

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;

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

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.

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

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>`;
    }
})

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.

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;