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.

The editor is disabled by default. To enable it, 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 authentication service" },
        { id:2, status:"work", user_id: 5, text:"Performance tests" }
    ]
});

The default editor has the following controls:

Related sample:  Default Editor

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

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

You can delete cards by clicking the "Remove" button in the editor.

Related sample:  Kanban: Adding New Items

You can also remove cards with the help of a card action menu:

Related sample:  Card Actions

Kanban Editor displays attached files and allows adding new attachments to cards.

Attachment data is stored in the attachments property of the data item. attachments contains the paths to already uploaded files, their sizes, and IDs.

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

To show files in the Kanban editor and to delete or upload new ones, 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:  Kanban: Attachments to cards

Defining Controls

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

Related sample:  Custom Editor

Setting Editor Configuration

You can also set the editor as a form object with various configuration settings. For example, you can add validation by setting form validation rules:

webix.ui({
    view:"kanban",
    editor:{
        elements:[
            { view:"textarea", name:"text", label:"Task", height:90 },
            {
                margin:10,
                cols:[
                    { view:"multicombo", name:"tags", label:"Tags",
                    options:tags_set },
                    { view:"combo", name:"user_id", label:"Assign to",
                    options:users_set }
                ]
            }
        ],
        rules:{
            text: webix.rules.isNotEmpty,
            user_id: webix.rules.isNotEmpty
        }
    },
    data: full_task_set,
    tags: tags_set,
    users: users_set
});

Related sample:  Custom Editor:: Validation