umbraco-collection-action

Umbraco コレクションアクション

これは何ですか？

コレクションアクションは、コレクションのツールバーに表示されるボタンであり、コレクション全体に対して実行できるアクションを提供します（個々のアイテムに対するものではありません。それらはエンティティ一括アクションです）。一般的な例としては、「新規作成」ボタンやエクスポート機能があります。アクションはコードを実行するか、URL に遷移するかのいずれかです。

ドキュメント

実装する前に、常に最新のドキュメントを取得してください：

• メインドキュメント: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/collections
• コレクションビュー: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/collections/collection-view
• 基盤: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
• 拡張機能レジストリ: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry

関連する基盤スキル

• Context API: コレクションコンテキストにアクセスするため

  • 参照スキル: umbraco-context-api

• モーダル: アクションがモーダルダイアログを開く場合

  • 参照スキル: umbraco-modals

• 条件: アクションをいつ表示するかを制御するため

  • 参照スキル: umbraco-conditions

ワークフロー

1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
2. 質問する - どのコレクションですか？どのアクションを実行しますか？遷移しますか、それとも実行しますか？
3. ファイルを生成 - 最新のドキュメントに基づいてマニフェスト + アクションクラスを作成します
4. 説明 - 作成されたものと、そのテスト方法を示します

最小限の例

マニフェスト (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];

アクションの実装 (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;

リンクベースのアクション (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;

モーダル付きのアクション

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;

追加オプションインジケーター付きのアクション

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',
    },
  ],
};

追加オプション付きのアクションクラス

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;

メタプロパティ

プロパティ	説明
label	必須。ボタンのテキスト
href	オプションの静的 URL（動的にする場合は getHref() を使用）
additionalOptions	true の場合、ドロップダウンインジケーターを表示します

条件でよく使用されるコレクションエイリアス

• Umb.Collection.Document
• Umb.Collection.Media
• Umb.Collection.Member
• Umb.Collection.User
• Umb.Collection.DataType

以上です！常に最新のドキュメントを取得し、例は最小限に保ち、完全に動作するコードを生成してください。