Loading/Saving Data in Kanban Board

Data Item Structure

Data can be loaded from different sources. However, Kanban Board stores data items as JSON objects:

{
    "id":2,
    "status":"in progress",
    "user_id":5,
    "text":"Performance tests",
    "color":"#FE0E0E",
    "tags":[1],
    "comments":[2,3],
    "attachments":[
        { id:2, link:"./server/files/image001.jpg", size:85919 },
        { id:3, link:"./server/files/image002.jpg", size:105981 }
    ],
    "$list":1
}

Each data item has a unique id and a set of other properties:

  • status - {string} the item status, defines the list in which an item will be shown (obligatory)
  • text - {string} the title of the item (task)
  • tags - {string,array} a comma-separated list of tags or an array of IDs if the comments are in a separate data set
  • $list - {numeric} the index the list in which the item is placed
  • comments - {array} the list of comments or their IDs if the comments are in a separate data set
  • color - {string} the color for task highlighting
  • user_id - {numeric} the ID of the user to whom the task is assigned
  • attachments - {array} the list of files attached to the card

Kanban Board supports all data formats of the Webix library.

Loading Main Data

There are 2 main ways you can specify data source for Kanban Board:

  1. To define data set for tasks in the object constructor.

  2. To use the url property.

Both ways lead to one and the same result and do not have any specificity.

Loading from inline data set

If you want to specify the data set directly on the page, you can use the data property.

webix.ui({
    view:"kanban",
    cols:[
        { header:"Backlog", body:{ view:"kanbanlist", status:"new" }},
        ...
    ],
    // tasks
    data:[
        {
            id:1, text:"Tutorial 1 on Kanban", status:"new",
            comments:[2], user_id:1, tags:[1,2]
        },
        {
            id:2, text:"Kanban app in Jet", status:"new",
            comments:[1], user_id:2, tags:[2]
        }
    ]
});

Loading from a file or a script

You can use the url property to set the path to a static data file or a script.

webix.ready(function(){
    webix.ui({
        view:"kanban",
        cols:[
            { header:"Backlog",
                body:{ view:"kanbanlist", status:"new" }},
            ...
        ],
        url: "/data/tasks"          });
});

Loading Data for Tags, Users and Colors

You can also specify separate data sets for users, tags, and colors:

  • inline data sets
webix.ui({
    view:"kanban",
    users:[
        { id:1, value:"Virginia Woolf", image:"imgs/woolf.jpg" },
        { id:2, value:"David H. Lawrence", image:"imgs/lawrence.jpg" }
    ],
    tags:[
        { id:1, value:"webix" },
        { id:2, value:"jet" }
    ],
    colors:[
        {id:1, value:"Normal", color:"green"},
        {id:2, value:"Low", color:"orange"},
        {id:3, value:"Urgent", color:"red"}
    ]
});
  • paths to scripts or Data Collections
var tags = new webix.DataCollection({ data:[] });
 
webix.ui({
    view:"kanban", 
    url: "/data/tasks",         
    users: "/data/users"
    tags: tags                              
});

There is more information about Kanban data loading in DataStore docs.

Saving data

There are a lot of ways to save data in Webix. You can find the detailed description in the Data Saving article.

For example, in the case of using DataProcessor you can set the save property:

webix.ready(function(){
    webix.ui({
        view:"kanban",
        cols:[
            { header:"Backlog", body:{ view:"kanbanlist", status:"new" }},
            ...
        ],
        url: "/data/tasks",
        save: "json->/data/tasks_save"                          });
});

Related sample:  Load and Save

Attachments

Users can attach files to Kanban. Attaching files is enabled by the attachments property. It defines the path for uploading attachments.

webix.ui({
    view:"kanban", type:"space",
    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,
    url:"/data/tasks",
    attachments:"/data/upload"
});

Attached files are stored in the corresponding data items, e.g.:

{
    "id":2,
    "status":"in progress",
    "text":"Performance tests",
    "attachments":[                                                         { id:2, link:"./server/files/image001.jpg", size:85919 },           { id:3, link:"./server/files/image002.jpg", size:105981 }       ],                                                                  "$list":1
}

Related sample:  Attachments to cards

Back to top
If you have not checked yet, be sure to visit site of our main product Webix javascript ui framework and page of kanban board tool product.