diff --git a/src/Umbraco.Web.UI.Client/src/stories/extending/actions.stories.mdx b/src/Umbraco.Web.UI.Client/src/stories/extending/actions.stories.mdx index 53a7274019..90474b912d 100644 --- a/src/Umbraco.Web.UI.Client/src/stories/extending/actions.stories.mdx +++ b/src/Umbraco.Web.UI.Client/src/stories/extending/actions.stories.mdx @@ -3,3 +3,73 @@ import { Meta } from '@storybook/addon-docs'; # Actions + +TODO: introduction to actions + +- **Entity Action:** + Relates to an entity type: (document, media, etc.). Performs the action on a specific item. + +- **Entity Bulk Action:** + Relates to an entity type: document, media, etc. Performs the action on a selection of items. + +- **Workspace Action:** + Relates to a workspace alias (Umb.Workspace.Document). Performs the action on the workspace draft state. + +TODO: graphically show the different types of actions + +### Registering an Entity Action + +TODO: can we show the typescript interface for the manifest? + +```javascript + { + type: 'entityAction', + alias: 'Umb.EntityAction.Document.Trash', + name: 'Trash Document Entity Action', + weight: 10, + meta: { + entityType: 'document', + icon: 'umb:trash', + label: 'Trash', + repositoryAlias: 'Umb.Repository.Documents', + api: UmbTrashEntityAction, + }, +} +``` + +### Api Class + +As part of the manifest you can attach a class that will be instanciated as part of the action. It will have access to the host element, a repository with the given alias and the unique (key etc) of the entity. When the action is clicked the `execute` method on the api class will be run. When the action is completed, an event on the host element will be dispatched to notify any surrounding elements. + +```typescript +import { UmbEntityActionBase } from '..'; +import { UmbExecutedEvent } from '../../../../core/events'; +import { UmbControllerHostInterface } from '@umbraco-cms/controller'; + +export class UmbMyEntityAction extends UmbEntityActionBase { + constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) { + super(host, repositoryAlias, unique); + } + + async execute() { + console.log(`execute for: ${this.unique}`); + await this.repository.method(); + } +} +``` + +If any additional contexts are needed, these can be consumed from the host element: + +```typescript +constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) { + super(host, repositoryAlias, unique); + + new UmbContextConsumerController(this.host, UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { + this.#modalService = instance; + }); +} +``` + +We currently have a couple of generic actions that can be used across silos, so we don't have to write the same logic again: copy, move, trash, delete, etc. We can add more as we discover the needs. + +TODO: List generic actions diff --git a/src/Umbraco.Web.UI.Client/src/stories/extending/extensions.stories.mdx b/src/Umbraco.Web.UI.Client/src/stories/extending/extensions.stories.mdx index 81f23c8643..9a23266e88 100644 --- a/src/Umbraco.Web.UI.Client/src/stories/extending/extensions.stories.mdx +++ b/src/Umbraco.Web.UI.Client/src/stories/extending/extensions.stories.mdx @@ -4,7 +4,7 @@ import { Meta } from '@storybook/addon-docs'; # UI Extensions -Something about the extendable UI +TODO: introduction to the extendable UI The Umbraco Backoffice currently support the following extension types: