Early Adopter's guide to Umbraco v14 - Actions
Published: 2024-02-05 21:19:55

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjhroxotswlg5w9ostdr.png)
<figcaption>Umbraco 13 action menu</figcaption>

> **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. 

```ts
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. 

```ts
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckq2w5bvaqxpjlwhhuu9.png)
<figcaption>Umbraco 14, with our time action added</figcaption>

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdb4f3yyzeg2riy0sdqv.png)
<figcaption>Workspace actions go in the bottom</figcaption>

Workspace actions are very similar to entityActions. 

```ts
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'
        }
    ]
}
```

The difference is you the exted the `UmbWorkspaceActionBase` class with your action.


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