How do I add an entity action via the Vite Package Setup?

[nic-pentia (Nicolai)]

Hello everyone,

I have followed the guides Creating your First Extension | Umbraco CMS , Vite Package Setup | Umbraco CMS and successfully get a new dashboard as the guide shows.

Now I want to add an Entity Action in the content tree’s context menu, but none of the examples I can find seem to work. Furthermore the examples seem to be intended for a different approach (I’m guessing added directly into the CMS project).

Does anyone have a working example where an Entity Action is added as an extension/package

Thanks in advance

[nielslyngsoe (Niels Lyngsø)]

Hi Nicolai,

Hopefully someone can share their example of adding a Entity Action.

I can just confirm that the examples in Entity Actions | Umbraco CMS is clearly outdated, I will make sure that gets updated in near future.

Until then, have you looked at the Source Code? The Source Code adds Extensions in the same way as an Extension would do.

So a manifest like this:

{
		type: 'entityAction',
		kind: 'default',
		alias: 'Our.EntityAction.Test',
		name: 'Test Entity Action',
		weight: 500,
		api: () => import('./test.entity-action.js'),
		forEntityTypes: ['document'],
		meta: {
			icon: 'icon-settings',
			label: 'Test action label',
			additionalOptions: true,
		},
	},

With a class like this:

import type { UmbEntityActionArgs } from '@umbraco-cms/backoffice/entity-action';
import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';

export class OurEntityActionTest extends UmbEntityActionBase<never> {
	constructor(host: UmbControllerHost, args: UmbEntityActionArgs<never>) {
		super(host, args);
	}

	override async execute() {
		alert("Hello from test entity action")
	}

}

export { UmbMfaUserEntityAction as api };

Should work, but do notice that I have just freetyled this based on my knowledge and the source code.

[nic-pentia (Nicolai)]

Hello Niels.

Thank you for your swift reply.

The example that you have provided is my challenge in a nutshell. In the source code of the CMS I see a lot of manifest files where the actions are being added in the exact way that you describe.

The problem is though, that to register the action as an extension, the examples tell me to create an umbraco-package.json to register the extension.

{
    "$schema": "../../umbraco-package-schema.json",
    "name": "My Dashboard",
    "version": "0.1.0",
    "extensions": [
        {
            "type": "dashboard",
            "alias": "My.Dashboard.MyExtension",
            "name": "My Dashboard",
            "element": "/App_Plugins/client/client.js",
            "elementName": "my-element",
            "meta": {
                "label": "My Dashboard",
                "pathname": "my-dashboard"
            }
        }
    ]
}

This doesn’t tell me how to hook up the class via the api property that you have in your example.

So it seems that it is two different approaches, and all the examples look like they are just snippets of manifests that can’t directly be translated to umbraco-package.json files.

But maybe I’m just missing some detail here? I just can’t see how I could use the examples as a starting point for an extension.

Hope you or someone can shed some light on this

[nielslyngsoe (Niels Lyngsø)]

I see. Important point and learning for me.

The reason why I dont see that problem is because I know that the ‘api‘ property can be a inline JS-method, like the exmaple above or it can be a string pointing to the file.

So in JSON the above manifest would look like this:

{
		"type": "entityAction",
		"kind": "default",
		"alias": "Our.EntityAction.Test",
		"name": "Test Entity Action",
		"weight": 500,
		"api": "the-aboslute-path/test.entity-action.js",
		"forEntityTypes": ["document"],
		"meta": {
			"icon": "icon-settings",
			"label": "Test action label",
			"additionalOptions": true,
		},
	}

I hope that will work for you.

I think its worth highlighting that writing your manifests in JSON is not the greatest experience.
Your starting point has to be a JSON. But you can use an extension called bundle, which takes a JS file of manifests.

In this way, you will be able to write your manifests in JS.

You can read more about the Bundle type here: Bundle | Umbraco CMS

Then I hope that will enable you to use the source code for inspiration, cause theoretically there should be no difference between what the Core code does and an extension is able to do.

Let me know how that works for you

[nic-pentia (Nicolai)]

Awesome, Niels. I will give that a try

I saw the resemblance between the manifest and the package.json, but I just couldn’t make it work, so hopefully this is the missing link.

As you point out this is not the preferred method, but I just wanted to try a simple example before delving into setting up a visual studio project. (the way I can see is the recommended method)

Thanks again.

[nic-pentia (Nicolai)]

Status update: @nielslyngsoe It totally works. Thank you very much for your help

[nielslyngsoe (Niels Lyngsø)]

Fantastic, thanks for being open for verifiying this draft suggestion

[nic-pentia (Nicolai)]

Oh one small detail if anyone else stumbles upon this…

The export statement has to be changed to “OurEntityActionTest”:

import type { UmbEntityActionArgs } from '@umbraco-cms/backoffice/entity-action';
import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';

export class OurEntityActionTest extends UmbEntityActionBase<never> {
	constructor(host: UmbControllerHost, args: UmbEntityActionArgs<never>) {
		super(host, args);
	}

	override async execute() {
		alert("Hello from test entity action")
	}

}

export { OurEntityActionTest as api };