Umbraco CMS 16+ allows you to easily extend the backoffice with just a few lines typescript code. In this post I show you how you can add a JSON content viewer Workspace View for Admin users in the content section.
The idea
Sometimes (when working on one of my products, for example) I'm curious how Umbraco JSON is stored. In previous versions of Umbraco I could intercept the request and checked the JSON. Umbraco 14+ gives me new possibilities to easily extend Umbraco and integrate this in the UI.
The JSON View Workspace
To allow an extra option to be available on the Umbraco Content editor screen we need to create a Workspace View. A Workspace View is nothing more than the screen where you edit content in the content section, display a list of members in the member section etc, basically the view of the current workspace that you are using. You can specify multiple views for a workspace and every view can have a nice icon as shown in the image below where we added our JSON Viewer. In V13 and below we called this a content app. Check the official documentation for all info about Workspace Views
Get the JSON from Umbraco
To get the data from Umbraco we need to consume a context in this case. UMB_DOCUMENT_WORKSPACE_CONTEXT.
Contexts can be compared to services in c# and consuming contexts can be compared to Dependency Injection in c# where consumeContext instructs that we need to use UMB_DOCUMENT_WORKSPACE_CONTEXT.
By consuming the UMB_DOCUMENT_WORKSPACE_CONTEXT we can use the getData that gets the JSON from the current document and use that in our render method to display the result.
This is all needed to display the JSON of the active document.
#data :UmbDocumentDetailModel | undefined;
constructor() {
super();
this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (instance) => {
if(!instance) {return;}
this.#data = instance.getData()
});
}
render() {
return html`
<uui-box headline="Document JSON">
<div>
<pre>${JSON.stringify(this.#data, null, 2)}</pre>
</div>
</uui-box>
`;
}Make the JSON Workspace view available
Ok so now we have a nice Workspace view that can display the current Document JSON. The only thing we need to do now is instruct Umbraco how to use this workspace view. This is done by using a manifest file.
In the sample below I've created a special manifest file dedicated to Workspace Views where I instruct Umbraco where to find my workspace, the label and icon to use, the position in the UI based on weight.
Then I set a condition where I specify that I only want to show this on the Umb.Workspace.Document Workspace (content section). Otherwise it would be added to every workspace.
const workspaceViews: Array<ManifestWorkspaceView> = [
{
type: 'workspaceView',
alias: 'contentinspector.jsonView',
name: 'Json viewer for content inspector',
js: () => import('./jsonview.ts'),
weight: -200,
meta: {
icon: 'icon-script',
pathname: 'temp',
label: 'JSON'
},
conditions: [
{
alias: 'Umb.Condition.WorkspaceAlias',
match: 'Umb.Workspace.Document',
}
],
},
];The result
Once the solution is build you should see the JSON Workspace View added when editing an Umbraco document.
Restrict for admin user
The current manifest only instructs Umbraco to add the Workspace View to the Umb.Workspace.Document workspace. I can imagine that you don't want the JSON View to be displayed to regular content editors. Good to know that conditions can be combined, so when adding an extra condition Umb.Condition.CurrentUser.IsAdmin we instruct Umbraco besides adding to the document workspace that it also only needs to be displayed when the user is logged in as an Administrator.
conditions: [
{
alias: 'Umb.Condition.WorkspaceAlias',
match: 'Umb.Workspace.Document',
},
{
alias: 'Umb.Condition.CurrentUser.IsAdmin'
},
],Try Yourself
If you come from a c# background I can imagine this is a bit hard to follow and you want to play with the bits. The complete solution and trial site can be found on my GitHub.
My experience is that Umbraco 16+(well 15+) is relative easy to extend one you get to know all the concepts and I hope this helps you get started.