|
| 1 | +--- |
| 2 | +description: >- |
| 3 | + Learn how to create workspace action menu items that extend workspace actions with additional functionality. |
| 4 | +--- |
| 5 | + |
| 6 | +# Workspace Action Menu Item |
| 7 | + |
| 8 | +Workspace Action Menu Items extend existing workspace actions by adding dropdown menu options. They provide secondary functionality that relates to the primary action without cluttering the workspace footer. |
| 9 | + |
| 10 | +## Manifest |
| 11 | + |
| 12 | +{% code caption="manifest.ts" %} |
| 13 | +```typescript |
| 14 | +{ |
| 15 | + type: 'workspaceActionMenuItem', |
| 16 | + kind: 'default', |
| 17 | + alias: 'example.workspaceActionMenuItem.resetCounter', |
| 18 | + name: 'Reset Counter Menu Item', |
| 19 | + api: () => import('./reset-counter-menu-item.action.js'), |
| 20 | + forWorkspaceActions: 'example.workspaceAction.incrementor', |
| 21 | + weight: 100, |
| 22 | + meta: { |
| 23 | + label: 'Reset Counter', |
| 24 | + icon: 'icon-refresh', |
| 25 | + }, |
| 26 | +} |
| 27 | +``` |
| 28 | +{% endcode %} |
| 29 | + |
| 30 | +### Key Properties |
| 31 | +- **`kind`** - Specifies which type of element should be shown (if no `element` is provided). The `default` option refers to the `<umb-workspace-action-menu-item />`, which supports a label and an href |
| 32 | +- **`forWorkspaceActions`** - Specifies which workspace action this extends |
| 33 | +- **`weight`** - Controls ordering within the dropdown menu |
| 34 | +- **`meta.label`** - Text displayed in dropdown |
| 35 | +- **`meta.icon`** - Icon displayed alongside label |
| 36 | + |
| 37 | +## Implementation |
| 38 | + |
| 39 | +Create a workspace action menu item by extending `UmbWorkspaceActionMenuItemBase` and implementing the `execute` method. This provides the functionality that runs when a user interacts with the menu item: |
| 40 | + |
| 41 | +{% code caption="reset-counter-menu-item.action.ts" %} |
| 42 | +```typescript |
| 43 | +import { EXAMPLE_COUNTER_CONTEXT } from './counter-workspace-context.js'; |
| 44 | +import { UmbWorkspaceActionMenuItemBase } from '@umbraco-cms/backoffice/workspace'; |
| 45 | +import type { UmbWorkspaceActionMenuItem } from '@umbraco-cms/backoffice/workspace'; |
| 46 | + |
| 47 | +export class ExampleResetCounterMenuItemAction extends UmbWorkspaceActionMenuItemBase implements UmbWorkspaceActionMenuItem { |
| 48 | + override async execute() { |
| 49 | + const context = await this.getContext(EXAMPLE_COUNTER_CONTEXT); |
| 50 | + if (!context) { |
| 51 | + throw new Error('Could not get the counter context'); |
| 52 | + } |
| 53 | + |
| 54 | + context.reset(); |
| 55 | + } |
| 56 | +} |
| 57 | + |
| 58 | +export const api = ExampleResetCounterMenuItemAction; |
| 59 | +``` |
| 60 | +{% endcode %} |
| 61 | + |
| 62 | +## Action Relationship |
| 63 | + |
| 64 | +Menu items display a dropdown menu for their associated actions: |
| 65 | + |
| 66 | +### Primary Action |
| 67 | +```typescript |
| 68 | +// The main action that appears as a button |
| 69 | +{ |
| 70 | + type: 'workspaceAction', |
| 71 | + alias: 'example.workspaceAction.save', |
| 72 | + meta: { label: 'Save' }, |
| 73 | +} |
| 74 | +``` |
| 75 | + |
| 76 | +### Menu Item Extensions |
| 77 | +```typescript |
| 78 | +// Multiple menu items can extend the same action |
| 79 | +{ |
| 80 | + type: 'workspaceActionMenuItem', |
| 81 | + alias: 'example.menuItem.saveAndClose', |
| 82 | + forWorkspaceActions: 'example.workspaceAction.save', |
| 83 | + meta: { label: 'Save and Close' }, |
| 84 | +} |
| 85 | + |
| 86 | +{ |
| 87 | + type: 'workspaceActionMenuItem', |
| 88 | + alias: 'example.menuItem.saveAsDraft', |
| 89 | + forWorkspaceActions: 'example.workspaceAction.save', |
| 90 | + meta: { label: 'Save as Draft' }, |
| 91 | +} |
| 92 | +``` |
0 commit comments