Section

A guide to creating a section

This page is a work in progress. It will be updated as the software evolves.

The Umbraco backoffice consists of Sections, also referred to as Applications, which contain Trees.

Each section is shown in the top navigation ribbon of the Umbraco Backoffice.

For example, when you load the backoffice, you'll see that the 'Content' section contains one tree: the content tree. Meanwhile, the 'Settings' section contains several trees such as Stylesheets, Document Types, Media Types, and so on.

You can create your own sections and trees to extend Umbraco.

Section

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.

1. In the manifest file add the following:

{
  "$schema": "../../umbraco-package-schema.json",
  "name": "My Custom Section",
  "extensions": [
    {
      "name": "My Custom Section",
      "type": "entryPoint",
      "alias": "My.EntryPoint",
      "js": "/App_Plugins/tree/dist/tree.js"
    }
  ]
}

2. Then in the element typescript file add the following:

import { ManifestSection, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';

const sectionManifest: ManifestSection = {
    type: 'section',
    alias: 'My.Section',
    name: 'My Section',
    meta: {
        label: 'My Section',
        pathname: 'my-section'
    }
}

umbExtensionsRegistry.register(sectionManifest);

Then you will see your section:

Section

Manifest with empty element

If you prefer a clean section you can use an element with a default export, and load the 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'
    }
}

If you pass an element like this, the default behavior of loading dashboards and sectionViews will be disabled.

Default Element

// TODO: get interface
interface UmbSectionElement {}

The Section Context

Interface

// TODO: get interface
interface UmbSectionContext {}

Examples of sections:

TODO: link to all sections in storybook. Can we somehow auto-generate this list?