Early Adopter's guide to Umbraco v14 - Sections, sidebars and menus

Today in our Umbraco v14 adventures, we are going to look at what it takes to put a custom section, together with a tree down the side.

There is suprising little code it this task. we will save that all for when we do workspaces in a following posts.

As with other posts, the code used in this series is avalible on github https://github.com/KevinJump/TimeDashboard

1. Sections.

Creating a section is actually quite straight forward, there is no typescript required to create a section, they are defined wholy in the manifest.

const sectionManifest : ManifestSection = {
    type: 'section',
    alias: 'time.section',
    name: 'time section',
    weight: 10,
    meta: {
        label: 'Time',
        pathname: 'time'
    }
}

This will add our 'time' section to the main menu, at the end. at the moment weight, seems to go backwards ? the higher the number the further left the item goes, so 10 is low, and it appears at the end.

At this point the section is quite empty.

Add the dashboard

we can add our dashboard to it real quick, by chaning it's condition in the dashboard manifest.

conditions: [
    {
        alias: 'Umb.Condition.SectionAlias',
        match: 'time.section'
    }
]

Now we have something to look at in our section ! .

But most sections have a tree, down the side, so lets add that.

2. SideBar App

Now if you are like me - you probibly haven't been calling the tree on the righthand side of the umbraco backoffice a sidebar app, but in v14 thats what is is called, and the tree, well thats called a menu (i think it might also be called a tree, we will see).

again creating a sidebar app is all configuration at this point.

const sidebarAppManifest : ManifestSectionSidebarApp = {
    type: 'sectionSidebarApp',
    kind: 'menuWithEntityActions',
    alias: 'time.sidebar.app',
    name: 'Sidebar app',
    meta: {
        label: "Time",
        menu: "time.menu"

    },
    conditions: [
        {
            alias: "Umb.Condition.SectionAlias",
            match: "time.section"
        }
    ]   
};

A Sidebar App!

We have defined the sidebar, whats important here is that we get the section right in the conditions array, and our menu 'alias' is the same as our menu (is going to be below).

3. Menu and item(s)

Now we have a sidebar, lets add a menu and some items.

Now if you are doing anything complicated you are going to need some code to go fetch your menu/tree dynamically. but if you just want to have a single item, to hang your settings or dashboards off, you can add the menu and item through config.

Menu

const menuManifest : ManifestMenu = {
    type: 'menu',
    alias: 'time.menu',
    name: 'time sidebar menu',
    meta: {
        label: 'Time'
    }
}

A menu manifest is nice and simple - again if we are consistant with our aliases this will appear on the side of the page.

Menu item

adding a menu item can again be achived via config.

const menuItemManifest  : ManifestMenuItem = {

    type: 'menuItem',

    alias: 'time.menu,item',

    name: 'time menu item',

    meta: {

        label: 'Time Zones',

        icon: 'icon-alarm-clock',

        entityType: '',

        menus: [

            'time.menu'

        ]

    }

}

Result 🎉

At this point we have a sectiom, with a sidebar, and a tree.

• Next time we will look at connecting something upto the menu item with a workspace, and all the things that lets you do!

As with other posts, the code used in this series is avalible on github https://github.com/KevinJump/TimeDashboard

Comments

[Jen Wolke]

Hi Kevin,
Thanks for the series of articles! Very helpful! I'm trying to expand on the Time example and add another menu item at the same level as "Time Zones" and haven't been able to figure out quite the write code to achieve this. Where would a peer of "Time Zones" live in the manifest?