Creating Kanban Board on a Page

In order to start using Kanban Board, you need to initialize it on a page. It requires 2 simple steps:

1. Include the necessary JS and CSS files into an HTML file.
2. Call the object constructor.

There are 4 files that you need to include:

<!-- js files -->
<script src="codebase/webix.js" type="text/javascript"></script>
<script src="codebase/kanban/kanban.js" type="text/javascript"></script>
<!-- css files -->
<link rel="stylesheet" href="codebase/webix.css" 
    type="text/css" charset="utf-8">
<link rel="stylesheet" href="codebase/kanban/kanban.css" 
    type="text/css" charset="utf-8">

Use the following code to initialize Webix Kanban Board:

/* webix.ready() function ensures 
that the code will be executed when the page is loaded
*/
webix.ready(function(){
    // object constructor
    webix.ui({
        view:"kanban", 
        // the structure of columns on the board
        cols:[
            { header:"Backlog",
                body:{ view:"kanbanlist", status:"new" }},
            { header:"In Progress",
                body:{ view:"kanbanlist", status:"work" }},
            { header:"Testing",
                body:{ view:"kanbanlist", status:"test" }},
            { header:"Done",
                body:{ view:"kanbanlist", status:"done" }}
        ],
        // url to the file with data collection
        url: "/data/tasks"
    });
});

Related sample:  Basic Init of Kanban Board

After downloading Kanban there are 3 ways to run package samples locally. The simplest one is to navigate to the root directory and open the samples folder. Find the desired file and double-click it. The sample will be opened in a new browser tab.

Running samples on a local server

You can run package samples on a local server (e.g Apache). Set the Kanban folder as the root directory of the local server and launch the server. In general a local server runs at localhost.

Running samples on a development server

To be able to modify samples and see the corresponding changes you should run them on a development server. Go to the Kanban root directory, install the necessary dependencies and start the server as:

// navigate to the root directory
cd kanban
 
// install dependencies
yarn install //or npm install
 
// start dev server
yarn server //or npm run server