Early Adopter's guide to Umbraco v14 - Actions

Historically there have been a number of ways to customize what an editor could do while on a content page, the action menu. allows you to add extra commands for almost anything in umbraco v13.

Umbraco 13 Actions menu — Umbraco 13 action menu

As with other posts, the code used in this series is avalible on github https://github.com/KevinJump/TimeDashboard

Entity Actions

You can still add to the actions menu, by creating an entity action.

const entityAction: ManifestEntityAction = {
    type: 'entityAction',
    alias: 'time.entity.action',
    name: 'tell me the time action',
    weight: -100,
    api: TimeEntityAction,
    meta: {
        icon: 'icon-alarm-clock',
        label: 'time action',
        repositoryAlias: UMB_DOCUMENT_REPOSITORY_ALIAS,
        entityTypes: [UMB_DOCUMENT_ENTITY_TYPE]
    }
}

Exending UmbEntityActionBase

The only real requirement of our actions menu item is that it provides an async execute() method, to be called, but you are probibly going to want a bit of context as to where you are being called from. inheriting from the UmbEntityActionBase class gives you that.

A quick example that fires a notification when your button is pressed.

export class TimeEntityAction extends UmbEntityActionBase<UmbDocumentRepository> {
    #notificationContext? : UmbNotificationContext;

    constructor(host: UmbControllerHostElement, 
        repositoryAlias: string, unique: string, entityType: string) {
            super(host, repositoryAlias, unique, entityType);

            this.consumeContext(UMB_NOTIFICATION_CONTEXT_TOKEN, (instance) => {
                this.#notificationContext = instance;
            });
        }

    async execute() {
        this.#notificationContext?.peek('warning', {
            data: {
                headline: 'A thing has happened !',
                message: 'What that thing is? only time will tell.'
            }
        });
    }
}

Our v14 entity action — Umbraco 14, with our time action added

Workspace Actions

New in Umbraco v14 and saving us from some quite nasty scope traversal hacks in Angular. Workspace Actions let you customize the buttons in the footer of an item.

footer buttons — Workspace actions go in the bottom

Workspace actions are very similar to entityActions.

const action : ManifestWorkspaceAction = {
    type: 'workspaceAction',
    alias: 'time.workspace.action',
    name: 'time workspace action',
    api: TimeAction,
    meta: {
        label: 'Time Action',
        look: 'primary',
        color: 'default',
    },
    conditions: [
        {
            alias: 'Umb.Condition.WorkspaceAlias',
            match: 'Umb.Workspace.Document'
        }
    ]
}