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 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.

Loading Main Data

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

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

• 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" }},
        // ... 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"          });
});

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

Related sample:  Kanban: Loading and Saving Data

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

Back to top