Templates in Kanban, JavaScript Programming Example of Templates in Kanban

Templates in Kanban, JavaScript Programming Example of Templates in Kanban

If you want to place different HTML-elements onto cards of the Kanban Board, check out the coding example below. Don't hesitate to use free programming samples by Webix to create custom business web applications.

JS Code

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
  });
});

HTML Code

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

How to place various HTML-elements onto cards of the Webix Kanban Board?