Complex status (Swimlanes) in Kanban, JavaScript Programming Example of Complex status (Swimlanes) in Kanban

Home
Examples
Complex status (Swimlanes) in Kanban

JavaScript Programming Example of Complex status (Swimlanes) in Kanban

The coding sample below allows implementing swimlanes in Kanban Board. Take the opportunity to use free programming examples by Webix for your web development projects.

JS Code

webix.ready(function(){
    webix.CustomScroll.init();

  webix.ui({
    view:"kanban",
    id: "board",
    cols:[
      { header:"Backlog",
       body:{ view:"kanbanlist", status:"new", name:"Backlog"}},
      { header:"In progress",
       body:{ margin:0, padding:8, rows:[
         { view:"kanbanheader", label:"Development", type:"sub", icon:"mdi mdi-code-tags"},
         { view:"kanbanlist", status:{ status: "work", team: 1 }, name:"Development"},
         { view:"kanbanheader", label:"Design", type:"sub", icon:"mdi mdi-pencil"},
         { view:"kanbanlist", status:{ status: "work", team: 2 }, name:"Design"}
       ]}
      },

      { header:"Test",
       body:{ view:"kanbanlist", status:"test" }},

      { header:"Done",
       body:{ view:"kanbanlist", status:"done" }}
    ],
    data: team_task_set,
    editor:true
  });
});

HTML Code

<link rel="stylesheet" type="text/css" href="//cdn.webix.com/materialdesignicons/5.8.95/css/materialdesignicons.min.css">
<script>
  var team_task_set =[
	{ id:1, status:"new", text:"Test new authentification service", tags:"webix", comments:[{text:"Comment 1"}, {text:"Comment 2"}] },
	{ id:2, status:"work", team: 1, text:"Kanban tutorial", color:"red", tags:"webix,docs"  },
	{ id:3, status:"work", team: 2, text:"New skin", tags:"webix"},
	{ id:4, status:"work", team: 1, text:"SpreadSheet NodeJS", tags:"webix 3.0"  },
	{ id:5, status:"test", text:"Portlets view", tags:"webix 2.5"  }
  ];
</script>

Do you need to create swimlanes in Kanban Board?

Download Webix UI Framework

Study Kanban Documentation

Check out Kanban Widget Features