Templates in Kanban, JavaScript Programming Example of Templates in Kanban

webix.type(webix.ui.kanbanlist,{
  name: "cards",
  icons:[
    {icon: "mdi mdi-comment" , show: function(obj){ return !!obj.comments }, template:"#comments.length#"},
    {icon: "mdi mdi-pencil"}
  ],
  // avatar template
  templateAvatar: function(obj){
    if(obj.personId){
      var name = "";
      for(var i = 0; i < staff.length && !name; i++){
        if(staff[i].id == obj.personId){
          name = staff[i].name;
        }
      }
      return '<img class="avatar" src="https://docs.webix.com/samples/63_kanban/common/imgs/'+obj.personId+'.jpg" title="'+name+'" />';
    }
    return "<span class='webix_icon mdi mdi-account'></span>";
  },
  // template for item body
  // show item image and text
  templateBody: function(obj){
    var html = "";
    if(obj.image)
      html += "<img class='image' src='https://docs.webix.com/samples/63_kanban/common/imgs/attachments/"+obj.image+"'/>";
    html += "<div>"+obj.text+"</div>";
    return html;
  }
});

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

  webix.ui({
    view:"kanban",
    cols:[
      { header:"Backlog",
       body:{ view:"kanbanlist", status:"new", type: "cards" }},
      { header:"In Progress",
       body:{ view:"kanbanlist", status:"work", type: "cards"}
      },
      { header:"Testing",
       body:{ view:"kanbanlist", status:"test", type: "cards" }},
      { header:"Done",
       body:{ view:"kanbanlist", status:"done", type: "cards" }}
    ],
    data: base_task_set
  });
});