Icons in Kanban, JavaScript Programming Example of Icons in Kanban

Home
Examples
Icons in Kanban

JavaScript Programming Example of Icons in Kanban

Do you want to create a nice Kanban Board style? The coding example below demonstrates how to create a stylized Kanban Board with icons. Don't miss the opportunity to use free code samples by Webix for your web development projects.

JS Code

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

  webix.ui({
    view:"kanban",
    id: "myBoard",
    on:{
      onListIconClick: function(iconId, itemId){
        webix.message("Icon '"+iconId+"' has been clicked in '"+this.getItem(itemId).text+"' item")
      }
    },
    cols:[
      { header:"Backlog",
       body:{ view:"kanbanlist", status:"new", type: "icons" }},
      { header:"In Progress",
       body:{ view:"kanbanlist", status:"work", type: "icons"}
      },
      { header:"Testing",
       body:{ view:"kanbanlist", status:"test", type: "icons" }},
      { header:"Done",
       body:{ view:"kanbanlist", status:"done", type: "icons" }}
    ],
    data:base_task_set
  });
});

HTML Code

<link rel="stylesheet" type="text/css" href="//cdn.webix.com/materialdesignicons/5.8.95/css/materialdesignicons.min.css">
<script src="//docs.webix.com/samples/63_kanban/common/types.js?v=6.1.2"></script>
  
<script>
  var base_task_set = [
	{ id:1, status:"new", text:"Task 1", tags:"webix,docs", comments:[{text:"Comment 1"}, {text:"Comment 2"}] },
	{ id:2, status:"work", text:"Task 2", color:"red", tags:"webix", votes:1, personId: 4  },
	{ id:3, status:"work", text:"Task 3", tags:"webix,docs", comments:[{text:"Comment 1"}], personId: 6 },
	{ id:4, status:"test", text:"Task 4 pending", tags:"webix 2.5", votes:1, personId: 5  },
	{ id:5, status:"new", text:"Task 5", tags:"webix,docs", votes:3  },
	{ id:6, status:"new", text:"Task 6", tags:"webix,kanban", comments:[{text:"Comment 1"}, {text:"Comment 2"}], personId: 2 },
	{ id:7, status:"work", text:"Task 7", tags:"webix", votes:2, personId: 7, image: "image001.png"  },
	{ id:8, status:"work", text:"Task 8", tags:"webix", comments:[{text:"Comment 1"}, {text:"Comment 2"}], votes:5, personId: 4  },
	{ id:9, status:"work", text:"Task 9", tags:"webix", votes:1, personId: 2},
	{ id:10, status:"work", text:"Task 10", tags:"webix", comments:[{text:"Comment 1"}, {text:"Comment 2"}, {text:"Comment 3"}], votes:10, personId:1 },
	{ id:11, status:"work", text:"Task 11", tags:"webix 2.5", votes:3, personId: 8 },
	{ id:12, status:"done", text:"Task 12", votes:2 , personId: 8, image: "image002.png"},
	{ id:13, status:"ready", text:"Task 14",  personId: 8}
  ];  
</script>

How to create icons in Kanban?

Download Webix UI Framework

Study Kanban Documentation

Check out Kanban Widget Features