Umbraco Property Action

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

Related Foundation Skills

Context API

When accessing property context to read/modify values

Reference skill:

umbraco-context-api

Modals

When the action opens a modal dialog Reference skill: umbraco-modals 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 Minimal Examples Manifest (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 ] ; Action Implementation (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 ; Action That Transforms Value 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 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 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' , } , } ; Common Property Editor UI Aliases 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.