umbraco-property-action

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Umbraco Property Action

Umbraco 属性操作

What is it?

什么是属性操作？

Property Actions are buttons that appear next to property labels in the backoffice, providing secondary functionality for property editors. They expand to show available actions when clicked. Property Actions let you add auxiliary features to existing property editors without modifying the editors themselves - useful for shortcuts, transformations, or context-specific operations.

属性操作是出现在后台属性标签旁的按钮，为属性编辑器提供次要功能。点击后会展开显示可用操作。借助属性操作，你无需修改现有属性编辑器本身，就能为其添加辅助功能——这对于快捷操作、内容转换或特定上下文操作非常实用。

Documentation

文档

Always fetch the latest docs before implementing:

Main docs: https://docs.umbraco.com/umbraco-cms/customizing/property-editors/property-actions
Property Editors: https://docs.umbraco.com/umbraco-cms/customizing/property-editors
Foundation: https://docs.umbraco.com/umbraco-cms/customizing/foundation
Extension Registry: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-registry

在实现前请务必获取最新文档：

主文档：https://docs.umbraco.com/umbraco-cms/customizing/property-editors/property-actions
属性编辑器：https://docs.umbraco.com/umbraco-cms/customizing/property-editors
基础框架：https://docs.umbraco.com/umbraco-cms/customizing/foundation
扩展注册表：https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-registry

Related Foundation Skills

Workflow

工作流程

Fetch docs - Use WebFetch on the URLs above
Ask questions - Which property editors to target? What action to perform?
Generate files - Create manifest + action class based on latest docs
Explain - Show what was created and how to test

获取文档 - 使用WebFetch获取上述URL的内容
确认需求 - 确定要针对哪些属性编辑器？要执行什么操作？
生成文件 - 根据最新文档创建清单（manifest）和操作类
说明讲解 - 展示创建的内容以及测试方法

Minimal Examples

最简示例

Manifest (manifests.ts)

清单文件（manifests.ts）

typescript

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];

typescript

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];

Action Implementation (clear-action.ts)

操作实现（clear-action.ts）

typescript

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;

typescript

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;

Action That Transforms Value

值转换操作

typescript

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;

typescript

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;

Action with Modal

带模态框的操作

typescript

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;

typescript

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;

Target All Property Editors

针对所有属性编辑器

typescript

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

typescript

const manifest: ManifestPropertyAction = {
  type: 'propertyAction',
  alias: 'My.PropertyAction.Copy',
  name: 'Copy to Clipboard',
  api: () => import('./copy-action.js'),
  // 省略forPropertyEditorUis以针对所有编辑器
  meta: {
    icon: 'icon-documents',
    label: 'Copy',
  },
};

Common Property Editor UI Aliases

常见属性编辑器UI别名

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

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

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

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

umbraco-property-action

Original

Translation

Umbraco Property Action

Umbraco 属性操作

What is it?

什么是属性操作？

Documentation

文档

Related Foundation Skills

相关基础技能

Workflow

工作流程

Minimal Examples

最简示例

Manifest (manifests.ts)

清单文件（manifests.ts）

Action Implementation (clear-action.ts)

操作实现（clear-action.ts）

Action That Transforms Value

值转换操作

Action with Modal

带模态框的操作

Target All Property Editors

针对所有属性编辑器

Common Property Editor UI Aliases

常见属性编辑器UI别名