Mats Bryntse
31 March 2014

The New Kanban Task Board Component

We recently announced the initial release of our new Task Board UI component. Kanban and Scrum are two popular techniques […]

We recently announced the initial release of our new Task Board UI component. Kanban and Scrum are two popular techniques for managing the software delivery process in a company, and both these techniques make use of task boards.

taskboard_hero

A task board typically contains the tasks that members of a team are currently working on, and the board can look a bit different depending on the company process. Our new component comes pre-configured with 4 simple ‘swim lanes’ for the basic task states: “Not Started”, “In Progress”, “Test” and “Done”. Of course it can be configured to use any task states, and show any number of swim lanes in any layout. This is thanks to the powerful Ext JS layout system which makes this really easy.

Easy Implementation

The TaskBoard is built using basic standard Ext JS classes, such as DataView, Panel, Store so if you are familiar with these classes, implementing the TaskBoard will be a downhill walk in a sunny park. Here is a sample of a very basic implementation:

var resourceStore = new Kanban.data.ResourceStore({
    data    : [
        { Id : 1, Name : 'Dave' }
    ]
});

var taskStore = new Kanban.data.TaskStore({
    data    : [
        { Id : 1, Name : 'Dig hole', State : 'NotStarted'}
    ]
});

var taskBoard = new Kanban.view.TaskBoard({
    resourceStore : resourceStore,
    taskStore     : taskStore
});

var vp = new Ext.Viewport({
    items       : taskBoard,
    layout      : 'fit'
});
Swimlane Layouts

You can configure the board to use any layout, and even split the swimlanes both vertically and horizontally. Here are some samples to give you an idea of what you can do:

layout1

layout2

layout3

Drag drop validation

After you have defined the different states that your tasks can be in, you should also define how the tasks can be moved around in the board. This is very easy to define, simply override the isValidTransition method of the Task model class. The default implementation looks like this:


    /**
     * @method isValidTransition
     *
     * Override this method to define which states are valid based on the current task state. If you want to allow all,
     * simply create a method which always returns true.
     *
     * @param {String} toState The new state of this task
     * @return {Boolean} true if valid
     */
    isValidTransition : function (toState) {

        switch (this.getState()) {
            case "NotStarted":
                return toState == "InProgress";
            case "InProgress":
                return toState != "Done";
            case "Test":
                return toState != "NotStarted";
            case "Done":
                return toState == "Test" || toState == "InProgress";

            default:
                return true;
        }
    }
Test suite

As with all our other products, the TaskBoard ships with a Siesta test suite covering the various APIs and core functionality. You can run this yourself easily, by opening the /tests folder of the SDK in a web browser.

Screen Shot 2014-03-31 at 17.34.33

Give it a spin…

You can try the new TaskBoard right now, just click here. As always, we really value your feedback so please leave a comment or send us an email with your thoughts.

Additional links

Mats Bryntse

Kanban Task Board Product updates