Custom section with trees
# package-development
t
I agree ... So currently I'm just doing a discovery session using v15 and trying to migrate a current production site on v13 to see how much work is involved and what needs to be done and learnt ... not to press on issues that have been mentioned before, but the documentations are not helping. Can anyone assist on a proper way to fully setup a custom section with a custom tree and menu items? I spent a decent amount of time going through and following the current documentations and examples provided in previous conversations but I still could not get there. So far, I managed to have a section setup, the view is rendered, the side bar is rendered with its label but I couldn't crack how to get the menu items part. The docs have a few (what I consider conflicting instructions) from the Menu and Menu Items and the Tree and Tree Items with no clear examples that I could follow. Is it fair to say that v15 is here but is just not ready to fully build a custom experience on it to be ready for v16 and v17? Any assistance will be much appreciated.
j
Anything you see in the backoffice from the core can be replicated in your own package. I agree that the documentation is not there yet, but let me try and see if I can help you along. You say you have a section with a side bar. Would your next step be to show a tree with menu items?
t
Thanks @Jacob Overgaard Yes that is correct, So if we follow what's in the docs here > https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/sections/section-sidebar That's where "what's working" stopped, I have a side bar with a label "My Sidebar Menu", Now I need to have menu items below that with each one of them showing a view when clicked of course. I also managed to have a view that is displayed as soon as you go to the custom section, also following the docs here > https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/sections/section-view The only difference that I created the manifests using TypeScript and vite as recommended in the docs
j
Cool! So you have a sectionSidebarApp registered? And you have set the "kind" property to "menu"?
The next step from that is to add a menu, but I see the link is currently broken on the page. Let me fix that first and find the right link for you
So you want to have a sectionSidebarApp registered with
kind: "menu"
. In the meta object you want to set
"menu": "My.Menu"
and lastly, you want to register the menu itself with the same alias:
Copy code
{
        type: 'menu',
        alias: 'My.Menu',
        name: 'My Menu',
    }
t
Right, I did follow that article actually. I'll add the manifest again as I follow
j
Then in order to add items to that menu, you want to use the menuItem type, which also have a few different kinds; it can show a tree underneath itself or it can be a link directly. To make it a link, i.e. to link to a section view, you could do something like this:
Copy code
js
    {
        type: 'menuItem',
        alias: 'Umb.MenuItem.MyMenuItem',
        name: 'My Menu Item',
        weight: 100,
        meta: {
            label: 'Click me',
            icon: 'icon-globe',
            entityType: 'section-view-alias',
            menus: ['My.Menu'],
        },
    }
The important things are "entityType" which would be what is added to the path when clicking the item, i.e. the section view, and "menus", which should have the alias(es) of the menu(s) where the item should be shown within.
t
Ok great, rebuilding and relaunching now
@Jacob Overgaard mate that is awesome! thank you so much. That definitely worked. I think what confused me is the part in the docs about the custom menuItems element.
j
Yeah, I totally get what you mean. That confused me as well just now. That is definitely optional and only if you are not happy with the default structure or, say, you want to customize the links to something completely different, or maybe you want to load in menu items from the outside world.
t
I see ... 100% useful too, maybe we just need to state that in the docs when they get updated I have one last question if you don't mind. In previous versions, the top level item (The title of the tree in this case "My Sidebar Menu") when clicked, they show the "landing view/dashboard" set for the section, so this is where the custom menuitem perhaps comes in play? or can we do that directly from the manifest?
j
There is a discussion around that very subject on Github. The default sidebar sections in Umbraco will not let you click to go to anything like they would before. That is a conscious choice, albeit controversial to some. You could definitely add that functionality by providing your own "element" to the "sectionSidebarApp" manifest.
You could extend that and override the method renderHeader()
t
Thanks @Jacob Overgaard I really appreciate the time you took to assist with this. And to be honest I like the choice that they're not clickable anymore by default, I was trying to achieve that in the past with C# but wasn't a viable solution. I always thought that it is kind of a dead link. All in all, I can't thank you enough.
j
Thank you for pointing out the lack of documentation in this area as well. I fixed the broken link just now, but we need to make it a lot clearer obviously. Cheers!
12 Views