Macro Parameter Editors
A guide to creating macro property editors in Umbraco
Last updated
A guide to creating macro property editors in Umbraco
Last updated
Macros will be removed in Umbraco 14. Consider using Partial Views or Blocks in Rich Text Editor.
Every macro can contain parameters. Options for the Editor to set when they insert the Macro to customise the output. There are some useful default types. For example:
True/False
TextBox
TextArea
Numeric
Single/Multiple Media Picker
Single/Multiple Content Picker
... and some 'others'
Consult the for general information on Macros.
It is possible to create custom macro parameter types.
To create a custom Macro Parameter Type, first create a custom 'Property Editor' (or copy one from the core). See and in the corresponding for the editor, set the isParameterEditor
property to be true.
'Parameter Editors', unlike 'Property Editors', cannot contain 'prevalues'. This is because there is no UI to present configuration options in the Macro Parameter tab when a particular type is chosen. However using the defaultConfig
option enables the passing of 'one off' default set of configuration for the parameter editor to use:
This is only a problem if you have a macro parameter type that needs to be used on lots of different macros. Each instance may require slightly different configurations.
We'll create an 'Image Position' Macro Parameter type, providing a Radio Button list of options for positioning an image. This image is inserted via an 'Insert Image' Macro into a Rich Text Editor.
The final custom parameter should look like this:
In this example, moving the radio button options into configuration doesn't really add anything. However, to illustrate the concept of providing defaultConfig, let's do that:
The package manifest becomes:
In the ImagePosition.controller.js
we can now read the 'options' values from the defaultConfig
in the package.manifest configuration:
If your custom property editor doesn't load when your project is deployed, you may need to modify your . The minified bundle cache may need to be "busted" to get your new code to load. For example, to bust the cache whenever the app is restarted, you can use this configuration: