TaskBoardBase
Widget

A thin base class for TaskBoard. Does not include any features by default, allowing smaller custom-built bundles if used in place of TaskBoard.

NOTE: In most scenarios you probably want to use TaskBoard instead of TaskBoardBase.

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

features : Object

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

Setting this property has no effect when using framework wrappers.

When using framework wrappers, features must be configured via featureNameFeature properties. See Framework Integration Guide for details.
keyMap : Object<String, KeyMapConfig>

See Keyboard shortcuts for details
resourceImagePath : String
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/'
});
```
showCountInHeader : Booleantrue
Show task count for a column in its header, appended after the title
```
new TaskBoard({
  showCountInHeader : false
});
```
stickyHeaders : Booleanfalse
Makes column and swimlane headers sticky
```
new TaskBoard({
  stickyHeaders : true
});
```
stretchCards : Boolean

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;

Has a corresponding runtime stretchCards property.
tasksPerRow : Number
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
});
```
columnTitleRenderer : Function
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>`;
    }
})
```
Parameters
- context : Object
  
  Renderer context data
- columnRecord : ColumnModel
  
  The column instance
Returns

String/DomConfig
swimlaneRenderer : Function
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'
       }
   }
});
```
Parameters
- context : Object
  
  An object containing the information needed to render a swimlane.
- swimlaneRecord : SwimlaneModel
  
  The swimlane.
- swimlaneConfig : DomConfig
  
  DOM config object for the swimlane
Returns

void
taskSorterFn : Boolean/Function
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.
Parameters
- first : TaskModel
  
  The first task to compare
- second : TaskModel
  
  The second task to compare
Returns

Number
:

Return 1 if first task is greater than second task, -1 if the opposite is true or 0 if they are equal
cssVarPrefix : Stringb-task-board

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

Normally you do not need to change this value.
useDomTransition : Boolean
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
htmlEncodeHeaderText : Booleantrue

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.
scrollManager : ScrollManagerConfig
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
    }
})
```
taskRenderer : Function
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.

