Umbraco Collection Action

What is it?

Collection Actions are buttons that appear in a collection's toolbar, providing actions that can be performed on the collection as a whole (not on individual items - those are Entity Bulk Actions). Common examples include "Create New" buttons or export functionality. Actions can either execute code or navigate to a URL.

Documentation

Always fetch the latest docs before implementing:

• Main docs: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/collections

• Collection View: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/collections/collection-view

• Foundation: https://docs.umbraco.com/umbraco-cms/customizing/foundation

• Extension Registry: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-registry

Related Foundation Skills

Context API: For accessing collection context

• Reference skill: umbraco-context-api

Modals: When actions open modal dialogs

• Reference skill: umbraco-modals

Conditions: For controlling when actions appear

• Reference skill: umbraco-conditions

Workflow

• Fetch docs - Use WebFetch on the URLs above

• Ask questions - What collection? What action to perform? Navigate or execute?

• Generate files - Create manifest + action class based on latest docs

• Explain - Show what was created and how to test

Minimal Examples

Manifest (manifests.ts)

import type { ManifestCollectionAction } from '@umbraco-cms/backoffice/extension-registry';

const manifest: ManifestCollectionAction = { type: 'collectionAction', alias: 'My.CollectionAction.Create', name: 'Create Item Action', api: () => import('./create-action.js'), meta: { label: 'Create New', }, conditions: [ { alias: 'Umb.Condition.CollectionAlias', match: 'My.Collection', }, ], };

export const manifests = [manifest];

Action Implementation (create-action.ts)

import { UmbCollectionActionBase } from '@umbraco-cms/backoffice/collection'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';

export class CreateAction extends UmbCollectionActionBase { constructor(host: UmbControllerHost) { super(host); }

async execute() { // Perform the action console.log('Create action executed'); } }

export default CreateAction;

Link-based Action (using getHref)

import { UmbCollectionActionBase } from '@umbraco-cms/backoffice/collection';

export class CreateLinkAction extends UmbCollectionActionBase { async getHref() { // Return URL to navigate to return '/section/my-section/workspace/my-workspace/create'; }

async execute() { // Not called when getHref returns a value } }

export default CreateLinkAction;

Action with Modal

import { UmbCollectionActionBase } from '@umbraco-cms/backoffice/collection'; import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';

export class ExportAction extends UmbCollectionActionBase { async execute() { const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);

const modal = modalManager.open(this, MY_EXPORT_MODAL, {
  data: {
    collectionAlias: 'My.Collection',
  },
});

await modal.onSubmit();

} }

export default ExportAction;

Action with Additional Options Indicator

const manifest: ManifestCollectionAction = { type: 'collectionAction', alias: 'My.CollectionAction.CreateWithOptions', name: 'Create With Options', api: () => import('./create-options-action.js'), meta: { label: 'Create', additionalOptions: true, // Shows indicator that more options are available }, conditions: [ { alias: 'Umb.Condition.CollectionAlias', match: 'Umb.Collection.Document', }, ], };

Action Class with Additional Options

import { UmbCollectionActionBase } from '@umbraco-cms/backoffice/collection';

export class CreateWithOptionsAction extends UmbCollectionActionBase { async hasAdditionalOptions() { return true; }

async execute() { // Show options menu or modal } }

export default CreateWithOptionsAction;

Meta Properties

Property Description

label

Required. Button text

href

Optional static URL (use getHref() for dynamic)

additionalOptions

Shows dropdown indicator if true

Common Collection Aliases for Conditions

• Umb.Collection.Document

• Umb.Collection.Media

• Umb.Collection.Member

• Umb.Collection.User

• Umb.Collection.DataType

That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.