umbraco-property-action

Umbraco 属性操作

这是什么？

属性操作是显示在后台属性标签旁的按钮，可为属性编辑器提供辅助功能。点击后会展开并显示可用操作。属性操作让你无需修改现有属性编辑器，就能为其添加辅助功能，适用于快捷操作、转换或上下文相关的操作。

文档

实现前始终获取最新文档：

• 主要文档：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/property-editors/property-actions
• 属性编辑器：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/property-editors
• 基础：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

相关基础技能

• 上下文 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

就是这样！始终获取最新文档，保持示例精简，并生成完整可运行的代码。