You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 16/umbraco-cms/customizing/property-editors/property-actions.md
+46-88Lines changed: 46 additions & 88 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,104 +8,62 @@ description: Guide on how to implement Property Actions for Property Editors in
8
8
This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
9
9
{% endhint %}
10
10
11
-
Property Actions are a built-in feature that provide a generic place for secondary functionality for property editors.
11
+
Property Actions are a built-in feature of Umbraco that allows you to add extra functionality to a Property Editor. Think of them as small, secondary actions that you can attach to a property without modifying the editor itself.
12
12
13
-
Property Actions appear as a small button next to the label of the property, which expands to show the available actions. They are defined and implemented in the Property Editor, making it open as to what a Property Action is.
13
+
Property Actions appear as a small button next to the property label, which expands to show the available actions.
14
14
15
-
## Data Structure of Property Actions
15
+
## Property Actions in the UI
16
16
17
-
Property Actions are an array of objects defining each action. An action is defined by the following properties:
<figcaption><p><strong>Property action in Block List</strong></p></figcaption>
20
+
</figure>
18
21
19
-
```js
20
-
{
21
-
labelKey:'clipboard_labelForRemoveAllEntries',
22
-
labelTokens: [],
23
-
icon:'trash',
24
-
method: removeAllEntries,
25
-
isDisabled:true
26
-
}
27
-
```
28
-
29
-
We use `labelKey` and `labelTokens` to retrieve a localized string that is displayed as the Actions label. [See localization for more info.](../../extending/language-files/)
30
-
31
-
`isDisabled` is used to disable an Action, which change the visual appearance and prevents interaction. Use this option when an action wouldn't provide any change. In the example above, the action `remove all entries` would not have any impact if there is no entries.
32
-
33
-
## Implementation
34
-
35
-
The implementation of Property Actions varies depending on whether your Property Editor is implemented with a Controller or as a Component.
36
-
37
-
### Controller Implementation
38
-
39
-
When your Property Editor is implemented with a Controller, use the following approach for the Property Action:
40
-
41
-
```js
42
-
angular.module("umbraco").controller("My.MarkdownEditorController", function ($scope) {
43
-
44
-
functionmyActionExecutionMethod() {
45
-
alert('My Custom Property Action Clicked');
46
-
// Disable the action so it can not be re-run
47
-
// You may have custom logic to enable or disable the action
48
-
// Based on number of items selected etc...
49
-
myAction.isDisabled=true;
50
-
};
51
-
52
-
var myAction = {
53
-
labelKey:'general_labelForMyAction',
54
-
labelTokens: [],
55
-
icon:'action',
56
-
method: myActionExecutionMethod,
57
-
isDisabled:false
58
-
}
22
+
## Registering a Property Action
59
23
60
-
var propertyActions = [
61
-
myAction
62
-
];
24
+
{% hint style="info" %}
25
+
Before creating a Property Action, make sure you are familiar with the [Extension Registry in Umbraco](https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-registry/extension-registry).
Here is how you can register a new Property Action:
29
+
```
30
+
import { extensionRegistry } from '@umbraco-cms/extension-registry';
31
+
import { MyEntityAction } from './my-property-action.api';
32
+
const manifest =
33
+
{
34
+
type: 'propertyAction',
35
+
kind: 'default',
36
+
alias: 'My.propertyAction',
37
+
name: 'My Property Action ',
38
+
forPropertyEditorUis: ["my-property-editor"], // Target specific property editors
39
+
api: () => import('./my-property-action.api.js'),
40
+
weight: 10, // Order if multiple actions exist
41
+
meta: {
42
+
icon: 'icon-add', // Icon to display in the UI
43
+
label: 'My property action', // Label shown to editors
67
44
}
68
-
};
69
-
45
+
};
70
46
71
-
});
47
+
extensionRegistry.register(manifest);
72
48
```
49
+
### Creating the Property Action Class
73
50
74
-
### Component Implementation
51
+
Every Property Action needs a class that defines what happens when the action is executed.
52
+
You can extend the `UmbPropertyActionBase` class for this.
75
53
76
-
Follow this guide if your Property Editor is implemented as a Component. The Component must be configured to retrieve an optional reference to `umbProperty`. The requirement must be optional because property-editors are implemented in scenarios where it's not presented.
See the following example for implementation of Property Actions in a Component, notice the difference is that we are parsing actions to `this.umbProperty.setPropertyActions(...)`.
92
-
93
-
```js
94
-
var myAction = {
95
-
labelKey:'general_labelForMyAction',
96
-
labelTokens: [],
97
-
icon:'action',
98
-
method: myActionExecutionMethod,
99
-
isDisabled:false
55
+
import { UmbPropertyActionBase } from '@umbraco-cms/backoffice/property-action';
56
+
import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
57
+
58
+
export class MyPropertyAction extends UmbPropertyActionBase {
59
+
// The execute method is called when the user triggers the action.
0 commit comments