1 of 1

Entity Quick Actions

Entity Quick Actions UI Extension for Umbraco Commerce

Entity Quick Actions allow you to display a button directly in the entity editor screen for important actions that require instant access.

Registering a Quick Action

import { UcManifestEntityQuickAction } from "@umbraco-commerce/backoffice";

export const manifests : UcManifestEntityQuickAction[] = [
    {
        type: 'ucEntityQuickAction',
        kind: 'default',
        alias: 'My.EntityQuickAction.MyQuickAction',
        name: 'My Quick Action Action',
        weight: 300,
        api: () => import('./my-quick-action.api.js'),
        meta: {
            entityType: 'uc:order',
            label: "#quickActions_myQuickAction",
            look: 'primary'
        }
    }
];

extensionRegistry.register(manifests);

Each entry must have a type of ucEntityQuickAction along with a unique alias and name. Unless you wish to override the button, the kind key should be set to default. An api key should be defined that imports the implementation of the UcEntityQuickActionApi interface.

A meta entry provides configuration options for quick actions:

The Entity Quick Action API

In order to define the logic to perform when a quick action button is clicked, you'll need to implement the UcEntityQuickActionApi interface. This interface is defined as

export interface UcEntityQuickActionApi extends UmbApi {
    manifest: UcManifestEntityQuickAction;
    execute(): Promise<void>;
}

This provides quick action implementations with access to the defined manifest and expects the implementation of an execute method to act.

An example implementation would be

// my-quick-action.api.js

import { UcEntityQuickActionApi, UcManifestEntityQuickAction } from "@umbraco-commerce/backoffice";
import { UmbControllerBase } from "@umbraco-cms/backoffice/class-api";

export default class MyEntityQuickActionApi extends UmbControllerBase implements UcEntityQuickActionApi {
    manifest!: UcManifestEntityQuickAction;
    async execute() {
        console.log("You clicked the My Quick Action");
    }
}