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.

Included files

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">

Initialization

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

Running Package Samples Locally

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
Back to top
If you have not checked yet, be sure to visit site of our main product Webix mvc library and page of kanban board tool product.