Upgrade guides for TaskBoard v6.0.0+
TaskBoard v6.0.0
BryntumProjectModel framework wrapper replaced
BryntumProjectModel framework wrapper was replaced by BryntumTaskBoardProjectModel in v5.6.6, and is no longer available.
Angular
app.component.ts:
import { BryntumTaskBoardProjectModelComponent } from '@bryntum/taskboard-angular';
app.component.html:
<bryntum-taskboard-project-model
#project
// Project properties
/>
React
App.tsx:
import { BryntumTaskBoardProjectModelComponent } from '@bryntum/taskboard-react';
...
function App() {
return (
<>
<BryntumTaskBoardProjectModel
ref={project}
// Project properties
/>
</>
);
}
Vue
App.vue:
<template>
<bryntum-taskboard-project-model
ref="project"
// Project properties
/>
</template>
<script>
import { BryntumTaskBoardProjectModel } from '@bryntum/taskboard-vue-3';
export default {
components : {
BryntumTaskBoardProjectModel
}
};
</script>
New location for Core.util.helper.Point class
The Core.util.helper.Point class was moved in v5.6.0 to solve circular module dependencies. It is now a named (Point) export of the Core.util.helper.Rectangle module.
Changes are required if you are directly importing the class from sources:
Old code:
import Point from 'path-to-lib/Core/helper/util/Point.js';
New code:
import { Point } from 'path-to-lib/Core/helper/util/Rectangle.js';
Note: No changes required for importing from module or umd bundles.
ScrollOptions renamed to BryntumScrollOptions
The name changed in v5.6.0 to avoid confusion with native ScrollOption. If you use TypeScript in your application rename imported type ScrollOptions to BryntumScrollOptions.
Old code:
import { ScrollOptions } from '@bryntum/taskboard'
New code:
import { BryntumScrollOptions } from '@bryntum/taskboard'
Angular View Engine wrappers for Angular 11 and older
A new @bryntum/taskboard-angular-view package designed to work with Angular 11 and older versions, which use the View Engine for rendering, was added in v5.3.3. If you are using one of the legacy Angular versions, please follow these steps to use the package:
Install the package using npm:
npm install @bryntum/taskboard-angular-view@5.3.3
Import the component in your Angular application:
import { BryntumTaskBoardComponent } from '@bryntum/taskboard-angular-view';
Do not forget to remove previously used @bryntum/taskboard-angular package which requires Angular 12 or newer version.
Please check Angular integration guide for additional information.
Button, Checkbox, Radio, SlideToggle & Toast CSS changes
The CSS for these widgets was changed in v.5.3.0 - instead of letting SASS generate CSS for the built-in color variations it now uses internal CSS variables.
The upside of this change is that it removes thousands of lines of CSS, while also making it easier for us to add more colors in the future.
We don't expect it to affect the styling of existing applications much, but if your application use custom styling for these widgets you might need to adjust the specificity of some selectors.
With the change, the following SCSS variables are no longer used and was removed:
$button-hover-lightness$button-pressed-lightness$button-active-lightness$button-pressed-hover-lightness$button-active-hover-lightness$button-pressed-active-lightness$button-pressed-active-hover-lightness$checkbox-checked-box-color$checkbox-checked-box-background-color$checkbox-checked-box-border-color$radio-background-color$radio-border-color$radio-dot-color$radio-checked-dot-color$radio-checked-border-color$radio-checked-background-color$radio-disabled-background-color$radio-disabled-border-color
There is not a 1-1 mapping to anything in the updated CSS, therefor if you are using any of these SCSS variables we recommend checking the corresponding CSS files to figure out what to use instead (see button.scss, checkbox.scss, radio.scss). Or post a question on the forum.
Localization update
LocaleManager function removals
LocaleManager.registerLocale, which was deprecated in v5.3.0, has been removed. LocaleHelper.publishLocale should be used instead.
Old code:
LocaleManager.registerLocale('Es', {
desc : 'Spanish', locale : {
localeName : 'Es',
localeDesc : 'Spanish',
locale : {
/* localization */
}
}
});
New code:
LocaleHelper.publishLocale({
localeName : 'Es',
localeDesc : 'Spanish',
localeCode : 'es',
/* localization */
});
LocaleManager.extendLocale, which was deprecated in v5.3.0, has been removed. LocaleManager.applyLocale should be used instead.
Old code:
LocaleManager.extendLocale('Es', {
desc : 'Spanish', locale : {
locale : {
/* localization */
}
}
});
New code:
LocaleManager.applyLocale({
localeName : 'Es',
localeDesc : 'Spanish',
localeCode : 'es',
/* localization */
});
Check our localization guide for the details.
Responsive mixin breakpoints config removed
The breakpoints config was deprecated in v5.1.0 and has now been removed. This config has been superseded by the responsive config.
Old code:
class ResponsiveButton extends Button.mixin(Responsive) {}
const button = new ResponsiveButton({
breakpoints : {
width : {
// When width drops to 50 or below, hide text and show icon
50 : {
name : 'small',
configs : { text : null, icon : 'b-fa b-fa-plus' }
},
// When width is above 50, hide icon and show text
'*' : {
name : 'large',
configs : { text : 'Add', icon : null }
}
}
}
});
New code:
class ResponsiveButton extends Button.mixin(Responsive) {}
const button = new ResponsiveButton({
responsive : {
// When width drops to 50 or below, hide text and show icon
small : {
when : 50,
text : null,
icon : 'b-fa b-fa-plus'
},
// When width is above 50, hide icon and show text
'*' : {
text : 'Add',
icon : null
}
}
});
Responsive mixin responsiveWidthChange and responsiveHeightChange events removed
These events were deprecated in v5.2.0 and have now been removed. They were replaced by the responsiveStateChange event.
Old code:
class ResponsiveButton extends Button.mixin(Responsive) {}
const button = new ResponsiveButton({
breakpoints : {
width : {
// When width drops to 50 or below, hide text and show icon
50 : {
name : 'small',
configs : { text : null, icon : 'b-fa b-fa-plus' }
},
// When width is above 50, hide icon and show text
'*' : {
name : 'large',
configs : { text : 'Add', icon : null }
}
}
},
listeners : {
responsiveWidthChange({ source, breakpoint, prevBreakpoint }) {
// ...
}
}
});
New code:
class ResponsiveButton extends Button.mixin(Responsive) {}
const button = new ResponsiveButton({
responsive : {
// When width drops to 50 or below, hide text and show icon
small : {
when : 50,
text : null,
icon : 'b-fa b-fa-plus'
},
// When width is above 50, hide icon and show text
'*' : {
text : 'Add',
icon : null
}
},
listeners : {
responsiveStateChange({ source, state, oldState }) {
// ...
}
}
});
New module bundle for Angular
Bryntum TaskBoard is since v5.1.0 delivered with a new ES Module bundle without WebComponents. This was done to avoid conflicts with Angular which also uses WebComponents for applications.
Angular wrappers use taskboard.module.js bundle in favor of removed taskboard.lite.umd.js one.
Your Angular applications should be upgraded to use the new taskboard.module.js bundle which is set as main for @bryntum/taskboard NPM package.
Replace all application imports from Bryntum packages as shown below:
Old code:
import { TaskBoard } from '@bryntum/taskboard/taskboard.lite.umd.js';
New code:
import { TaskBoard } from '@bryntum/taskboard';
New module bundle with WebComponents
Bryntum TaskBoard is since v5.1.0 delivered with a new taskboard.wc.module.js ES Module bundle with WebComponents.
Your applications which use WebComponents and modules bundle should be upgraded to import from new taskboard.wc.module.js instead of taskboard.module.js.
Validating backend responses by default
The validateResponse flag on ProjectModel was changed to default to true in v5.0.3 When enabled, it validates responses from the backend and outputs a message on console if the format isn't valid. This is helpful during the development phase, but can be turned off in production:
const taskBoard = new TaskBoard({
project : {
// Turn response validation off
validateResponse : false,
...
}
});
New Vue wrapper config option relayStoreEvents
This option was introduced in v5.0.3 to allow relaying of store events to the TaskBoard instance. It defaults to false (no events relayed) which changes the default behavior so if your application relies on relayed events, configure it as true.
Example:
<bryntum-task-board
:relayStoreEvents="true"
>
The config option applies to both Vue 2 and Vue 3.
Store now defaults to use raw data for remotely loaded data
The useRawData setting on Store is now enabled by default when data is loaded remotely using an AjaxStore or a CrudManager (the ProjectModel), but with all sub-settings disabled. This will boost load performance slightly, by not cloning the incoming data objects.
If you want to restore the previous behavior, you can set useRawData : false on the store:
const taskBoard = new TaskBoard({
project : {
taskStore : {
useRawData : false
}
}
});
Or for all project stores:
const taskBoard = new TaskBoard({
project : {
useRawData : false
}
});
TaskBoard v6.2.0
AjaxHelper.fetch credentials change
The AjaxHelper.fetch() utility function is used by AjaxStore and ProjectModel to fetch data from the server. Previously it by default used the credentials: 'include' option, which meant that cookies were always sent with the request. To better match the default behavior of the native fetch API, our default value has been removed (thus it instead uses 'same-origin', which is the native default). If you want to restore the old behavior, you can do so using AjaxHelper.DEFAULT_FETCH_OPTIONS:
Old code
new ProjectModel({
loadUrl : 'load.php',
autoLoad : true
})
New code
AjaxHelper.DEFAULT_FETCH_OPTIONS = { credentials : 'include' };
new ProjectModel({
loadUrl : 'load.php',
autoLoad : true
})
Task selection performance optimization
The task selection code has been optimized to directly add/remove the b-selected CSS class from card elements, instead of refreshing the UI and calling any taskRenderers in the process. If your task renderer has conditionals that depend on the task being selected, you will have to force a refresh when selection changes to restore the old behavior.
Old code
const taskBoard = new TaskBoard({
taskRenderer({ taskRecord, cardConfig }) {
if (taskBoard.isSelected(taskRecord)) {
cardConfig.children.push(...);
}
}
});
New code
const taskBoard = new TaskBoard({
taskRenderer({ taskRecord, cardConfig }) {
if (taskBoard.isSelected(taskRecord)) {
cardConfig.children.push(...);
}
},
listeners : {
// Force a refresh when selection changes
selectionChange({ selected }) {
taskBoard.refresh();
}
}
});
TaskBoard v6.3.0
Naming simplification for project data properties
The ProjectModel can consume inline data for the different sorts of entities it supports: tasks, resources and assignments.
In the past, the configs and properties related to this has been named according to [entityName]Data: tasks, resourcesData and assignmentsData.
This has been simplified to only [entityName]: tasks, resources and assignments.
The old properties are still available but are marked as deprecated and will be removed in a future release. We recommend you update the names used in your code to avoid breakage later.
Old code
const taskBoard = new TaskBoard({
project : {
eventsData : [ ... ],
resourcesData : [ ... ],
assignmentsData : [ ... ]
}
})
New code
const taskBoard = new TaskBoard({
project : {
events : [ ... ],
resources : [ ... ],
assignments : [ ... ]
}
})
This change also applies to APIs that get or set the data on the ProjectModel, such as inlineData, and json. For example:
Old code
const { inlineData } = taskBoard.project;
// inlineData would previously have `eventsData`, `resourcesData` etc. properties
New code
const { inlineData } = taskBoard.project;
// inlineData now has `events`, `resources` etc. properties.
// Note that the old properties are still included too
TaskBoard columns use their own chained store
This change makes it possible to apply filters and sorters to each column separately without affecting the data shown in other columns or the project as a whole. However, it also means that filters applied to the TaskBoard project's TaskStore will not automatically affect the data shown in the columns. When a general task filter is needed, e.g. by adding a TaskFilterField widget, the TaskBoard needs to be configured with chainFilters : true to propagate the master filters down to the column task stores.
Old code
new TaskBoard({
features : {
taskFilterField : true
}
});
New code
new TaskBoard({
features : {
taskFilterField : true
},
chainFilters : true
});