Users' Avatars in Kanban, JavaScript Programming Example of Users' Avatars in Kanban

JavaScript Programming Example of Users' Avatars in Kanban

Check out the coding sample that will allow you to add avatars for users in Kanban. Don't miss the chance to use free programming examples by Webix to speed up the process of web development.

JS Code

webix.ready(function(){
  webix.type(webix.ui.kanbanlist,{
    name: "avatars",
    icons:[
      {icon: "comment" , show: function(obj){ return !!obj.comments }, template:"#comments.length#"},
      {icon: "pencil"}
    ],
    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 "";
    }
  });

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

HTML Code

<link rel="stylesheet" type="text/css" href="https://docs.webix.com/samples/63_kanban/common/style.css">
<script>
  var staff = [
	{id:1, name:"Rick Lopes"},
	{id:2, name:"Martin Farrell"},
	{id:3, name:"Douglass Moore"},
	{id:4, name:"Eric Doe"},
	{id:5, name:"Sophi Elliman"},
	{id:6, name:"Anna O'Neal"},
	{id:7, name:"Marcus Storm"},
	{id:8, name:"Nick Branson"}
  ];
  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>