Customizing the task menu

Bryntum TaskBoard ships with a built-in context menu for tasks. The menu is populated by the task boards features and it can easily be customized to fit your application.

Right-click a card to see its default items:

Turning the menu off entirely

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

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

Enabling or disabling the menu

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

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

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

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

Try it in the demo below:

Default items

These are the default items in the task menu, provided by TaskBoard features:

Customizing the items during configuration

The default items in the menu 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 menu item, supply a config object for the item (see MenuItem) using an unused ref (see table above for reserved names) as the key in the items config.

The most common configs are text, icon, checked and a handler for the item, onItem(). For example to add a custom item that "flags" a task:

const taskBoard = new TaskBoard({
    features : {
        taskMenu : {
            items : {
                flagTask : {
                    text : 'Flag task',
                    icon : 'fa-fw fa-flag',
                    onItem({ taskRecord }) {
                        taskRecord.flagged = true;
                    }
                }
            }
        }
    }
});

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 "Remove task" and "Resources" items:

const taskBoard = new TaskBoard({
    features : {
        taskMenu : {
            items : {
                removeTask : null,
                resources : 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 text of the "Remove task" item and move it to top:

const taskBoard = new TaskBoard({
    features : {
        taskMenu : {
            items : {
                removeTask : {
                    text   : 'Delete card',
                    weight : 50
                }
            }
        }
    }
});

Customizing items at runtime

The declarative approach used at configuration time (the items config) can only affect the menu 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 menu is shown.

If you supply a function, it will be called with arguments including the default items and the task the menu 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 menu from showing.

A small example that adds a custom item for tasks in the "Done" column and prevents the menu from being shown for low prio tasks:

const taskBoard = new TaskBoard({
    features : {
        taskMenu : {
            // Process items before menu is shown
            processItems({ taskRecord, items }) {
                 // Push an extra item for done tasks
                 if (taskRecord.status === 'done') {
                     items.archive = {
                         text : 'Archive',
                         icon : 'fa-fw fa-archive',
                         onItem({ taskRecord }) {
                             taskRecord.archived = true;
                         }
                     };
                 }

                 // Do not show menu for low prio tasks
                 if (taskRecord.prio === 'low') {
                     return false;
                 }
            }
        }
    }
});