mcpField
U
umbraco-property-action

umbraco-property-action

github.com/umbraco開発27389 回インストール6 週間前に更新
リポジトリ

umbraco-property-action について

umbraco-property-action は、Umbraco バックオフィスでプロパティエディター向けの補助アクションを作る開発者向けスキルです。値の変換やモーダル表示を含む、マニフェストベースの実装を案内します。

主な機能

  1. 01プロパティラベル横へのボタン追加
  2. 02一部または全プロパティエディターを対象化
  3. 03プロパティ値の読み取りと変更
  4. 04アクションからのモーダル表示
  5. 05アクションのマニフェストとクラス生成

活用シーン

  1. 01プロパティエディターへのショートカット追加
  2. 02プロパティの現在値の変換
  3. 03プロパティアクションからのモーダル起動

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-property-action

インストール後、Claude Code で/umbraco-property-actionを入力して読み込まれたか確認します。

詳細

Umbraco プロパティアクション

これは何ですか？

プロパティアクションは、バックオフィスのプロパティラベルの隣に表示されるボタンで、プロパティエディターに副次的な機能を提供します。クリックすると展開され、利用可能なアクションが表示されます。プロパティアクションを使用すると、エディター自体を変更せずに既存のプロパティエディターに補助的な機能を追加できます。ショートカット、変換、コンテキスト固有の操作などに便利です。

ドキュメント

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

関連する Foundation スキル

  • Context API: プロパティコンテキストにアクセスして値を読み取り／変更する場合

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

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

    • 参照スキル: umbraco-modals

ワークフロー

  1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
  2. 質問する - どのプロパティエディターを対象にしますか？どのようなアクションを実行しますか？
  3. ファイルを生成 - 最新のドキュメントに基づいてマニフェストとアクションクラスを作成します
  4. 説明 - 作成された内容とテスト方法を示します

最小限の例

マニフェスト (manifests.ts)
import type { ManifestPropertyAction } from '@umbraco-cms/backoffice/extension-registry';

const manifest: ManifestPropertyAction = {
  type: 'propertyAction',
  alias: 'My.PropertyAction.Clear',
  name: 'Clear Value',
  api: () => import('./clear-action.js'),
  forPropertyEditorUis: ['Umb.PropertyEditorUi.TextBox', 'Umb.PropertyEditorUi.TextArea'],
  meta: {
    icon: 'icon-trash',
    label: 'Clear',
  },
  weight: 100,
};

export const manifests = [manifest];
アクションの実装 (clear-action.ts)
import { UmbPropertyActionBase } from '@umbraco-cms/backoffice/property-action';
import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';

export class ClearPropertyAction extends UmbPropertyActionBase {
  constructor(host: UmbControllerHost, args: any) {
    super(host, args);
  }

  async execute() {
    const propertyContext = await this.getContext(UMB_PROPERTY_CONTEXT);
    propertyContext?.setValue('');
  }
}

export default ClearPropertyAction;
値を変換するアクション
import { UmbPropertyActionBase } from '@umbraco-cms/backoffice/property-action';
import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';

export class UppercasePropertyAction extends UmbPropertyActionBase {
  async execute() {
    const propertyContext = await this.getContext(UMB_PROPERTY_CONTEXT);
    const currentValue = propertyContext?.getValue() as string;

    if (currentValue) {
      propertyContext?.setValue(currentValue.toUpperCase());
    }
  }
}

export default UppercasePropertyAction;
モーダルを使用するアクション
import { UmbPropertyActionBase } from '@umbraco-cms/backoffice/property-action';
import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';

export class PickerPropertyAction extends UmbPropertyActionBase {
  async execute() {
    const propertyContext = await this.getContext(UMB_PROPERTY_CONTEXT);
    const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);

    const modal = modalManager.open(this, MY_PICKER_MODAL, {
      data: {
        currentValue: propertyContext?.getValue(),
      },
    });

    const result = await modal.onSubmit();
    if (result?.value) {
      propertyContext?.setValue(result.value);
    }
  }
}

export default PickerPropertyAction;
すべてのプロパティエディターを対象にする
const manifest: ManifestPropertyAction = {
  type: 'propertyAction',
  alias: 'My.PropertyAction.Copy',
  name: 'Copy to Clipboard',
  api: () => import('./copy-action.js'),
  // Omit forPropertyEditorUis to target all editors
  meta: {
    icon: 'icon-documents',
    label: 'Copy',
  },
};

一般的なプロパティエディター UI エイリアス

  • Umb.PropertyEditorUi.TextBox
  • Umb.PropertyEditorUi.TextArea
  • Umb.PropertyEditorUi.RichText
  • Umb.PropertyEditorUi.Integer
  • Umb.PropertyEditorUi.Decimal
  • Umb.PropertyEditorUi.ContentPicker
  • Umb.PropertyEditorUi.MediaPicker

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

コメント

Markdown 対応