{
- type: 'workspaceView',
- name: 'Example Counter Workspace View',
- alias: 'example.workspaceView.counter',
- element: () => import('./example-workspace-view.js'),
- weight: 900,
- meta: {
- label: 'Counter',
- pathname: 'counter',
- icon: 'icon-lab',
- },
- conditions: [
- {
- alias: UMB_WORKSPACE_CONDITION_ALIAS,
- match: 'Umb.Workspace.Document',
- },
- ],
+### In Workspace Views
+
+```typescript
+export class MyWorkspaceView extends UmbElementMixin(LitElement) {
+ constructor() {
+ super();
+ this.consumeContext(MY_WORKSPACE_CONTEXT, (context) => {
+ this.observe(context.data, (data) => this.requestUpdate());
+ });
+ }
}
-
Workspace Actions
import { extensionRegistry } from '@umbraco-cms/extension-registry';
-import { MyWorkspaceAction } from './my-workspace-action';
+- Actions execute when clicked
+- Can be async for complex operations
+- Have access to workspace state during execution
+- Can modify workspace contexts
-const manifest = {
- type: 'workspaceAction',
- alias: 'My.WorkspaceAction',
- name: 'My Workspace Action',
- api: MyWorkspaceAction,
- meta: {
- label: 'My Action',
- },
- conditions: [
- {
- alias: 'Umb.Condition.WorkspaceAlias',
- match: 'My.Workspace',
- },
- ],
-};
+### Conditional Execution
-extensionRegistry.register(manifest);
-
+
+ `;
+ }
+
+ #getStatusIcon() {
+ switch (this.status) {
+ case 'saved': return 'check';
+ case 'draft': return 'edit';
+ case 'error': return 'alert';
+ default: return 'hourglass';
+ }
+ }
+}
+```
+
+### Live Counters
+```typescript
+@customElement('word-count-footer-app')
+export class WordCountFooterApp extends UmbElementMixin(LitElement) {
+ @state()
+ private wordCount = 0;
+
+ constructor() {
+ super();
+ this.consumeContext(CONTENT_CONTEXT, (context) => {
+ this.observe(context.content, (content) => {
+ this.wordCount = this.#countWords(content);
+ });
+ });
+ }
+
+ #countWords(content: string): number {
+ return content.trim().split(/\s+/).filter(word => word.length > 0).length;
+ }
+
+ override render() {
+ return html`${this.wordCount} words`;
+ }
+}
+```
+
+### Validation Summary
+```typescript
+@customElement('validation-footer-app')
+export class ValidationFooterApp extends UmbElementMixin(LitElement) {
+ @state()
+ private errorCount = 0;
+
+ @state()
+ private warningCount = 0;
+
+ constructor() {
+ super();
+ this.consumeContext(VALIDATION_CONTEXT, (context) => {
+ this.observe(context.errors, (errors) => {
+ this.errorCount = errors.filter(e => e.severity === 'error').length;
+ this.warningCount = errors.filter(e => e.severity === 'warning').length;
+ });
+ });
+ }
+
+ override render() {
+ if (this.errorCount === 0 && this.warningCount === 0) {
+ return html`✓ Valid`;
+ }
+
+ return html`
+
+ ${this.errorCount > 0 ? html`${this.errorCount} errors` : ''}
+ ${this.warningCount > 0 ? html`${this.warningCount} warnings` : ''}
+
+ `;
+ }
+}
+```
+
+## Best Practices
+
+### Performance
+Keep footer apps lightweight for responsive workspace interaction.
+
+### Information Density
+Display only essential information. Footer space is limited.
+
+### Context Dependencies
+Always check that the context is available before accessing its properties.
+
+### Responsive Design
+Ensure footer apps work across different workspace sizes.
+
+### Visual Consistency
+Use Umbraco's design system for consistent styling.
diff --git a/17/umbraco-cms/customizing/extending-overview/extension-types/workspaces/workspace-views.md b/17/umbraco-cms/customizing/extending-overview/extension-types/workspaces/workspace-views.md
index 9c21aacd57c..da55deddea3 100644
--- a/17/umbraco-cms/customizing/extending-overview/extension-types/workspaces/workspace-views.md
+++ b/17/umbraco-cms/customizing/extending-overview/extension-types/workspaces/workspace-views.md
@@ -1,100 +1,287 @@
---
-description: Append a view to any Workspace
+description: >-
+ Learn how to create workspace views that provide tab-based content areas for organizing different aspects of entity editing.
---
# Workspace Views
-{% hint style="warning" %}
-This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
-{% endhint %}
+Workspace Views provide tab-based content areas within workspaces, allowing you to organize different aspects of entity editing into focused interfaces. They appear as tabs alongside the default content editing interface.
{% hint style="info" %}
-Workspace Views was previously called Content Apps.
+Workspace Views were previously called Content Apps in earlier versions of Umbraco.
{% endhint %}
-Workspace Views are customizable companion **tabs** with the ability to take place in any workspace.
-
-
Workspace Views
Workspace Views
Counter Example
+Current count value: ${this.count}
+This workspace view consumes the Counter Context and displays the current count.
+
Workspace View Example
-
+
- Name +
- ${entity?.name} +
- Created +
- ${entity?.createDate} +
+
+
+ ${this.analytics.pageViews}
+ Page Views
+
+ 
+ Property action in Block List
Workspace
.png)
Use the "Rebuild index" button under Tools on the Examine Management dashboard in the Settings section.
Click the DeliveryAPIContentIndex on the Examine Management dashboard in the Settings section.
Use the "Rebuild index" button in the DeliveryAPIContentIndex under Tools on the Examine Management dashboard in the Settings section.
Setup @provider.ProviderName
+Scan the code above with your authenticator app
and enter the resulting code here to validate:
Setup @providerName
-Scan the code above with your authenticator app
and enter the resulting code here to validate: