Creating a custom editor in EPiServer 7
It’s worth mentioning that we have a legacy editor that wraps any custom editors written for EPiServer 5-6 inside an iframe in a pop-up so any custom editors you have written will still work, although they require an additional click to edit.
General goals with the new editing system
Before going into the details of how to create a custom editor I would like to state few of the goals when developing the new object editing system:
- Make a generic editing system that can be reused for all EPiServer products and functions.It's currently only used when editing pages and shared blocks, but the functionality has been written to be able to edit any .NET object. In the future this can be used to edit dynamic content, visitor groups etc. so that you as a developer don't need to learn several ways of creating editors.
- Reduce the need to write custom properties. We have added support to use both standard .NET data annotation attributes as well as some custom attributes, making it possible to annotate the model for some cases instead of writing custom properties. See David Knipes excellent blog post about this.
- Add global registration for type editors. You should only need to define that your type has a specific editor once in the system. That editor would then be used everywhere we use the object editing system.
Connecting an editor to a type
In the EPiServer CMS 5-6 property system you connected a property editor by creating an instance of PropertyDataControl in your property. This instance was then responsible for creating controls both for displaying content on the site as well as creating an editor for the property.
In EPiServer 7 we have strived to separate the user interface logic and the rendering of content from the actual data types. To register an editor for a type you need to connect an editor descriptor to your property. There are several ways to do this. Either you annotate your property with your desired editor class in Dojo:
You can also connect the property to an editor descriptor that is responsible for defining the editor class as well as additional settings for the editor:
The two examples above will have effect on the property only. You can also register global editor descriptors and connect them to one or several types, effectively decoupling the UI-logic from the model:
Note: In the example above I connect the editor to my class Email which is just a regular .NET class used as my value type for my property. In the EPiServer 7 preview you need to connect your editor descriptor to your property type, for instance PropertyEmail and not the value type Email.
Creating the actual editor
The following example shows how an editor with e-mail address validation can look like.
EPiServer configures a default namespace in Dojo called “app” which is mapped to the folder “ClientResources\Scripts”. In this case we have placed the editor in the “ClientResources\Scripts\Editors” folder in the site so that we can load the script file whenever the class "app.editors.EmailTextbox" is required. The result will look like this:
It’s also worth mentioning that the easiest way to accomplish email validation is to add a RegularExpression validaton attribute to your property which removes the need for a custom editor.