Workspace Views
Append a view to any Workspace
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.
Workspace Views are customizable companion tabs with the ability to take place in any workspace.
In Content Section
With Workspace Views, editors can switch from editing 'Content' to accessing contextual information related to the item they are editing.
The default workspace view is 'Info' - displaying Links, History and Status of the current content item.
Example of a Workspace View
Follow the Vite Package Setup by creating a new project folder called "
workspaceview
" inApp_Plugins
.Create a manifest file named
umbraco-package.json
at the root of theworkspaceview
folder. Here we define and configure our workspace view.Add the following code to
umbraco-package.json
:
{
"$schema": "../../umbraco-package-schema.json",
"name": "My workspace",
"version": "0.1.0",
"extensions": [
{
"type": "workspaceView",
"alias": "My.WorkspaceView",
"name": "My Workspace View",
"element": "/App_Plugins/workspaceview/dist/workspaceview.js",
"meta": {
"label": "My Workspace View",
"pathname": "/my-workspace-view",
"icon": "icon-add"
},
"conditions": [
{
"alias": "Umb.Condition.WorkspaceAlias",
"match": "Umb.Workspace.Document"
}
]
}
]
}
Add the following code to the existing
my-element.ts
from thesrc
folder:
import { LitElement, html, customElement, css } from "@umbraco-cms/backoffice/external/lit";
import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
@customElement('my-workspaceview')
export default class MyWorspaceViewElement extends UmbElementMixin(LitElement) {
render() {
return html`
<uui-box headline="Workspace View">
Welcome to my newly created workspace view.
</uui-box>
`
}
static styles = css`
uui-box {
margin: 20px;
}
`
}
declare global {
interface HTMLElementTagNameMap {
'my-workspaceview': MyWorspaceViewElement
}
}
In the workspaceview
folder run npm run build
and then run the project. Then in the content section of the Backoffice you will see our new Workspace View:

Last updated
Was this helpful?