# [TaskMenu](https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/TaskMenu) Displays a context menu for tasks. Items are populated by other features and/or application code. You can optionally also use a [TaskMenuItem](https://bryntum.com/products/taskboard/docs/api/#TaskBoard/view/item/TaskMenuItem) button to display the menu. Default items ------------- These are the default items provided by TaskBoard features: Reference Weight Feature Description `editTask` 100 [TaskEdit](https://bryntum.com/products/taskboard/docs/api/#TaskBoard/feature/TaskEdit) Open task editor. Hidden when read-only `resources` 200 _This feature_ Assign/unassign resources. Hidden when read-only `column` 300 _This feature_ Move to column. Hidden when read-only `swimlane` 400 _This feature_ Move to swimlane. Hidden when read-only `removeTask` 500 _This feature_ Remove task. Hidden when read-only Default items in the menu can be changed or removed and new items can be added. This is handled using the [items](https://bryntum.com/products/taskboard/docs/api/#TaskBoard/feature/TaskMenu#config-items) config of the feature. Add items --------- Add menu items for all tasks by adding a key (used as menu item [ref](https://bryntum.com/products/taskboard/docs/api/#Core/widget/Widget#config-ref)) with a [config object for a menu item](https://bryntum.com/products/taskboard/docs/api/#Core/widget/MenuItem#configs) as the value to the [items](https://bryntum.com/products/taskboard/docs/api/#TaskBoard/feature/TaskMenu#config-items) config: ``` const taskBoard = new TaskBoard({ features : { taskMenu : { items : { flagTask : { text : 'Flag task', icon : 'fa fa-fw fa-flag', onItem({ taskRecord }) { taskRecord.flagged = true; } } } } } }); ``` Remove items ------------ To remove default items, configure them as `null` in the [items](https://bryntum.com/products/taskboard/docs/api/#TaskBoard/feature/TaskMenu#config-items) config: ``` const taskBoard = new TaskBoard({ features : { taskMenu : { items : { removeTask : null, resources : null } } } }); ``` Customize items --------------- To customize default items, supply a new config object for them in the [items](https://bryntum.com/products/taskboard/docs/api/#TaskBoard/feature/TaskMenu#config-items) config. It will merge with the default config object: ``` const taskBoard = new TaskBoard({ features : { taskMenu : { items : { removeTask : { text : 'Delete card' } } } } }); ``` Manipulating items at runtime ----------------------------- Manipulate items for all tasks or specific tasks at runtime by supplying a [processItems](https://bryntum.com/products/taskboard/docs/api/#TaskBoard/feature/TaskMenu#config-processItems) function: ``` 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 fa-fw fa-archive' onItem({ taskRecord }) { taskRecord.archived = true; } }; } // Do not show menu for low prio tasks if (taskRecord.prio === 'low') { return false; } } } } }); ``` The \`processItems\` implementation my be an \`async\` function which \`awaits\` a result to mutate the \`items\` object. This feature is **enabled** by default. Keyboard shortcuts ------------------ This feature has the following default keyboard shortcuts: Keys Action Action description Space _showContextMenuByKey_ Shows context menu for currently focused task Ctrl+Space _showContextMenuByKey_ Shows context menu for currently focused task Please note that Ctrl is the equivalent to Command and Alt is the equivalent to Option for Mac users For more information on how to customize keyboard shortcuts, please see [our guide](https://bryntum.com/products/taskboard/docs/api/#TaskBoard/guides/customization/keymap.md). ## Configs Configs are options you supply in a configuration object when creating an instance of this class [processItems](https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/TaskMenu#config-processItems) A function called before displaying the menu that allows manipulations of its items. Returning `false` from this function prevents the menu from being shown. ``` const taskBoard = new TaskBoard({ features : { taskMenu : { processItems({ taskRecord, items }) { // Add a custom menu item for tasks with progress greater than 90 if (taskRecord.progress > 90) { items.close = { text : 'Close', icon : 'fa fa-fw fa-check', onItem({ taskRecord }) { taskRecord.done = true; } } } } } } }); ``` [items](https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/TaskMenu#config-items) This is a preconfigured set of items used to create the default context menu. The `items` provided by this feature are listed in the intro section of this class. You can configure existing items by passing a configuration object to the keyed items. To remove existing items, set corresponding keys to `null`: ``` const taskBoard = new TaskBoard({ features : { taskMenu : { items : { editTask : null } } } }); ``` See the feature config in the above example for details. [triggerEvent](https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/TaskMenu#config-triggerEvent) The mouse / touch gesture which should show this context menu (e.g. 'taskClick' or 'taskContextMenu'). Set to `false` to never trigger it from UI. [showAvatars](https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/TaskMenu#config-showAvatars) Show avatars/initials in the resource picker menu ``` const taskBoard = new TaskBoard({ features : { taskMenu : { showAvatars : false } } }); ``` ## Properties Properties are getters/setters or publicly accessible variables on this class [isTaskMenu](https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/TaskMenu#property-isTaskMenu) Identifies an object as an instance of [TaskMenu](https://bryntum.com/products/taskboard/docs/api/#TaskBoard/feature/TaskMenu) class, or subclass thereof. [isTaskMenu](https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/TaskMenu#property-isTaskMenu-static) Identifies an object as an instance of [TaskMenu](https://bryntum.com/products/taskboard/docs/api/#TaskBoard/feature/TaskMenu) class, or subclass thereof. ## Functions Functions are methods available for calling on the class [showMenuFor](https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/TaskMenu#function-showMenuFor) Show the context menu for a specific task, aligned to its card. Optionally aligned to an element in the card, using the supplied CSS selector. ## Events Events are triggered for certain actions in this class and can be listened for to react to those actions in your code [taskMenuBeforeShow](https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/TaskMenu#event-taskMenuBeforeShow) This event fires on the owning TaskBoard before the context menu is shown for a task. Allows manipulation of the items to show in the same way as in the [processItems](https://bryntum.com/products/taskboard/docs/api/#TaskBoard/feature/TaskMenu#config-processItems). Returning `false` from a listener prevents the menu from being shown. [taskMenuShow](https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/TaskMenu#event-taskMenuShow) This event fires on the owning TaskBoard after the context menu is shown for a task. [taskMenuItem](https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/TaskMenu#event-taskMenuItem) This event fires on the owning TaskBoard when an item is selected in the task context menu. [taskMenuToggleItem](https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/TaskMenu#event-taskMenuToggleItem) This event fires on the owning TaskBoard when a check item is toggled in the task context menu.