You should never modify any records inside this method.
```
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.
Parameters
- context : Object
  
  An object containing the information needed to render a task
- taskRecord : TaskModel
  
  The task record
- columnRecord : ColumnModel
  
  The column the task will be displayed in
- swimlaneRecord : SwimlaneModel
  
  The swimlane the task will be displayed in
- cardConfig : DomConfig
  
  DOM config object for the cards element
Returns

void

Properties

Properties are getters/setters or publicly accessible variables on this class

isTaskBoardBase : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of TaskBoardBase class, or subclass thereof.

stretchCards : Boolean

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;

Has a corresponding stretchCards config.
isTaskBoardBase : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of TaskBoardBase class, or subclass thereof.

Functions

Functions are methods available for calling on the class

editTask( taskRecord, element )
: Boolean

FROM-FEATURE

Starts inline editing of the supplied task, optionally for a specific item on its card.

Added by the SimpleTaskEdit feature, only available when that feature is enabled.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

beforeColumnDrag

PREVENTABLE

FROM-FEATURE

Fires on the owning TaskBoard before column dragging starts. Return false to prevent the action

Added by the ColumnDrag feature, only available when that feature is enabled.
columnDragStart

FROM-FEATURE

Fires on the owning TaskBoard when column dragging starts

Added by the ColumnDrag feature, only available when that feature is enabled.
columnDrag

FROM-FEATURE
Fires on the owning TaskBoard when a column is dragged, if the drag leads to a change compared to the last columnDrag event.

Returning false from a listener will flag the drag as invalid (by default turning the drop indicator red)
```
const taskBoard = new TaskBoard({
   listeners : {
       // Do not allow moving beyond last column
       columnDrag({ columnRecord, beforeColumn }) {
          return beforeColumn === null;
       }
   }
});
```
Added by the ColumnDrag feature, only available when that feature is enabled.
columnDrop

FROM-FEATURE

Fires on the owning TaskBoard when a column is successfully dropped (after the drop transition has finished)

Added by the ColumnDrag feature, only available when that feature is enabled.
columnDragEnd

FROM-FEATURE

Fires on the owning TaskBoard when a previously started drag operation ends, no matter the outcome of it (whether valid, invalid or aborted)

Added by the ColumnDrag feature, only available when that feature is enabled.

beforeColumnDrop

ASYNC

PREVENTABLE

FROM-FEATURE

Fires on the owning TaskBoard when dropping a column, before the operation completes. Handles async listeners, returning false from one will abort the operation

const taskBoard = new TaskBoard({
   listeners : {
       async beforeColumnDrop({ columnRecord, beforeColumn }) {
           // Show confirmation dialog
           const result = await MessageDialog.confirm({
               title   : 'Verify drop',
               message : `Please confirm moving ${columnRecord.text} before ${beforeColumn.text}?`
           });

           // Returning false will abort the drop (if user pressed Cancel)
           return result === MessageDialog.okButton;
       }
   }
});

Added by the ColumnDrag feature, only available when that feature is enabled.

columnDragAbort

FROM-FEATURE

Fires on the owning TaskBoard when a drag operation is aborted (invalid drop or aborted using ESC)

Added by the ColumnDrag feature, only available when that feature is enabled.
columnFilterShow

FROM-FEATURE

Triggered when the column filter is displayed.

Added by the ColumnFilter feature, only available when that feature is enabled.
columnFilterHide

FROM-FEATURE

Triggered when the column filter is hidden.

Added by the ColumnFilter feature, only available when that feature is enabled.
columnFilterToggle

FROM-FEATURE

Triggered when the column filter visibility is toggled.

Added by the ColumnFilter feature, only available when that feature is enabled.
columnHeaderMenuBeforeShow

PREVENTABLE

FROM-FEATURE

This event fires on the owning TaskBoard before the menu is shown for a column header. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

Added by the ColumnHeaderMenu feature, only available when that feature is enabled.
cellMenuShow

FROM-FEATURE

This event fires on the owning TaskBoard after the context menu is shown for a column header.

Added by the ColumnHeaderMenu feature, only available when that feature is enabled.
cellMenuItem

FROM-FEATURE

This event fires on the owning TaskBoard when an item is selected in the column header menu.

Added by the ColumnHeaderMenu feature, only available when that feature is enabled.
cellMenuToggleItem

FROM-FEATURE

This event fires on the owning TaskBoard when a check item is toggled in the column header menu.

Added by the ColumnHeaderMenu feature, only available when that feature is enabled.
beforeColumnResize

PREVENTABLE

FROM-FEATURE

This event is fired prior to starting a column resize gesture. The resize is canceled if a listener returns false.

Added by the ColumnResize feature, only available when that feature is enabled.
columnResizeStart

FROM-FEATURE

This event is fired when a column resize gesture starts.

Added by the ColumnResize feature, only available when that feature is enabled.
columnResize

FROM-FEATURE

This event is fired after a resize gesture is completed.

Added by the ColumnResize feature, only available when that feature is enabled.

beforeSimpleTaskEdit

PREVENTABLE

FROM-FEATURE

Fires on the owning TaskBoard before displaying an inline editor. Returning false stops the editor from being shown.

const taskBoard = new TaskBoard({
   listeners : {
       beforeSimpleTaskEdit({ taskRecord }) {
           // Some condition for which editing should be blocked...
           if (taskRecord.disallowed) {
               return false;
           }
       }
   }
});

Added by the SimpleTaskEdit feature, only available when that feature is enabled.

simpleTaskEditComplete

PREVENTABLE

FROM-FEATURE
Fires on the owning TaskBoard when inline editing of a field has successfully finished.
```
const taskBoard = new TaskBoard({
   listeners : {
       simpleTaskEditComplete({ taskRecord, field }) {
           Toast.show(`Finished editing ${field} of ${taskRecord.name}`);
       }
   }
});
```
Added by the SimpleTaskEdit feature, only available when that feature is enabled.
simpleTaskEditCancel

PREVENTABLE

FROM-FEATURE
Fires on the owning TaskBoard when inline editing of a field is cancelled (by pressing ESC).
```
const taskBoard = new TaskBoard({
   listeners : {
       simpleTaskEditCancel({ taskRecord }) {
           Toast.show(`Aborted editing of ${taskRecord.name}`);
       }
   }
});
```
Added by the SimpleTaskEdit feature, only available when that feature is enabled.
beforeTaskDrag

PREVENTABLE

FROM-FEATURE

Fires on the owning TaskBoard before task dragging starts. Return false to prevent the action

Added by the TaskDrag feature, only available when that feature is enabled.
taskDragStart

FROM-FEATURE

Fires on the owning TaskBoard when task dragging starts

Added by the TaskDrag feature, only available when that feature is enabled.
taskDrag

FROM-FEATURE

Fires on the owning TaskBoard when tasks are dragged, if the drag leads to any changes compared to the last taskDrag event (moved to a new column or changed order within a column).

Returning false from a listener will flag the drag as invalid (by default turning the drop indicator red)

Added by the TaskDrag feature, only available when that feature is enabled.

beforeTaskDrop

ASYNC

PREVENTABLE

FROM-FEATURE

Fires on the owning TaskBoard when tasks are dropped, before the operation completes. Handles async listeners, returning false from one will abort the operation

const taskBoard = new TaskBoard({
   listeners : {
       async beforeTaskDrop({ taskRecords, targetColumn }) {
           // Show confirmation dialog
           const result = await MessageDialog.confirm({
               title   : 'Verify drop',
               message : `Please confirm moving ${taskRecords.map(t => `"${t.name}"`).join(', ')} to ${targetColumn.text}?`
           });

           // Returning false will abort the drop (if user pressed Cancel)
           return result === MessageDialog.okButton;
       }
   }
});

Added by the TaskDrag feature, only available when that feature is enabled.

taskDrop

FROM-FEATURE

Fires on the owning TaskBoard when tasks are successfully dropped (after the drop transition has finished)

Added by the TaskDrag feature, only available when that feature is enabled.
taskDragEnd

FROM-FEATURE

Fires on the owning TaskBoard when a previously started drag operation ends, no matter the outcome of it (whether valid, invalid or aborted)

Added by the TaskDrag feature, only available when that feature is enabled.
taskDragAbort

FROM-FEATURE

Fires on the owning TaskBoard when a drag operation is aborted (invalid drop or aborted using ESC)

Added by the TaskDrag feature, only available when that feature is enabled.
beforeTaskEdit

ASYNC

PREVENTABLE

FROM-FEATURE
Fires on the owning TaskBoard before a task is displayed in an editor.

Returning false or a promise that resolves to false stops the default editing UI from being shown.
```
taskBoard.on({
    beforeTaskEdit({ taskRecord }) {
        return await userCanEdit(taskRecord);
    }
}
```
Added by the TaskEdit feature, only available when that feature is enabled.
beforeTaskEditShow

FROM-FEATURE
Fires on the owning TaskBoard when the editor for a task is available, but before it is populated with data and shown. Allows manipulating fields etc.
```
taskBoard.on({
    beforeTaskEditShow({ taskRecord, editor }) {
        editor.title = `Editing "${taskRecord.name}"`;
    }
}
```
Added by the TaskEdit feature, only available when that feature is enabled.
taskEditHide

internal

FROM-FEATURE

Fires on the owning TaskBoard when the editor for a task is closed. Consumed internally by FilterBar to restore highlighting of matches.

Added by the TaskEdit feature, only available when that feature is enabled.
taskMenuBeforeShow

PREVENTABLE

FROM-FEATURE

This event fires on the owning TaskBoard before the context menu is shown for a task. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

Added by the TaskMenu feature, only available when that feature is enabled.
taskMenuShow

FROM-FEATURE

This event fires on the owning TaskBoard after the context menu is shown for a task.

Added by the TaskMenu feature, only available when that feature is enabled.
taskMenuItem

FROM-FEATURE

This event fires on the owning TaskBoard when an item is selected in the task context menu.

Added by the TaskMenu feature, only available when that feature is enabled.
taskMenuToggleItem

FROM-FEATURE

This event fires on the owning TaskBoard when a check item is toggled in the task context menu.

Added by the TaskMenu feature, only available when that feature is enabled.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onBeforeColumnDrag

PREVENTABLE

FROM-FEATURE

Called on the owning TaskBoard before column dragging starts. Return false to prevent the action

Added by the ColumnDrag feature, only available when that feature is enabled.
onColumnDragStart

FROM-FEATURE

Called on the owning TaskBoard when column dragging starts

Added by the ColumnDrag feature, only available when that feature is enabled.
onColumnDrag

FROM-FEATURE
Called on the owning TaskBoard when a column is dragged, if the drag leads to a change compared to the last columnDrag event.

Returning false from a listener will flag the drag as invalid (by default turning the drop indicator red)
```
const taskBoard = new TaskBoard({
   listeners : {
       // Do not allow moving beyond last column
       columnDrag({ columnRecord, beforeColumn }) {
          return beforeColumn === null;
       }
   }
});
```
Added by the ColumnDrag feature, only available when that feature is enabled.
onColumnDrop

FROM-FEATURE

Called on the owning TaskBoard when a column is successfully dropped (after the drop transition has finished)

Added by the ColumnDrag feature, only available when that feature is enabled.
onColumnDragEnd

FROM-FEATURE

Called on the owning TaskBoard when a previously started drag operation ends, no matter the outcome of it (whether valid, invalid or aborted)

Added by the ColumnDrag feature, only available when that feature is enabled.

onBeforeColumnDrop

ASYNC

PREVENTABLE

FROM-FEATURE

Called on the owning TaskBoard when dropping a column, before the operation completes. Handles async listeners, returning false from one will abort the operation

const taskBoard = new TaskBoard({
   listeners : {
       async beforeColumnDrop({ columnRecord, beforeColumn }) {
           // Show confirmation dialog
           const result = await MessageDialog.confirm({
               title   : 'Verify drop',
               message : `Please confirm moving ${columnRecord.text} before ${beforeColumn.text}?`
           });

           // Returning false will abort the drop (if user pressed Cancel)
           return result === MessageDialog.okButton;
       }
   }
});

Added by the ColumnDrag feature, only available when that feature is enabled.

onColumnDragAbort

FROM-FEATURE

Called on the owning TaskBoard when a drag operation is aborted (invalid drop or aborted using ESC)

Added by the ColumnDrag feature, only available when that feature is enabled.
onColumnFilterShow

FROM-FEATURE

Called when the column filter is displayed.

Added by the ColumnFilter feature, only available when that feature is enabled.
onColumnFilterHide

FROM-FEATURE

Called when the column filter is hidden.

Added by the ColumnFilter feature, only available when that feature is enabled.
onColumnFilterToggle

FROM-FEATURE

Called when the column filter visibility is toggled.

Added by the ColumnFilter feature, only available when that feature is enabled.
onColumnHeaderMenuBeforeShow

PREVENTABLE

FROM-FEATURE

This handler is called on the owning TaskBoard before the menu is shown for a column header. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

Added by the ColumnHeaderMenu feature, only available when that feature is enabled.
onCellMenuShow

FROM-FEATURE

This handler is called on the owning TaskBoard after the context menu is shown for a column header.

Added by the ColumnHeaderMenu feature, only available when that feature is enabled.
onCellMenuItem

FROM-FEATURE

This handler is called on the owning TaskBoard when an item is selected in the column header menu.

Added by the ColumnHeaderMenu feature, only available when that feature is enabled.
onCellMenuToggleItem

FROM-FEATURE

This handler is called on the owning TaskBoard when a check item is toggled in the column header menu.

Added by the ColumnHeaderMenu feature, only available when that feature is enabled.
onBeforeColumnResize

PREVENTABLE

FROM-FEATURE

This event is called prior to starting a column resize gesture. The resize is canceled if a listener returns false.

Added by the ColumnResize feature, only available when that feature is enabled.
onColumnResizeStart

FROM-FEATURE

This event is called when a column resize gesture starts.

Added by the ColumnResize feature, only available when that feature is enabled.
onColumnResize

FROM-FEATURE

This event is called after a resize gesture is completed.

Added by the ColumnResize feature, only available when that feature is enabled.

onBeforeSimpleTaskEdit

PREVENTABLE

FROM-FEATURE

Called on the owning TaskBoard before displaying an inline editor. Returning false stops the editor from being shown.

const taskBoard = new TaskBoard({
   listeners : {
       beforeSimpleTaskEdit({ taskRecord }) {
           // Some condition for which editing should be blocked...
           if (taskRecord.disallowed) {
               return false;
           }
       }
   }
});

Added by the SimpleTaskEdit feature, only available when that feature is enabled.

onSimpleTaskEditComplete

PREVENTABLE

FROM-FEATURE
Called on the owning TaskBoard when inline editing of a field has successfully finished.
```
const taskBoard = new TaskBoard({
   listeners : {
       simpleTaskEditComplete({ taskRecord, field }) {
           Toast.show(`Finished editing ${field} of ${taskRecord.name}`);
       }
   }
});
```
Added by the SimpleTaskEdit feature, only available when that feature is enabled.
onSimpleTaskEditCancel

PREVENTABLE

FROM-FEATURE
Called on the owning TaskBoard when inline editing of a field is cancelled (by pressing ESC).
```
const taskBoard = new TaskBoard({
   listeners : {
       simpleTaskEditCancel({ taskRecord }) {
           Toast.show(`Aborted editing of ${taskRecord.name}`);
       }
   }
});
```
Added by the SimpleTaskEdit feature, only available when that feature is enabled.
onBeforeTaskDrag

PREVENTABLE

FROM-FEATURE

Called on the owning TaskBoard before task dragging starts. Return false to prevent the action

Added by the TaskDrag feature, only available when that feature is enabled.
onTaskDragStart

FROM-FEATURE

Called on the owning TaskBoard when task dragging starts

Added by the TaskDrag feature, only available when that feature is enabled.
onTaskDrag

FROM-FEATURE

Called on the owning TaskBoard when tasks are dragged, if the drag leads to any changes compared to the last taskDrag event (moved to a new column or changed order within a column).

Returning false from a listener will flag the drag as invalid (by default turning the drop indicator red)

Added by the TaskDrag feature, only available when that feature is enabled.

onBeforeTaskDrop

ASYNC

PREVENTABLE

FROM-FEATURE

Called on the owning TaskBoard when tasks are dropped, before the operation completes. Handles async listeners, returning false from one will abort the operation

const taskBoard = new TaskBoard({
   listeners : {
       async beforeTaskDrop({ taskRecords, targetColumn }) {
           // Show confirmation dialog
           const result = await MessageDialog.confirm({
               title   : 'Verify drop',
               message : `Please confirm moving ${taskRecords.map(t => `"${t.name}"`).join(', ')} to ${targetColumn.text}?`
           });

           // Returning false will abort the drop (if user pressed Cancel)
           return result === MessageDialog.okButton;
       }
   }
});

Added by the TaskDrag feature, only available when that feature is enabled.

onTaskDrop

FROM-FEATURE

Called on the owning TaskBoard when tasks are successfully dropped (after the drop transition has finished)

Added by the TaskDrag feature, only available when that feature is enabled.
onTaskDragEnd

FROM-FEATURE

Called on the owning TaskBoard when a previously started drag operation ends, no matter the outcome of it (whether valid, invalid or aborted)

Added by the TaskDrag feature, only available when that feature is enabled.
onTaskDragAbort

FROM-FEATURE

Called on the owning TaskBoard when a drag operation is aborted (invalid drop or aborted using ESC)

Added by the TaskDrag feature, only available when that feature is enabled.
onBeforeTaskEdit

ASYNC

PREVENTABLE

FROM-FEATURE
Called on the owning TaskBoard before a task is displayed in an editor.

Returning false or a promise that resolves to false stops the default editing UI from being shown.
```
taskBoard.on({
    beforeTaskEdit({ taskRecord }) {
        return await userCanEdit(taskRecord);
    }
}
```
Added by the TaskEdit feature, only available when that feature is enabled.
onBeforeTaskEditShow

FROM-FEATURE
Called on the owning TaskBoard when the editor for a task is available, but before it is populated with data and shown. Allows manipulating fields etc.
```
taskBoard.on({
    beforeTaskEditShow({ taskRecord, editor }) {
        editor.title = `Editing "${taskRecord.name}"`;
    }
}
```
Added by the TaskEdit feature, only available when that feature is enabled.
onTaskEditHide

internal

FROM-FEATURE

Called on the owning TaskBoard when the editor for a task is closed. Consumed internally by FilterBar to restore highlighting of matches.

Added by the TaskEdit feature, only available when that feature is enabled.
onTaskMenuBeforeShow

PREVENTABLE

FROM-FEATURE

This handler is called on the owning TaskBoard before the context menu is shown for a task. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

Added by the TaskMenu feature, only available when that feature is enabled.
onTaskMenuShow

FROM-FEATURE

This handler is called on the owning TaskBoard after the context menu is shown for a task.

Added by the TaskMenu feature, only available when that feature is enabled.
onTaskMenuItem

FROM-FEATURE

This handler is called on the owning TaskBoard when an item is selected in the task context menu.

Added by the TaskMenu feature, only available when that feature is enabled.
onTaskMenuToggleItem

FROM-FEATURE

This handler is called on the owning TaskBoard when a check item is toggled in the task context menu.

Added by the TaskMenu feature, only available when that feature is enabled.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-task-board-background	Board background
--b-task-board-body-padding	Board body padding (requires a unit for calc to work as intended)
--b-task-board-card-background	Card background
--b-task-board-card-body-color	Card body text color
--b-task-board-card-body-gap	Gap between items in card body
--b-task-board-card-body-padding	Card body padding
--b-task-board-card-border	Card border
--b-task-board-card-border-bottom	Card border bottom
--b-task-board-card-border-bottom-radius	Card border bottom radius
--b-task-board-card-border-inline-end	Card border inline end
--b-task-board-card-border-inline-start	Card border inline start
--b-task-board-card-border-top	Card border top
--b-task-board-card-border-top-radius	Card border top radius
--b-task-board-card-box-shadow	Card box shadow
--b-task-board-card-footer-color	Card footer text color
--b-task-board-card-footer-font-size	Card footer font size
--b-task-board-card-footer-gap	Gap between items in card footer
--b-task-board-card-footer-padding	Card footer padding
--b-task-board-card-gap	Gap between cards
--b-task-board-card-header-background	Card header background
--b-task-board-card-header-color	Card header color
--b-task-board-card-header-font-size	Card header font size
--b-task-board-card-header-font-weight	Card header font weight
--b-task-board-card-header-gap	Gap between items in card header
--b-task-board-card-header-padding	Card header padding
--b-task-board-card-highlight-color	Color used for highlighting scrolled to card
--b-task-board-card-inline-height	Card height, when displaying more than one card per row
--b-task-board-card-inline-large-height	Card height, when displaying more than one card per row and there are only two cards per row
--b-task-board-card-padding	Card padding
--b-task-board-color	Default text color
--b-task-board-column-background	Column background (by default also applies to the column header)
--b-task-board-column-border	Column border
--b-task-board-column-border-radius	Column border radius
--b-task-board-column-box-shadow	Column box shadow
--b-task-board-column-collapse-duration	Transition duration when collapsing/expanding columns
--b-task-board-column-count-background	Column task count badge background
--b-task-board-column-count-color	Column task count badge color
--b-task-board-column-count-font-size	Column task count badge font size
--b-task-board-column-gap	Gap between columns
--b-task-board-column-header-background	Column header background (defaults to using column's background)
--b-task-board-column-header-border-bottom	Column header bottom border
--b-task-board-column-header-border-radius	Column header border radius
--b-task-board-column-header-border-top	Column header top border
--b-task-board-column-header-box-shadow	Column header box shadow
--b-task-board-column-header-collapsed-title-top	Collapsed column's title's top offset
--b-task-board-column-header-color	Column header text color
--b-task-board-column-header-font-size	Column header font size
--b-task-board-column-header-font-weight	Column header font weight
--b-task-board-column-header-gap	Column header gap
--b-task-board-column-header-icon-color	Column header icon color
--b-task-board-column-header-padding	Column header padding
--b-task-board-column-header-sticky-height	Height of sticky headers
--b-task-board-column-header-text-align	Column header text alignment
--b-task-board-column-header-text-transform	Column header text transform (defaults to using header text transform)
--b-task-board-column-headers-sticky-background	Column header background when using sticky headers
--b-task-board-column-min-width	Column min width
--b-task-board-column-padding	Column padding
--b-task-board-column-separator-border	Column separator border (between columns)
--b-task-board-font-size	Default font size
--b-task-board-gap	Default gap (used as the default in multiple places)
--b-task-board-header-text-transform	Default header text transformed (applied to column & swimlane headers)
--b-task-board-swimlane-background	Swimlane body background
--b-task-board-swimlane-header-background	Swimlane header background
--b-task-board-swimlane-header-border-bottom	Swimlane header border bottom
--b-task-board-swimlane-header-border-radius	Swimlane header border radius
--b-task-board-swimlane-header-border-top	Swimlane header border top
--b-task-board-swimlane-header-box-shadow	Swimlane header box shadow
--b-task-board-swimlane-header-color	Swimlane header text color
--b-task-board-swimlane-header-font-size	Swimlane header font size
--b-task-board-swimlane-header-icon-color	Swimlane header icon color
--b-task-board-swimlane-header-padding	Swimlane header padding
--b-task-board-swimlane-header-text-transform	Swimlane header text transform (defaults to using header text transform)
Focused
--b-task-board-card-focus-background	Focused card's background
--b-task-board-card-focus-outline	Card focus outline
--b-task-board-card-focus-outline-offset	Card focus outline offset
Hovered
--b-task-board-card-hover-background	Hovered card's background
--b-task-board-card-hover-box-shadow	Hovered card's box shadow
--b-task-board-card-hover-transform	Hovered card's transform
Read-only
--b-task-board-card-readonly-background	Read-only card's background
--b-task-board-card-readonly-color	Read-only card's text color
Selected
--b-task-board-card-selected-animation	Selected card's animation
--b-task-board-card-selected-background	Selected card's background
--b-task-board-card-selected-box-shadow	Selected card's box shadow
--b-task-board-card-selected-outline	Selected card's outline
--b-task-board-card-selected-transform	Selected card's transform
--b-task-board-card-unselected-box-shadow	Unselected card's box shadow (when another card is selected)
--b-task-board-card-unselected-hover-opacity	Unselected card's hover opacity (when another card is selected)
--b-task-board-card-unselected-opacity	Unselected card's opacity (when another card is selected)

Source path

TaskBoard/view/TaskBoardBase.js

TaskBoardBase
Widget

Configs

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Properties

Functions

Events

Event handlers

CSS variables

Source path

Inheritance tree5

Mixins24

Features17

Contents

TaskBoardBase Widget

Configs

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Properties

Functions

Events

Event handlers

CSS variables

Source path

Inheritance tree5

Mixins24

Features17

Contents

TaskBoardBase
Widget