Our flexible Kanban board for managing tasks with drag drop


Post by vladip »

Hi there!

I tried to use the trial version of TaskBoard v.4.3.8 in Salesforce LWC. However, I see an undefined error on the script loading in the Promise. It even does not reach the TaskBoard initialization function (createKanban()), but the JS module is loaded in the browser.

import {api, LightningElement} from 'lwc';
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import TASK_BOARD from '@salesforce/resourceUrl/BryntumTaskBoard';

export default class Kanban extends LightningElement {
    @api project;

_bryntumInitialized = false;

renderedCallback() {
    if (this._bryntumInitialized) {
        return;
    }
    this._bryntumInitialized = true;

    Promise.all([
        loadScript(this, TASK_BOARD + "/taskboard.lwc.module.js"),
        loadStyle(this, TASK_BOARD + "/taskboard.stockholm.css")
    ])
        .then(() => {
            this.createKanban();
        })
        .catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: "Error loading Bryntum TaskBoard",
                    message: error,
                    variant: "error"
                })
            );
        });
}

createKanban() {
    const kanban = new TaskBoard({
        appendTo: this.template.querySelector(".kanban-container"),
        columnField : 'status',

        columns : [
            'todo',
            'doing',
            'done'
        ],

        project : {
            tasksData : [
                { id : 1, name : 'Basic task', status : 'doing' },
                { id : 2, name : 'Advanced task', status : 'todo' }
            ]
        }
    });
}
}

Am I doing something wrong, or LWC is not supported yet?


Post by Maxim Gorkovsky »

Hello.
Releases 4.3.7 and 4.3.8 use globalThis object which is not supported by Locker Service. We've fixed this problem for the upcoming 4.3.9 and 5.0 releases.
You can either try 4.3.6 or edit the sources of lwc bundle to add this to the top before const { undefined } = globalThis;:

const globalThis = self; 

Post by vladip »

Thanks, Maxim! The workaround of adding globalThis definition helped.


Post Reply