Adding New Items in Kanban, JavaScript Programming Example of Adding New Items in Kanban

Name: JavaScript Programming Example of Adding New Items in Kanban - Webix
Rating: 4.8 (47 reviews)

Home
Examples
Adding New Items in Kanban

JavaScript Adding New Items in Kanban

The programming example below can give you a nice possibility to add and remove cards in Kanban Board. Don't miss the chance to use free coding samples by Webix for your web development projects.

JS Code

webix.ready(function(){
    webix.CustomScroll.init();
  
  webix.ui({
    rows:[
      {
        paddingY:7,
        paddingX:10,
        margin: 7,
        cols:[
          { },
          { view: "button", type: "danger", label: "Remove selected", width: 150, click:() => {
            var id = $$("myBoard").getSelectedId();
            if(!id){
              return webix.alert("Please selected a card that you want to remove!");
            }
            $$("myBoard").remove(id);
          }},
          { view: "button", type: "form",  label: "Add new card", width: 150, click:() => {
            $$("myBoard").showEditor();
          }}
        ]
      },
      {
        view:"kanban", type:"space", id: "myBoard",
        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,
        editor:true,
        data: full_task_set,
        tags: tags_set,
        users: users_set
      }
    ]
  });
});

HTML Code

<link rel="stylesheet" type="text/css" href="https://docs.webix.com/samples/63_kanban/common/style.css">
  
<script>
  var tags_set = [
	{id:1, value:"webix"},
	{id:2, value:"jet"},
	{id:3, value:"easy"},
	{id:4, value:"hard"},
	{id:5, value:"kanban"},
	{id:6, value:"docs"},
];
var imgPath = "//docs.webix.com/samples/63_kanban";
  var users_set = [
	{id:1, value:"Rick Lopes", image:imgPath+"/common/imgs/1.jpg"},
	{id:2, value:"Martin Farrell", image:imgPath+"/common/imgs/2.jpg"},
	{id:3, value:"Douglass Moore", image:imgPath+"/common/imgs/3.jpg"},
	{id:4, value:"Eric Doe", image:imgPath+"/common/imgs/4.jpg"},
	{id:5, value:"Sophi Elliman", image:imgPath+"/common/imgs/5.jpg"},
	{id:6, value:"Anna O'Neal"},
	{id:7, value:"Marcus Storm", image:imgPath+"/common/imgs/7.jpg"},
	{id:8, value:"Nick Branson", image:imgPath+"/common/imgs/8.jpg"},
	{id:9, value:"CC", image:imgPath+"/common/imgs/9.jpg"}
];
  var full_task_set = [
	{ id:1, status:"new", text:"Test new authentification service", tags:[1,2,3], comments:[1,2,3] },
	{ id:2, status:"work", user_id: 5, text:"Performance tests", tags:[1], comments:[2,3] },
	{ id:3, status:"work", user_id: 6, text:"Kanban tutorial", tags:[2], comments:[3] },
	{ id:4, status:"work", user_id: 3, text:"SpreadSheet NodeJS", tags:[3] },
	{ id:5, status:"test", user_id: 9, text:"Portlets view", tags:[4,2], comments:[1] },
	{ id:6, status:"new", user_id: 7, text:"Webix Jet tutorial", tags:[4,6] }
];
</script>

How to add and remove cards in Kanban Board?

Download Webix UI Framework

Study Kanban Documentation

Check out Kanban Widget Features