Tabview, JavaScript Programming Example of Tabview in Kanban

Tabview, JavaScript Programming Example of Tabview in Kanban

Tabview helps save a lot of space in your Kanban. Thanks to this, it's possible to have more tasks always in your sight. Check out our coding sample showing how you can add this element to your Kanban board.

JS Code

webix.ready(function(){
  webix.ui({
    view:"kanban",
    id: "board",
    type: "space",
    cols:[
      { header:"Backlog",
       body:{ view:"kanbanlist", status:"new", type: "users" }},
      { header:"In progress",
       body:{
         view: "tabview",
         tabbar: {
           topOffset: 2
         },
         cells: [
           {
             header:"Development",
             body:{
               view:"kanbanlist", type: "users", status:{ status: "work", team: 1 }
             }
           },
           {
             header:"Design",
             body:{
               view:"kanbanlist", type: "users", status:{ status: "work", team: 2 }
             }
           }
         ]
       }
      },
      { header:"Test",
       body:{ view:"kanbanlist", status:"test", type: "users" }},

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

HTML Code

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

Would you like to have a Kanban board with space-saving Tabview?