NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

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>