23 days to give it a try before you buy! Download now. The best deals on licenses are coming soon Download now. The best deals on licenses are coming soon

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

var imagePath = "https://docs.webix.com/samples/63_kanban/common/imgs/";
var users_set = [
  {id:1, value:"Rick Lopes", image:imagePath + "1.jpg"},
  {id:2, value:"Martin Farrell", image:imagePath + "2.jpg"},
  {id:3, value:"Douglass Moore", image:imagePath + "3.jpg"},
  {id:4, value:"Eric Doe", image:imagePath + "4.jpg"},
  {id:5, value:"Sophi Elliman", image:imagePath + "5.jpg"},
  {id:6, value:"Anna O'Neal"},
  {id:7, value:"Marcus Storm", image:imagePath + "7.jpg"},
  {id:8, value:"Nick Branson", image:imagePath + "8.jpg"},
  {id:9, value:"CC", image:imagePath + "9.jpg"}
];

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

  webix.ui({
    view:"kanban",
    cols:[
      { header:"Backlog",
       body:{ view:"kanbanlist", status:"new" }},
      { header:"In Progress",
       body:{ view:"kanbanlist", status:"work" }},
      { header:"Testing",
       body:{ view:"kanbanlist", status:"test" }},
      { header:"Done",
       body:{ view:"kanbanlist", status:"done" }}
    ],
    userList:true,
    data: full_task_set,
    tags: tags_set,
    users: users_set
  });
});

HTML Code

<script src="//docs.webix.com/samples/63_kanban/common/data.js?v=6.1.2"></script>