Cms/workspace extensions #7265
+1,012
−203
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,50 @@ | ||
| --- | ||
| description: >- | ||
| Learn about workspace extension types that provide shared functionality and communication within workspace environments. | ||
| --- | ||
|
|
||
| # Extension Types: Workspaces | ||
|
|
||
| Workspace extensions are specialized components that enhance Umbraco's editing environments for documents, media, and members. They share state through workspace contexts, enabling coordinated functionality like synchronized actions, real-time status updates, and seamless data flow between different parts of the editing interface. | ||
|
Check warning on line 8 in 16/umbraco-cms/customizing/extending-overview/extension-types/workspaces/README.md
|
||
|
|
||
| ## Available Extension Types | ||
|
|
||
| Workspace extensions can be grouped into these types: | ||
|
|
||
| ### Core Extensions | ||
| - **[Workspace Context](workspace-context.md)** - Provides shared state management and communication between workspace extensions | ||
| - **[Workspace](workspace.md)** - Defines the main workspace environment and routing | ||
|
|
||
| ### User Interface Extensions | ||
| - **[Workspace Views](workspace-views.md)** - Tab-based content areas for organizing different aspects of entity editing | ||
| - **[Workspace Footer Apps](workspace-footer-apps.md)** - Persistent status information and contextual data in the footer area | ||
|
|
||
| ### Action Extensions | ||
| - **[Workspace Actions](workspace-editor-actions.md)** - Primary action buttons that appear in the workspace footer | ||
| - **[Workspace Action Menu Items](workspace-action-menu-items.md)** - Dropdown menu items that extend workspace actions with additional functionality | ||
|
|
||
| ## Integration Patterns | ||
|
|
||
| Workspace extensions communicate through shared contexts using these patterns: | ||
|
|
||
| 1. **[Workspace Context](workspace-context.md)** manages centralized state using observables that automatically notify subscribers of changes | ||
| 2. **[Workspace Actions](workspace-editor-actions.md)** consume the context to modify state when users interact with buttons or menu items | ||
| 3. **[Workspace Actions Menu Items](workspace-action-menu-items.md)** add additional options for workspace actions | ||
| 4. **[Workspace Views](workspace-views.md)** observe context state to automatically update their UI when data changes | ||
| 5. **[Footer Apps](workspace-footer-apps.md)** monitor context state to display real-time status information | ||
|
|
||
| ### Communication Flow | ||
|
|
||
| ``` | ||
| Workspace Context (State Management) | ||
| ↕️ | ||
| Workspace Actions (State Modification) | ||
| ↕️ | ||
| Workspace Views (State Display) | ||
| ↕️ | ||
| Footer Apps (Status Monitoring) | ||
| ``` | ||
|
|
||
| {% hint style="info" %} | ||
| All workspace extensions are automatically scoped to their workspace instance, ensuring that extensions in different workspaces cannot interfere with each other. | ||
| {% endhint %} | ||
Empty file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| --- | ||
| description: >- | ||
| Learn how to create workspace action menu items that extend workspace actions with additional functionality. | ||
| --- | ||
|
|
||
| # Workspace Action Menu Item | ||
|
|
||
| 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. | ||
|
|
||
| ## Manifest | ||
|
|
||
| {% code caption="manifest.ts" %} | ||
| ```typescript | ||
| { | ||
| type: 'workspaceActionMenuItem', | ||
| kind: 'default', | ||
| alias: 'example.workspaceActionMenuItem.resetCounter', | ||
| name: 'Reset Counter Menu Item', | ||
| api: () => import('./reset-counter-menu-item.action.js'), | ||
| forWorkspaceActions: 'example.workspaceAction.incrementor', | ||
| weight: 100, | ||
| meta: { | ||
| label: 'Reset Counter', | ||
| icon: 'icon-refresh', | ||
| }, | ||
| } | ||
| ``` | ||
| {% endcode %} | ||
|
|
||
| ### Key Properties | ||
| - **`forWorkspaceActions`** - Specifies which workspace action this extends | ||
| - **`weight`** - Controls ordering within the dropdown menu | ||
| - **`meta.label`** - Text displayed in dropdown | ||
| - **`meta.icon`** - Icon displayed alongside label | ||
|
|
||
| ## Implementation | ||
|
|
||
| Create a workspace action menu item by extending `UmbWorkspaceActionMenuItemBase` and implementing the `execute` method. This provides the functionality that runs when users interacts with the menu item: | ||
|
|
||
| {% code caption="reset-counter-menu-item.action.ts" %} | ||
| ```typescript | ||
| import { EXAMPLE_COUNTER_CONTEXT } from './counter-workspace-context.js'; | ||
| import { UmbWorkspaceActionMenuItemBase } from '@umbraco-cms/backoffice/workspace'; | ||
| import type { UmbWorkspaceActionMenuItem } from '@umbraco-cms/backoffice/workspace'; | ||
|
|
||
| export class ExampleResetCounterMenuItemAction extends UmbWorkspaceActionMenuItemBase implements UmbWorkspaceActionMenuItem { | ||
| override async execute() { | ||
| const context = await this.getContext(EXAMPLE_COUNTER_CONTEXT); | ||
| if (!context) { | ||
| throw new Error('Could not get the counter context'); | ||
| } | ||
|
|
||
| context.reset(); | ||
| } | ||
| } | ||
|
|
||
| export const api = ExampleResetCounterMenuItemAction; | ||
| ``` | ||
| {% endcode %} | ||
|
|
||
| ## Action Relationship | ||
|
|
||
| Menu items display a dropdown menu for their associated actions: | ||
|
|
||
| ### Primary Action | ||
| ```typescript | ||
| // The main action that appears as a button | ||
| { | ||
| type: 'workspaceAction', | ||
| alias: 'example.workspaceAction.save', | ||
| meta: { label: 'Save' }, | ||
| } | ||
| ``` | ||
|
|
||
| ### Menu Item Extensions | ||
| ```typescript | ||
| // Multiple menu items can extend the same action | ||
| { | ||
| type: 'workspaceActionMenuItem', | ||
| alias: 'example.menuItem.saveAndClose', | ||
| forWorkspaceActions: 'example.workspaceAction.save', | ||
| meta: { label: 'Save and Close' }, | ||
| } | ||
|
|
||
| { | ||
| type: 'workspaceActionMenuItem', | ||
| alias: 'example.menuItem.saveAsDraft', | ||
| forWorkspaceActions: 'example.workspaceAction.save', | ||
| meta: { label: 'Save as Draft' }, | ||
| } | ||
| ``` | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the default kind should be mentioned here as well, as thata gives the Element for this.