Add custom "section" within Context Sidebar menu

Questions
,
1

Hi,
Ive been trying to find a way to add a custom “section” within the Context Sidebar, but not found anything that actually worked. I thought maybe settings “sections” within the manifest file might work but it didnt.

const entityAction: ManifestEntityAction = {
	type: "entityAction",
	kind: "default",
	name: "TP: Copy To Locations : Action",
	alias: "tp.copytolocations.entity.action",
	api: CopyToLocation,
	weight: -100,
	meta: {
		label: "Copy to Locations",
		icon: "icon-pin-location",
		sections: "customSection"
	},

Ideally, I’d like to add something like “Custom Heading” and then below that, I’ll group all the custom actions together.

image
image597×760 49.5 KB

2

There’s no direct way to do that, that I’m aware of but I would create a bunch of entityAction items. The first would be a custom element which would be the title, then the rest would be the actual entity actions you want.

For eg, the first manifest would look like:

const entityActionOne: ManifestEntityAction = {
	type: "entityAction",
	kind: "default",
	name: "TP: Copy To Locations : Action",
	alias: "tp.copytolocations.entity.actionOne",
    element: "yourCustomElement.js"
}

And subsequent would be as you had it:

const entityAction: ManifestEntityAction = {
	type: "entityAction",
	kind: "default",
	name: "TP: Copy To Locations : Action",
	alias: "tp.copytolocations.entity.action",
	api: CopyToLocation,
	weight: -100,
	meta: {
		label: "Copy to Locations",
		icon: "icon-pin-location",
		sections: "customSection"
	}
}

OR you could create one entity action that did the entire group, but you’d have to deal with the rendering of the elements yourself.

For inspiration on your custom element, the trail in the source code leads to the default element for the entityAction being the UmbEntityActionDefaultElement

1 Like
3

Cheers Richard, I like that solution and it makes sense. I’ll see if I can get a chance today to try this and I’ll post an update. :+1:

1 Like
4

Yep Rich is bang on the money, there is no default way of doing this with the built in ‘kind’ for an entityAction, so you need to then implement your own WebComponent element which then you would need to also render out child entity actions, which you could do manually in the same component or you could try to do what the CMS does and use the umb-extension-with-api-slot component to render and filter your specific extensions that perhaps start with a specfic prefix in your alias that starts with OwainWilliam.EnttiyAction. or something.

Anyway happy hacking and look forward to hearing/seeing how you get on.

3 Likes
5

Ended up not needing to do this so it’s now on hold until I have time to play with this on my own :smiley: