Kanban UI Editor

Each Kanban card can be edited with the help of the UI Editor. It opens when a user double-clicks the card or clicks the pencil icon on a card.

Editor is disabled by default. To enable it, you must set the editor property in the Kanban configuration.

webix.ui({
    view:"kanban",
    cols:[
        { header:"Backlog", body:{ view:"kanbanlist", status:"new" } },
        { header:"In Progress", body:{ view:"kanbanlist", status:"work" } }
    ],
    editor:true,        data:[
        { id:1, status:"new", text:"Test new authentification service" },
        { id:2, status:"work", user_id: 5, text:"Performance tests" }
    ]
});

The default Editor has the following controls:

Webix Kanban default editor

Related sample:  Default Editor

Adding and deleting cards

You can use the editor to add and delete cards as well. The editor can be opened with the showEditor method:

{
    view:"button", type:"form",
    label:"Add new card", width:150,
    click:() => {
        $$("myBoard").showEditor();
    }
}

You can delete cards by a click on the "Remove" button of the editor.

Related sample:  Adding New Items

Or you can remove cards with the help of a card action menu:

Webix Kanban card action menu

Related sample:  Card Actions

Card Attachments

Kanban Editor allows visualizing attached files, as well as adding new attachments to the cards.

Webix Kanban attachments

Attachments data are stored in the attachments property of the data item. attachments contains the path to already uploaded files, the size of the file and the ID.

//item data
{ "status":"new", "text":"Webix Jet tutorial", "attachments":[
    {"id":8, "link":"/kanban/samples/server/attachments/image004.jpg", "size":84683}
]}

To show the files within the Kanban editor, delete or upload the new ones, you need to provide the upload URL as follows:

const apiRoot = "/kanban/samples/server";
 
webix.ui({
    view:"kanban",
    cols:[
        { header:"Backlog", body:{ view:"kanbanlist", status:"new" } },
        { header:"In Progress", body:{ view:"kanbanlist", status:"work" } }
    ],    
    url: apiRoot + "/tasks/cards", 
    save: "json->" + apiRoot + "/tasks/attachments",
    attachments: apiRoot + "/attachments"     });

Related sample:  Attachments to cards

Customizing Editor

You can change the editor by redefining its controls in the Kanban configuration. Provide a set of controls in the editor property:

webix.ui({
    view:"kanban",
    cols:[
        { header:"Backlog", body:{ view:"kanbanlist", status:"new" } },
        { header:"In Progress", body:{ view:"kanbanlist", status:"work" } },
        { header:"Done", body:{ view:"kanbanlist", status:"done" } }
    ],
    editor:[
        { view:"text", name:"text", label:"Task" },
        { view:"multicombo", name:"tags", label:"" },
        {
            view:"richselect", name:"user",
            options:[
                { id:1, name:"China Mieville" },
                { id:2, name:"Helen Walsh" },
                { id:3, name:"Jeff Noon" }
            ]
        }
    ],
    data:[
        { id:1, status:"new", text:"Test new authentication service" },
        { id:2, status:"work", user_id: 5, text:"Performance tests" }
    ]
});

The names of controls must be the same as the properties of Kanban data items.

Related sample:  Custom Editor

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