|
1 | | ---- |
2 | | - |
3 | | - |
4 | | ---- |
5 | | - |
6 | 1 | # Declaring your property editor |
7 | 2 |
|
8 | 3 | Generally Umbraco supports two different ways to declare a property editor. Most commonly one would create a `package.manifest` file, and then use it for declaring one or more property editors. But as an alternative, property editors can also be declared using C#. |
9 | 4 |
|
10 | 5 | A property editor consists of a number of mandatory properties, and some optional ones as well. As such, the outer JSON object for the property editor has the following properties: |
11 | 6 |
|
12 | | -| Name | Type | Required | Description | |
13 | | -| ---- | ---- | ---- | ---- | |
14 | | -| `alias` | string | Yes | A unique alias that identifies the property editor. | |
15 | | -| `name` | string | Yes | The friendly name of the property editor, shown in the Umbraco backoffice. | |
16 | | -| `editor` | object | Yes | This describes details about the editor. See the table below for further information. | |
17 | | -| `icon` | string | No | A CSS class for the icon to be used in the **Select Editor** dialog - eg: `icon-autofill`. | |
18 | | -| `group` | string | No | The group to place this editor in within the **Select Editor** dialog. Use a new group name or alternatively use an existing one such as **Pickers**. | |
19 | | -| `isParameterEditor` | boolean | No | Enables the property editor as a macro parameter editor. Can be either `true` or `false` (default). | |
20 | | -| `defaultConfig` | object | No | Provides a collection of default configuration values, in cases the property editor is not configured or is used a parameter editor (which doesn't allow configuration). The object is a key/value collection and must match the prevalue fields keys. | |
| 7 | +| Name | Type | Required | Description | |
| 8 | +| ------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | |
| 9 | +| `alias` | string | Yes | A unique alias that identifies the property editor. | |
| 10 | +| `name` | string | Yes | The friendly name of the property editor, shown in the Umbraco backoffice. | |
| 11 | +| `editor` | object | Yes | This describes details about the editor. See the table below for further information. | |
| 12 | +| `icon` | string | No | A CSS class for the icon to be used in the **Select Editor** dialog - eg: `icon-autofill`. | |
| 13 | +| `group` | string | No | The group to place this editor in within the **Select Editor** dialog. Use a new group name or alternatively use an existing one such as **Pickers**. | |
| 14 | +| `isParameterEditor` | boolean | No | Enables the property editor as a macro parameter editor. Can be either `true` or `false` (default). | |
| 15 | +| `defaultConfig` | object | No | Provides a collection of default configuration values, in cases the property editor is not configured or is used a parameter editor (which doesn't allow configuration). The object is a key/value collection and must match the prevalue fields keys. | |
21 | 16 |
|
22 | 17 | The `editor` object then has the following properties: |
23 | 18 |
|
24 | | -| Name | Type | Required | Description | |
25 | | -| ---- | ---- | ---- | ---- | |
26 | | -| `view` | string | Yes | This is the full path to the HTML view for your property editor. | |
27 | | -| `hideLabel` | bool | Yes | If set to `true`, this hides the label for the property editor when used in Umbraco on a Document Type. | |
28 | | -| `valueType` | object | No | This is the type of data you want your property editor to save to Umbraco. Possible values are `STRING`, `JSON`, `DATETIME`, `TEXT` and `INT`. Default is `STRING`. | |
29 | | -| `validation` | object | No | Object describing required validators on the editor. | |
30 | | -| `isReadOnly` | boolean | No | If set to true this makes the property editor read only. | |
| 19 | +| Name | Type | Required | Description | |
| 20 | +| ------------ | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 21 | +| `view` | string | Yes | This is the full path to the HTML view for your property editor. | |
| 22 | +| `hideLabel` | bool | Yes | If set to `true`, this hides the label for the property editor when used in Umbraco on a Document Type. | |
| 23 | +| `valueType` | object | No | This is the type of data you want your property editor to save to Umbraco. Possible values are `STRING`, `JSON`, `DATETIME`, `TEXT` and `INT`. Default is `STRING`. | |
| 24 | +| `validation` | object | No | Object describing required validators on the editor. | |
| 25 | +| `isReadOnly` | boolean | No | If set to true this makes the property editor read only. | |
31 | 26 |
|
32 | 27 | ## Using a Package Manifest |
33 | 28 |
|
@@ -163,24 +158,23 @@ Also notice how the `PropertyEditorAsset` attribute is used to load the `SirTrev |
163 | 158 |
|
164 | 159 | The [DataEditor](https://apidocs.umbraco.com/v10/csharp/api/Umbraco.Cms.Core.PropertyEditors.DataEditorAttribute.html) attribute shown in the example above is the primary component to declaring the property editor in C#. Notice that the first four properties must be set through the constructor. |
165 | 160 |
|
166 | | -| Name | Type | Required | Description | |
167 | | -|----------------| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | |
168 | | -| `Alias` | string | Yes | Gets the unique alias of the editor. | |
| 161 | +| Name | Type | Required | Description | |
| 162 | +| -------------- | --------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------- | |
| 163 | +| `Alias` | string | Yes | Gets the unique alias of the editor. | |
169 | 164 | | `EditorType` | [EditorType](https://apidocs.umbraco.com/v10/csharp/api/Umbraco.Cms.Core.PropertyEditors.EditorType.html) | Yes | Gets the type of the editor. Possible values are `EditorType.PropertyValue`, `EditorType.MacroParameter` or `EditorType.Nothing`. | |
170 | | -| `Name` | string | Yes | Gets the friendly name of the editor. | |
171 | | -| `View` | string | Yes | Gets the view to use to render the editor. | |
172 | | -| `ValueType` | string | No | Gets or sets the type of the edited value. | |
173 | | -| `HideLabel` | boolean | No | Gets or sets a value indicating whether the editor should be displayed without its label. | |
174 | | -| `Icon` | string | No | Gets or sets an optional icon. | |
175 | | -| `Group` | string | No | Gets or sets an optional group. | |
176 | | -| `IsDeprecated` | boolean | No | Gets or sets a value indicating whether the value editor is deprecated. | |
| 165 | +| `Name` | string | Yes | Gets the friendly name of the editor. | |
| 166 | +| `View` | string | Yes | Gets the view to use to render the editor. | |
| 167 | +| `ValueType` | string | No | Gets or sets the type of the edited value. | |
| 168 | +| `HideLabel` | boolean | No | Gets or sets a value indicating whether the editor should be displayed without its label. | |
| 169 | +| `Icon` | string | No | Gets or sets an optional icon. | |
| 170 | +| `Group` | string | No | Gets or sets an optional group. | |
| 171 | +| `IsDeprecated` | boolean | No | Gets or sets a value indicating whether the value editor is deprecated. | |
177 | 172 |
|
178 | 173 | ### PropertyEditorAsset attribute |
179 | 174 |
|
180 | 175 | As shown in the C# example, the [PropertyEditorAsset](https://apidocs.umbraco.com/v10/csharp/api/Umbraco.Cms.Infrastructure.WebAssets.PropertyEditorAssetAttribute.html) attribute was used to make Umbraco load the specified JavaScript file. |
181 | 176 |
|
182 | | -The constructor of the attribute takes the type of the assets as the first parameter. |
183 | | -Possible values are either `AssetType.Javascript` or `AssetType.Css`. The second parameter is the URL of the asset. |
| 177 | +The constructor of the attribute takes the type of the assets as the first parameter. Possible values are either `AssetType.Javascript` or `AssetType.Css`. The second parameter is the URL of the asset. |
184 | 178 |
|
185 | 179 | ### DataEditor class |
186 | 180 |
|
@@ -294,13 +288,11 @@ A benefit of this approach (opposed to `package.manifest` files) is that we can |
294 | 288 | } |
295 | 289 | ``` |
296 | 290 |
|
297 | | -Both instances of `IDataType` and `PublishedDataType` have a `Configuration` property. |
298 | | -When looking across all data types and property editors, there is no common type for the configuration, so the return value is `object`. |
299 | | -To get the strongly typed model, you can either cast the configuration value on your own, or use the generic `ConfigurationAs` extension method as shown above. |
| 291 | +Both instances of `IDataType` and `PublishedDataType` have a `Configuration` property. When looking across all data types and property editors, there is no common type for the configuration, so the return value is `object`. To get the strongly typed model, you can either cast the configuration value on your own, or use the generic `ConfigurationAs` extension method as shown above. |
300 | 292 |
|
301 | 293 | Like mentioned before, the `SirTrevorConfigurationEditor` class doesn't really do much in this example with the Sir Trevor property editor. But the **Multi Node Tree Picker** and others of Umbraco's build in property editors also override the `ToValueEditor` method. |
302 | 294 |
|
303 | | -This method is used when the strongly typed configuration value is converted to the model used by the Angular logic in the backoffice. So with the implementation of the [MultiNodePickerConfigurationEditor]( https://github.com/umbraco/Umbraco-CMS/blob/ade9bb73246caf25a7073f2b9e5262641a201863/src/Umbraco.Web/PropertyEditors/MultiNodePickerConfigurationEditor.cs) class, some additional configuration fields are sent along. For instance that it's a multi picker and that the ID type should be URI's. These are configuration values that the user should not be able to edit, but the property editor may still rely on them. |
| 295 | +This method is used when the strongly typed configuration value is converted to the model used by the Angular logic in the backoffice. So with the implementation of the [MultiNodePickerConfigurationEditor](https://github.com/umbraco/Umbraco-CMS/blob/ade9bb73246caf25a7073f2b9e5262641a201863/src/Umbraco.Web/PropertyEditors/MultiNodePickerConfigurationEditor.cs) class, some additional configuration fields are sent along. For instance that it's a multi picker and that the ID type should be URI's. These are configuration values that the user should not be able to edit, but the property editor may still rely on them. |
304 | 296 |
|
305 | 297 | ```csharp |
306 | 298 | using Umbraco.Cms.Core.IO; |
|
0 commit comments