v7.3.0

Upgrade guides for TaskBoard v5.0.0+

TaskBoard v5.0.0

React wrappers now use module bundle

The React wrappers previously used the UMD bundle to import required classes:

Old code:

import { EventModel } from '@bryntum/taskboard/taskboard.umd.js';

UMD bundle is not used anymore in the wrappers so the import line in the above code needs to be changed:

New code:

import { EventModel } from '@bryntum/taskboard';

Imports from @bryntum/taskboard-react remain same.

TaskDrag no longer reorders tasks in the store by default

On drop the feature change a task's column, swimlane (if used) and weight. Those are enough to persist a tasks position on the board in most scenarios.

Previously it would also move the task record adjacent to the task it was dropped before in the TaskStore (changing its index etc). That behaviour is not desired when sharing data with other products, for example it would make rows unexpectedly fly around in a Grid when you rearrange tasks. For this reason the old behaviour was made opt in, you can re-enable it by configuring the TaskDrag feature with reorderTaskRecords: true.

Old code:

const taskBoard = new TaskBoard({
    features : {
        // Used to be the default behaviour
        taskDrag: true
    }
})

New code:

const taskBoard = new TaskBoard({
    features : {
        // Now you have to opt in
        taskDrag: {
            reorderTaskRecords : true
        }
    }
})
Note that if you are sorting tasks by some other criteria than `weight` you might also want to opt in as described above to ensure tasks stay where they are dropped.

TaskBoard v5.0.3

Validating backend responses by default

The validateResponse flag on ProjectModel has been changed to default to true. 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 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.

TaskBoard v5.1.0

Responsive Mixin breakpoints Config is Deprecated

The breakpoints config was used to dynamically calculate config properties based on the widget's size. 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 are Deprecated

Along with the deprecation of the associated breakpoints config, these events have been replaced by the new 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 now delivered with 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 now delivered with 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.

TaskBoard v5.3.0

Button, Checkbox, Radio, SlideToggle & Toast CSS changes

The CSS for these widgets was changed - 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.registerLocale has been deprecated. 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 has been deprecated. 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.

TaskBoard v5.3.3

Angular View Engine wrappers

New @bryntum/taskboard-angular-view is designed to work with Angular 11 and older versions, which use the View Engine for rendering. 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/taskoard-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.

TaskBoard v5.6.0

New location for Core.util.helper.Point class

The Core.util.helper.Point class has been moved 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 has been renamed to BryntumScrollOptions

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'

BryntumProjectModel component has been renamed to BryntumTaskBoardProjectModel

The non-visual framework component representing a ProjectModel has been renamed to BryntumTaskBoardProjectModel to match component name from new thin bundles.

Update imported class name and html tag accordingly.

Note: The old BryntumProjectModel component is still available too, it will be removed in version 6.0.0.

Angular

app.component.ts

import { BryntumTaskBoardProjectModelComponent } from '@bryntum/taskboard-angular';

app.component.html:

<bryntum-task-board-project-model
...
/>

React

App.ts:

import { BryntumTaskBoardProjectModel } from '@bryntum/taskboard-react';

...

return (
     <>
         <BryntumTaskBoardProjectModel
             ...
         />
     </>
 );
}

Vue

App.vue:

<template>
    <div>
        <bryntum-task-board-project-model
            ...
        />
    </div>
</template>

...

import { BryntumTaskBoardProjectModel } from '@bryntum/taskboard-vue-3';

TaskBoard v5.6.6

[DEPRECATED] BryntumProjectModel framework wrapper is deprecated

BryntumProjectModel framework wrapper will be removed starting from 6.0.0 version. Use BryntumTaskBoardProjectModel instead.

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>

Contents