Complex status (Swimlanes) in Kanban, JavaScript Programming Example of 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

var imagePath = "https://docs.webix.com/samples/63_kanban/common/imgs/";
var users_set = [
	{id:1, value:"Rick Lopes", image:imagePath + "1.jpg"},
	{id:2, value:"Martin Farrell", image:imagePath + "2.jpg"},
	{id:3, value:"Douglass Moore", image:imagePath + "3.jpg"},
	{id:4, value:"Eric Doe", image:imagePath + "4.jpg"},
	{id:5, value:"Sophi Elliman", image:imagePath + "5.jpg"},
	{id:6, value:"Anna O'Neal"},
	{id:7, value:"Marcus Storm", image:imagePath + "7.jpg"},
	{id:8, value:"Nick Branson", image:imagePath + "8.jpg"},
	{id:9, value:"CC", image:imagePath + "9.jpg"}
];

webix.ready(function(){
  if (!webix.env.touch && webix.env.scrollSize)
    webix.CustomScroll.init();

  webix.ui({
    view:"kanban",
    css:"sections_with_bg",
    id: "board",
    cols:[
      { header:"Backlog",
       body:{ view:"kanbanlist", status:"new", name:"Backlog"}},
      { header:"In progress",
       body:{ margin:0, rows:[
         { template: "<span class='webix_icon mdi mdi-code-tags'></span> Development", height: 26, css: "progress_header"},
         { view:"kanbanlist", status:{ status: "work", team: 1 }, name:"Development"},
         { template: "<span class='webix_icon mdi mdi-pencil'></span> Design", height: 26, css: "progress_header"},
         { 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,
    tags: tags_set,
    users: users_set,
    colors: colors_set,
    editor:true
  });



});

HTML Code

<script src="//docs.webix.com/samples/63_kanban/common/data.js?v=6.1.2"></script>
<link rel="stylesheet" type="text/css" href="//docs.webix.com/samples/63_kanban/common/style.css?v=6.1.2">