Loading/Saving Data in Kanban Board

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

{
    id: 1,
    status: "new",
    text: "Kanban board documentation",
    tags: "kanban,webix",
    $index: 0,
    ...
}

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

  • status - {string} the item's status, defines the list in which an item will be shown (obligatory)
  • text - {string} the item's (task's) title
  • tags - {string} a comma-separated list of tags
  • $index - {numeric} the task's position in the list that the item relates to

Kanban Board supports all data formats of the Webix library.

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

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

  2. To use the url property.

Both ways lead to one and the same result and don't have any specificity.

Loading from inline dataset

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

webix.ready(function(){
    webix.ui({
        view:"kanban", type:"space",
        cols:[
            { header:"Backlog",
                body:{ view:"kanbanlist", status:"new" }},
            ...
        ],
        //data collection                                           data: [                                                         { id:1, text:"Task 1", status: "new"},                                  { id:2, text:"Task 2", status: "new"}                                   ]                                                       });
});

Loading from a data file

To load data from a file, you can use the url property. The url refers to the JSON object that will be loaded into the board after its initialization.

webix.ready(function(){
    webix.ui({
        view:"kanban", 
        type:"space",
        cols:[
            { header:"Backlog",
                body:{ view:"kanbanlist", status:"new" }},
            ...
        ],
        //url to the file with data collection                  url: "tasks.php"                                    });
});

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 property:

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

More information about Kanban data loading you can find in DataStore docs.

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.