Cms/workspace extensions

16/umbraco-cms/SUMMARY.md

@@ -156,8 +156,10 @@
       * [Section View](customizing/extending-overview/extension-types/sections/section-view.md)
     * [Workspaces](customizing/extending-overview/extension-types/workspaces/README.md)
       * [Workspace Actions](customizing/extending-overview/extension-types/workspaces/workspace-editor-actions.md)
+      * [Workspace Action Menu Items](customizing/extending-overview/extension-types/workspaces/workspace-action-menu-items.md)
       * [Workspace Context](customizing/extending-overview/extension-types/workspaces/workspace-context.md)
       * [Workspace Views](customizing/extending-overview/extension-types/workspaces/workspace-views.md)
+      * [Workspace Footer Apps](customizing/extending-overview/extension-types/workspaces/workspace-footer-apps.md)
     * [Menu](customizing/extending-overview/extension-types/menu.md)
     * [Header Apps](customizing/extending-overview/extension-types/header-apps.md)
     * [Icons](customizing/extending-overview/extension-types/icons.md)

16/umbraco-cms/customizing/extending-overview/extension-types/workspaces/README.md

@@ -1,6 +1,67 @@
 ---
 description: >-
-  An overview of the available extension types related to workspaces.
+  Learn about workspace extension types that provide shared functionality and communication within workspace environments.
 ---
 
 # Extension Types: Workspaces
+
+Workspace extensions provide functionality that operates within specific workspace environments, such as document editing, media management, or member editing. These extensions can communicate through shared workspace contexts to create cohesive, integrated functionality.
+
+## Available Extension Types
+
+Workspace extensions include several types that work together through shared state management:
+
+### 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** manages centralized state using observables that automatically notify subscribers of changes
+2. **Workspace Actions** consume the context to modify state when users interact with buttons or menu items
+3. **Workspace Views** observe context state to automatically update their UI when data changes  
+4. **Footer Apps** 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)
+```
+
+## Getting Started
+
+To create a complete workspace extension system:
+
+1. **Start with a [Workspace Context](workspace-context.md)** to provide shared state management
+2. **Add [Workspace Actions](workspace-editor-actions.md)** for primary user interactions
+3. **Create [Workspace Views](workspace-views.md)** for dedicated editing interfaces
+4. **Include [Footer Apps](workspace-footer-apps.md)** for persistent status information
+5. **Extend actions with [Menu Items](workspace-action-menu-items.md)** for additional functionality
+
+{% 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 %}
+
+## Example Implementation
+
+For a complete working example that demonstrates all workspace extension types working together, see:
+
+{% content-ref url="../../../../../examples/workspace-context-counter/" %}
+[Complete Integration Example](../../../../../examples/workspace-context-counter/)
+{% endcontent-ref %}

16/umbraco-cms/customizing/extending-overview/extension-types/workspaces/workspace-action-menu-items.md

@@ -0,0 +1,151 @@
+---
+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.
+
+## Purpose
+
+Action Menu Items provide:
+- **Secondary actions** that extend primary workspace actions
+- **Grouped functionality** under a single action button
+- **Progressive disclosure** for related operations
+- **Context integration** with workspace state
+
+{% hint style="info" %}
+Action Menu Items are associated with specific Workspace Actions using the `forWorkspaceActions` property.
+{% endhint %}
+
+## 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 select 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 create dropdown menus 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' },
+}
+```
+
+## Use Cases
+
+### Alternative Operations
+Provide different ways to perform related actions:
+```typescript
+// Primary: Quick save
+// Menu: Save and close, Save as template, Save and publish
+```
+
+### Destructive Actions
+Keep dangerous operations in dropdown menus:
+```typescript
+// Primary: Edit
+// Menu: Delete, Archive, Reset
+```
+
+### Context-Specific Options
+Add options that depend on entity state:
+```typescript
+override async execute() {
+	const entityContext = await this.getContext(ENTITY_CONTEXT);
+
+	if (entityContext.isDraft()) {
+		await entityContext.saveAsDraft();
+	} else {
+		await entityContext.saveAndPublish();
+	}
+}
+```
+
+## Best Practices
+
+### Related Functionality
+Only group actions that are logically related to the primary action.
+
+### Clear Labels
+Use descriptive labels that clearly indicate the menu item's purpose.
+
+### Appropriate Ordering
+Use weight to order menu items by importance or frequency of use.
+
+### Context Dependencies
+Always check context availability before performing operations.
+
+{% content-ref url="../../../../../examples/workspace-context-counter/" %}
+[Complete Integration Example](../../../../../examples/workspace-context-counter/)
+{% endcontent-ref %}