Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@ description: Guide on how to implement Property Actions for Property Editors in

# Property Actions

{% 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 %}

Property Actions are a built-in feature of Umbraco that allows you to add extra functionality to a Property Editor. Think of them as small, secondary actions that you can attach to a property without modifying the editor itself.

Property Actions appear as a small button next to the property label, which expands to show the available actions.
Expand Down
4 changes: 0 additions & 4 deletions 16/umbraco-cms/customizing/workspaces.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
# Workspaces

{% 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 %}

Workspaces provide dedicated editing environments for specific entity types in Umbraco. They create isolated areas where users can edit content, media, members, or other entities with specialized interfaces and functionality.

## Key Concepts
Expand Down
8 changes: 4 additions & 4 deletions 16/umbraco-cms/reference/api-documentation.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ A library of API Reference documentation is auto-generated from the comments wit

C# API references for the Umbraco Core, Infrastructure, Extensions and Web libraries.

### [Umbraco.Cms.Core](https://apidocs.umbraco.com/v15/csharp/api/Umbraco.Cms.Core.html)
### [Umbraco.Cms.Core](https://apidocs.umbraco.com/v16/csharp/api/Umbraco.Cms.Core.html)

### [Umbraco.Cms.Infrastructure](https://apidocs.umbraco.com/v15/csharp/api/Umbraco.Cms.Infrastructure.html)
### [Umbraco.Cms.Infrastructure](https://apidocs.umbraco.com/v16/csharp/api/Umbraco.Cms.Infrastructure.html)

### [Umbraco.Cms.Web](https://apidocs.umbraco.com/v15/csharp/api/Umbraco.Cms.Web.Common.html)
### [Umbraco.Cms.Web](https://apidocs.umbraco.com/v16/csharp/api/Umbraco.Cms.Web.Common.html)

### [Umbraco.Extensions](https://apidocs.umbraco.com/v15/csharp/api/Umbraco.Extensions.html)
### [Umbraco.Extensions](https://apidocs.umbraco.com/v16/csharp/api/Umbraco.Extensions.html)

{% hint style="info" %}
Opens a documentation browser that is different from the documentation section you're viewing now.
Expand Down
5 changes: 3 additions & 2 deletions 16/umbraco-forms/developer/ajaxforms.md
Original file line number Diff line number Diff line change
Expand Up @@ -599,8 +599,9 @@ With [expanded output](https://docs.umbraco.com/umbraco-cms/reference/content-de
}
```

## Dynamic form injection
For dynamic form injection on a page, such as in a modal dialog, there's a specific JavaScript event and API method. This allows reinitializing Umbraco Forms for the new content.
## Dynamic Form Injection

For dynamic Form injection on a page, such as in a modal dialog, there's a specific JavaScript event and API method. This allows reinitializing Umbraco Forms for the new content.

```javascript
// Execute a reinitialize on dynamic injections
Expand Down
3 changes: 3 additions & 0 deletions 17/umbraco-cms/.gitbook.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -146,3 +146,6 @@ redirects:
extending/backoffice-setup/extension-types: customizing/extending-overview/extension-types/README.md
customizing/extending-overview/extension-registry/extension-registry: customizing/extending-overview/extension-registry/register-extensions.md
fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/date: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/date-time-editor/README.md
customizing/extending-overview/extension-types/workspaces/workspace-action-menu-item: customizing/extending-overview/extension-types/workspaces/workspace-action-menu-items.md
customizing/extending-overview/extension-types/workspaces/workspace-footer-app: customizing/extending-overview/extension-types/workspaces/workspace-footer-apps.md

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions 17/umbraco-cms/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,9 @@
* [Trees](customizing/extending-overview/extension-types/tree.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 Footer Apps](customizing/extending-overview/extension-types/workspaces/workspace-footer-apps.md)
* [Workspace Views](customizing/extending-overview/extension-types/workspaces/workspace-views.md)
* [Extension Kind](customizing/extending-overview/extension-kind.md)
* [Extension Conditions](customizing/extending-overview/extension-conditions.md)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,78 @@ Even though these dashboards are useful, you might want to create your own custo

You can try and [create a custom dashboard](../../../tutorials/creating-a-custom-dashboard/) as a way on getting started on this topic.

### Hiding or adding conditional rules to existing dashboards

You might need to hide or add conditions to existing dashboards. Common use cases include hiding the Getting Started dashboard or restricting the Redirect Management dashboard to Admin users only.

To do this, you will first need to [create an extension](../../../tutorials/creating-your-first-extension.md). For this example, which implements dashboard customizations, a descriptive name like `DashboardCustomization` works well:

{% code title="~/App_Plugins/DashboardCustomization/umbraco-package.json" lineNumbers="true" %}
```json
{
"name": "DashboardCustomization",
"version": "1.0.0",
"extensions": [
{
"type": "backofficeEntryPoint",
"alias": "DashboardCustomization.EntryPoint",
"name": "Dashboard Customization Entry Point",
"js": "/App_Plugins/DashboardCustomization/dashboards-setup.js"
}
]
}
```
{% endcode %}

Use the `onInit` function to configure the dashboard removal and customization. The optional `onUnload` function can clean up any customizations when the extension is disposed:

{% code title="~/App_Plugins/DashboardCustomization/dashboards-setup.js" lineNumbers="true" %}
```js
export const onInit = (host, extensionRegistry) => {
// Remove Getting Started dashboard for all users
extensionRegistry.exclude('Umb.Dashboard.UmbracoNews');

// Restrict Redirect Management dashboard to Admin users only
extensionRegistry.appendCondition('Umb.Dashboard.RedirectManagement', {
alias: 'Umb.Condition.CurrentUser.IsAdmin'
});
}

/**
* Optional: Perform cleanup when the extension is unloaded
*/
export const onUnload = (host, extensionRegistry) => {
// Note: In most cases, cleanup is not necessary as the extension registry
// handles this automatically when the backoffice reloads
}
```
{% endcode %}

#### Restricting to specific user groups

To allow multiple user groups (for example, Admin or a custom group), use the `Umb.Condition.CurrentUser.GroupId` condition with the `oneOf` parameter:

{% code title="~/App_Plugins/DashboardCustomization/dashboards-setup.js" lineNumbers="true" %}
```js
export const onInit = (host, extensionRegistry) => {
extensionRegistry.appendCondition('Umb.Dashboard.RedirectManagement', {
alias: 'Umb.Condition.CurrentUser.GroupId',
oneOf: [
'CUSTOM-GROUP-GUID-1-HERE',
'CUSTOM-GROUP-GUID-2-HERE'
]
});
};
```
{% endcode %}

You can find user group GUIDs in the **Users > User Groups** section of the backoffice.

Read more about the available conditions:

{% content-ref url="condition.md" %}
[condition.md](condition.md)
{% endcontent-ref %}
## Registering your Dashboard

This section dives into the Dashboard Extension Manifest, shows how to register one, and append additional details.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,53 @@
---
description: >-
An overview of the available extension types related to workspaces.
Learn about workspace extension types that provide shared functionality and enable 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. This enables coordinated functionality like synchronized actions, real-time status updates, and seamless data flow across the editing interface.

## 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](../../../workspaces.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 Action 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 do not interfere with each other.
{% endhint %}
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
---
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
- **`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
- **`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 a user 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' },
}
```
Loading