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 }
},
...
]
});
You can set the following properties in the type:
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.
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.
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.
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.
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:" ")+ common.templateIcons(obj,common);
},
...
}
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:
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"
}
},
....
]
});
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>';
},
...
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||" ")+'</div>';
}
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;
},
...
});
Applied if the 'templateAvatar' doesn't set html content for the element that shows an assignee's information
{
templateNoAvatar: "<span class='webix_icon fa-user'></span>"
}