Custom renderers for properties
In my previous blog post about updates to typed models in EPiServer 7 I mentioned that we have added the possibility to select renderer for properties, pretty much the same way as you can assign renderers for blocks and pages. Let’s look a bit more into how this works. We begin with defining a simple page type with a single property:
Let’s create a simple renderer for the property. We’ll start by creating a property that inherits from one of the built in Property Controls: PropertyStringControl.
This class is very similar to what you would do in EPiServer CMS 5 and 6. There are two differences though. The first is that it implements the IRenderTemplate<T> interface. The second is the TemplateDescriptor attribute. This tells the system that this editor is preferred when rendering a model property with a UIHint attribute that matches the TemplateDescriptor Tag/TagString properties(Tag and TagString are basically the same property but with different types. Tags is defined as a string array which is not possible if you have an CLS-compliant project).
In our page template we add a standard EPiServer property web control to display the property:
When viewing a page of this type we get a simple a tag with a mailto-link:
Defining tags in the template
In the first example we added a UIHint attribute to our model. But what if we want to display the model differently in different templates? This can be done by assigning a tag in the RenderSettings property of the EPiServer property web control. Let us assume that we are working for a fictitious client that imports bananas. Their web strategists have decided that they should have a lot of images of bananas on their web site and what better way to implement this than with the great dancing banana image. Lets add a tag to the property:
And we’ll create a new renderer that will add a dancing banana next to the mail link:
And behold: We have a dancing banana!
Using a user control to render the property
Another new feature is the ability to define a user control to render your property. To do this you have to inherit from the generic class PropertyControlBase:
Let’s say the customer was thrilled with the dancing banana and just want more. To speed up the development we’ll add these to the user control instead:
Note: CurrentData in this case is our model value typed as a string as defined in our inheritance declaration.
We change the tag in our page template to the one defined in the user control, bananasgoesbananas, and reloading the page gives us:
When clicking on the email text we still get the default editing (inline editing for strings). This is because the user control is wrapped in a generic property control that handles editing attributes so that you don’t have to care about this.
With these additions working with complex models, like pages and blocks, and simple properties become pretty much the same. You can:
- Register renderers for them using the TemplateDescriptor attribute.
- Select renderer using the UIHint attribute..
- …or by defining a tag in RenderSettings Property for the EPiServer property web control.
If no renderer is found given the specified tags PropertyControlClassFactory will fall back to the current behavior.