Creating a custom Section View

In this section, you can learn how to register and create a custom Section View for the Umbraco backoffice.

Manifest

The manifest file can be created using either JSON or Typescript. Both methods are shown below.

{
	"type": "sectionView",
	"alias": "My.SectionView",
	"name": "My Section View",
	"element": "./my-section.element.js",
	"meta": {
		"label": "My View",
		"icon": "icon-add",
		"pathname": "my-view"
	},
	"conditions": [
		{
			"alias": "Umb.Condition.SectionAlias",
			"match": "My.Section",
		}
	]
}

import { ManifestSectionView } from "@umbraco-cms/backoffice/extension-registry";

const sectionViews: Array<ManifestSectionView> = [
    {
        type: "sectionView",
        alias: "My.SectionView",
        name: "My Section View",
        element: () => import('./my-section.element.ts'),
        meta: {
            label: "My View",
            icon: "icon-add",
			pathname: "my-view",
        },
        conditions: [
            {
                alias: 'Umb.Condition.SectionAlias',
				match: 'My.Section',
            }
        ]
    }
]

Lit Element

Creating the Section View Element using a Lit Element.

my-section.element.ts:

import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';

@customElement('my-sectionview-element')
export class MySectionViewElement extends UmbLitElement {

    render() {
        return html`
            <uui-box headline="Sectionview Title goes here">
                Sectionview content goes here
            </uui-box>
        `
    }

    static override styles = [
        css`
			:host {
				display: block;
                padding: 20px;
			}
		`,
    ];

}

export default MySectionViewElement;

declare global {
    interface HTMLElementTagNameMap {
        'my-sectionview-element': MySectionViewElement;
    }
}

The Umbraco backoffice consists of Sections. Section is the main division shown in the top navigation.

For example, when you load the backoffice, you'll see the 'Content' section, 'Settings' section, and so on.

You can create your own sections to extend Umbraco with room for more features.

Creating a section

Manifests

When creating a new section it's recommended to use a Entry Point-extension in your Umbraco Package Manifest. This is to get better control over all the additional extensions required for the new section.

Create a section by defining a manifest for it:

{
 "type": "section",
 "alias": "My.Section",
 "name": "My Section",
 "meta": {
  "label": "My.Section",
  "pathname": "my-section"
 }
}

Once registered, you will be able to select this action for your User Group Permissions. Once that is permitted, you can view your section.

Extend with Sidebar, Dashboards and more

Once a section is registered, it can be extended like any other section.

Here is a list of appropriate extensions to append to your section:

• Creating a Custom Dashboard

• Section Sidebar

• Section View

Manifest with empty element

If you prefer full control over the content of your section you can choose to define an element for the content of your section.

If you like to have full control, you can define an element like this:

const section : ManifestSection = {
    type: "section",
    alias: "Empty.Section",
    name : 'Empty Section',
    element : () => import('./empty-section.element.js'),
    meta : {
        label : 'Empty Section',
        pathname : 'empty-section'
    }
}

The element file must have an element or default export, or specify the element name in the elementName field.

Section Sidebar Apps

Manifest

Default Element

Menu Sidebar App

Sidebar Menu:

• The Backoffice comes with a menu sidebar app that can be used to create a menu in the sidebar.

• To register a new menu sidebar app, add the following to your manifest

• The menu sidebar app will reference a menu that you have registered in the menu with a menu manifest

Manifest

Default Element

Adding Items to an existing menu

This will make it possible to compose a sidebar menu from multiple Apps: