This series is now quite old! a lot of the code targets Umbraco v14, and isn't quite right. I am currently writing a new 'Battle scarred developer's guide to Umbraco v17` and that replaces most of the content in these posts you should head over there for more up to date and experience driven content.
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.
ts
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.
ts
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.
`ts
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
`ts
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.
ts
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
Top comments (1)
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?