In order to start using Kanban Board you need to initialize it on the page. It requires 2 simple steps:
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",
type:"space",
//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: "tasks.php"
});
});
Related sample: Basic Init of Kanban Board
Back to top