Icons in Kanban, JavaScript Programming Example of 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.type(webix.ui.kanbanlist,{
  name: "iconsEdit",
  icons:[
    {
      id: "comments",
      tooltip: "Comments",
      icon:"mdi mdi-comment",
      show: function(obj){ return !!obj.comments },
      template:"#comments.length#",
      click: function(id){
        webix.message("Comments for '"+this.getItem(id).text+"'");
      }
    },
    {
      id: "edit",
      icon:"mdi mdi-pencil",
      tooltip: "Edit Task",
      click: function(id){
        var item = $$("myBoard").getItem(id);
        $$("myBoard").select(id);
        $$("myWin").show();
        $$("myForm").setValues(item);
        $$("myForm").focus();
      }
    }
  ]
});

webix.ui({
  view: "window",
  width: 400,
  height: 350,
  id: "myWin",
  position: "center",
  modal: true,
  head:{
    view: "toolbar",
    elements:[
      { view: "label", label: "Task form"},
      { view: "button", type:"iconButton", label: "Close", icon: "wxi-close", click:function(){$$("myWin").hide()}, width:90}
    ]
  },
  body:{
    view: "form",
    id: "myForm",
    elementsConfig:{
      labelPosition: "top"
    },
    elements:[
      { view: "text", label: "Title", name:"text"},
      { view: "textarea", label: "Desription", name:"description", height: 90},
      { view: "button",label:"Save", type: "form", inputWidth:120, align: "center",
       click:function(){
         $$("myWin").hide();
         var values = $$("myForm").getValues();
         var id = $$("myBoard").getSelectedId();
         var item = $$("myBoard").getItem(id);
         item.text = values.text;
         item.description = values.description;
         $$("myBoard").refresh(id);
       }}
    ]
  }
});


webix.ready(function(){
  if (!webix.env.touch && webix.env.scrollSize)
    webix.CustomScroll.init();

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

});

HTML Code

<link rel="stylesheet" type="text/css" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.css">

<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>