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.
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.'
}
});
}
}
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.
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'
}
]
}
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
Top comments (0)