Data Visualization in Kanban Board

You can represent various HTML-elements in the Kanban Board.

Data items of Kanban Board are sorted by their status and displayed in the corresponding lists.

Each KanbanList allows configuring dimensions and templates of its items. It is implemented in the type of KanbanList:


// define a type for KanbanList views with a set of templates
webix.type(webix.ui.kanbanlist,{
    name: "cards",   // type name        icons:[{id: "edit", icon: "edit"}],
    templateBody: function(obj){
        return (obj.img?"<img src='imgs/"+obj.img+"'/>":"")+obj.text;
    }
});
 
// create a Kanban board 
//and apply "cards" type for lists
webix.ui({
    view:"kanban",
    cols:[
        { 
           header:"Backlog",
           body:{ 
              view:"kanbanlist", 
              status:"new", 
              type: "cards"  // set type                }
        },
        ...
    ]
});


Related sample:  Templates


You can set the following properties in the type:

  • 'width' - the width of a list item ('auto' or fixed number in pixels),
  • 'height' - the height of a list item ('auto' or fixed number in pixels),
  • 'template' - data template that defines inner html for each item. The default definition of this property applies many other templates: icons, text, avatar,
  • 'templateBody' - template for main content of items. It is applied in the main 'template' and displays an item's text by default,
  • 'templateFooter' - template for content below the item's body (it is applied in the main 'template' and displays an item's tags and icons),
  • 'icons' - the array of icons. The icons are taken from the Font Awesome collection
  • 'templateIcons' - template for icons representation (is applied in the 'templateFooter')
  • 'templateTags' - template for tags representation (is applied in the 'templateFooter')
  • 'tagDelimiter' - string that defines tags delimiter in data source (',' by default)
  • 'templateAvatar' - template for an item's avatar ( the photo of an assignee or other data)
  • 'templateNoAvatar' - this template is applied if the 'templateAvatar' doesn't set HTML content for the element that shows information about the assignee.

A template can be specified either in the format of string or in the format of function. Below you'll find the description of all available templates.

Main templates

Avatar templates

Width and height of an item

width

Specifies the width of an item in the list.

{
   width:"auto"
}

"auto" is the default width value. However, you can set a fixed value and show more than one item in list rows:

webix.type(webix.ui.kanbanlist,{
   name: "cards",
   width: 120
   ...
});

You can read more here.

height

Specifies the height of an item in the list.

{
   height:"auto"
}

the 'height' property as well as 'width' can be defined as a fixed value.

template

Defines inner html for each item. The default definition of this property applies many other templates: icons, text, avatar.

 
template: function(obj, t){
   var avatar, content;
   avatar = t.templateAvatar(obj,t)||t.templateNoAvatar(obj,t);
   avatar = '<div class="webix_kanban_user_avatar">'+avatar+'</div>';
   content = '<div class="webix_kanban_body">'+t.templateBody(obj,t)+'</div>';
   content += '<div class="webix_kanban_footer">'+t.templateFooter(obj,t)+ '</div>';
   var style = 'style="border-left-color:'+obj.color+'"';
   return avatar+'<div class="webix_kanban_list_content" '+style+'>'+content+'</div>';
}

Pay attention that you shouldn't redefine the main template in order not to lose data. Otherwise, you'll have to specify data collection by yourself.

templateBody

Defines the main content of items, displays an item's text by default

webix.type(webix.ui.kanbanlist,{
    name: "cards",
    // displays images and text property in item content
    templateBody: function(obj,common){
        var html = "";
        if(obj.image)
            html += "<img class='image' src='../common/imgs/"+obj.image+"'/>";
        html += "<div>"+obj.text+"</div>";
        return html;
    },
    ...
});

Defines the content below the item's body, displays an item's tags and icons

{
    templateFooter: function(obj,common){
        var tags = common.templateTags(obj,common);
        return (tags?tags:"&nbsp;")+ common.templateIcons(obj,common);
    },
    ...
}

icons

Specifies an array of icons for Kanban Board

You need to specify icons array in the type for Kanban Lists. In the definition of each icon you can set the following properties:

  • id - icon id,
  • icon - name of a font icon in Font Awesome collection,
  • tooltip - title for an icon element,
  • show - function that takes an item object as a parameter and returns true/false value -to show/hide an icon for a certain item
  • template - text that will be displayed next to the icon
  • click - onClick event handler for the icon
webix.type(webix.ui.kanbanlist,{
    name: "cards",
    icons:[
        {
            id: "comments",
            tooltip: "Comments",
            icon:"comment-o",
            show: function(obj){ 
                return !!obj.comments 
            },
            template:"#comments.length#",
            click: function(e,id){
                var item = this.getItem(id);
                ...
            }
        },
        {
            id: "edit",
            icon:"edit",
            tooltip: "Edit Task",
            click: function(e,id){
                var item = $$("myBoard").getItem(id);
                ...
            }
        }
    ]
});
 
webix.ui({
    view:"kanban", 
    ...
    cols:[
        { 
            header:"Backlog",
            body:{ 
                view:"kanbanlist", 
                status:"new", 
                type: "cards" 
            }
        },
        ....
    ]
});

templateIcons

Defines icons representation

templateIcons: function(obj,common){
    var icons = [], icon = null, id, html, text;
    for (var i = 0; i < common.icons.length; i++){
        icon = common.icons[i];
        if(!icon.show || icon.show(obj)){
            id = icon.id||icon.icon;
            html = '<span webix_icon_id="'+id+'" class="webix_kanban_icon">';
            html += '<span class="fa-'+icon.icon+' webix_icon"></span>';
            if(icon.template){
                text = webix.template(icon.template)(obj);
                html += '<span class="webix_kanban_icon_text">'+text+'</span>';
            }
            html += '</span>';
            icons.push(html);
        }
    }
    return '<div  class="webix_kanban_icons">' +icons.join(" ")+'</div>';
},
...

templateTags

Defines tags representation

templateTags: function(obj,common){
    var html = '';
    if(obj.tags){
        var tags = obj.tags.split(common.tagDemiliter);
        for (var i = 0; i < tags.length; i++){
            html += '<span class="webix_kanban_tag">'+tags[i]+'</span>';
        }
    }   
    return '<div class="webix_kanban_tags">'+(html||"&nbsp;")+'</div>';
}

templateAvatar

Specifies an item's avatar

webix.type(webix.ui.kanbanlist,{
    name: "cards",
    // avatar template
    templateAvatar: function(obj){
        var html = '';
        if(obj.personId){
            html = '<img class="avatar" src="../common/imgs/'+obj.personId+'.jpg" />';
        }
        return html;
    },
    ...
});

templateNoAvatar

Applied if the 'templateAvatar' doesn't set html content for the element that shows information of an assignee

{
    templateNoAvatar: "<span class='webix_icon fa-user'></span>"
}


Related sample:  Templates

Back to top
If you have not checked yet, be sure to visit site of our main product Webix mvc library and page of javascript kanban product.