Customizing the task editor

Bryntum TaskBoard ships with a built-in task editor. It has a predefined set of fields, but it can easily be customized to fit your application.

Double-click a card to see open the editor:

Turning the editor off entirely

The editor is supplied by the TaskEdit feature. This features is enabled by default. To turn it off, configure it with false:

const taskBoard = new TaskBoard({
    features : {
        // Turn the task editor off completely, will not be created
        taskEdit : false
    }
});

Enabling or disabling the editor

You can also enable or disable the editor programmatically, perhaps depending on user rights:

const taskBoard = new TaskBoard({
    features : {
        taskEdit : {
            // The feature is created, but starts disabled
            disabled : true
        }
    }
});

// To enable
taskBoard.features.taskEdit.disabled = false;

// To disable again
taskBoard.features.taskEdit.disabled = true;

Try it in the demo below:

Default items

These are the default items in the task editor:

^* Only shown when using resources / swimlanes respectively

Customizing the items during configuration

Default items in the editor can be changed or removed and new items can be added for all tasks at configuration time. This is handled using the items config of the feature.

Adding custom items

To add a custom item, supply a config object for it using an unused ref (see table above for reserved names) as the key in the items config. The config object should at least include:

• type - Type of widget, see list below for common types
• name - Name of a field on a task record to bind to
• label - Field label

Which others configs you have to pick from depends on what kind of field you want to use. Some common fields and their type are:

• CheckBox - checkbox
• Combo - combo
• DateField - date
• NumberField - number
• TextField - text
• TagCombo - tagcombo
• TodoListField - todolist

For example to add a category picker (a combo):

const taskBoard = new TaskBoard({
    features : {
        taskEdit : {
            items : {
                category : {
                    type   : 'combo',
                    items  : [ 'Administrative', 'DevOps', 'Devs' ],
                    name   : 'category',
                    label  : 'Category',
                    weight : 150
                }
            }
        }
    }
});

Removing default items

To remove a default item, set its ref (see table above) to null in the items config. For example to remove the "Description" and "Color" fields:

const taskBoard = new TaskBoard({
    features : {
        taskEdit : {
            items : {
                description : null,
                color       : null
            }
        }
    }
});

Customizing a default item

To customize a default item you supply an object with the configs you want to change keyed by its ref in the items config. Any properties in the config object will be merged with the items defaults.

For example to change the label of description to "Notes" and move it to bottom:

const taskBoard = new TaskBoard({
    features : {
        taskEdit : {
            items : {
                description : {
                    label  : 'Notes',
                    weight : 800
                }
            }
        }
    }
});

Customizing items at runtime

The declarative approach used at configuration time (items config) can only affect the items for all tasks at once. If you need greater control you can instead use the processItems config. It accepts a function that will be called each time the editor is shown.

If you supply a function, it will be called with arguments including the default items and the task the editor will be shown for. By manipulating the items object (very similar to how it is done at configuration time) you can determine which items are shown for that specific task. You can also manipulate their configs and prevent the editor from showing.

A small example that changes the name fields label to "Title" and disallows editing tasks in the "done" column:

const taskBoard = new TaskBoard({
    features : {
        taskEdit : {
            // Process items before editor is shown
            processItems({ taskRecord, items }) {
                // Disallow editing done tasks
                if (taskRecord.status === 'done') {
                    return false;
                }

                items.name.label = 'Title';
            }
        }
    }
});