Loading/Saving Data in Kanban Board

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 tags are in a separate data set
• $list - {numeric} the index of 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.

There are two main ways to specify a data source for Kanban Board:

• To define a data set for tasks in the object constructor.

• To use the url property.

Both ways lead to the same result.

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" }},
        // ... other columns
    ],
    // 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" }},
            // ... other columns
        ],
        url: "/data/tasks"          });
});

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                              
});

You can find more information about Kanban data loading in the DataStore docs.

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

For example, if you use DataProcessor, you can set the save property:

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

Related sample:  Kanban: Loading and Saving Data

Users can attach files to Kanban. The attachments property enables attachments and defines the path for uploading them.

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:  Kanban: Attachments to cards