We have a lot of list properties in my current project. And most of them are edited entirely in the forms view which means that the editors are not able to preview the chosen images before publishing.


I decided to give it a try and find a way to somehow inject the thumbnails to the built-in Content Area editor.

The component extends built-in Content Area editor so all features of native widget like D&D, sorting and editing are available. Property backing type is still of type ContentArea, so there will be no problems with link validation and content migration to new  EPiServer versions.

For now the property supports images from media assets, but it’s not difficult to implement thumbnails preview for custom blocks.

ContentAreaWithPreview editor

Implementing EditorDescriptor

The new descriptor simply derives from ContentAreaEditorDescriptor class and its only role is to change the client widget class to my custom implementation – “alloy.editors.contentAreaWithPreview”.

Extending dojo widget

The extension point in Dojo widget is _craeteNode method of _ContentAreaTree widget. After calling the base _craeteNode method using inherited function, I’m  modifying the content item to enable new functionality. Using this construction original _createTreeNode method of _ContentAreaTree class is executed before running custom code.

Thumbnail and preview URL fields are not available while adding a new item to the Content Area, but still we do have the access to the content ID.

To get the content together with properties we could use “epi.storeregistry” registry.

TooltipDialog preview

I didn’t want to use large thumbnails inside ContentArea because a component with many images could be too high and it could be difficult to sort its items. That’s why I decided to show image preview as tooltip. It’s implemented using dijit TooltipDialog widget.

TooltipDialog widget doesn’t have open or close methods by itself. To show tooltip we have to use a popup helper from dijit controls.

Using editor

You need to copy two code snippets to install the component:

  • EditorDescriptor
  • Dojo widget.

To use the editor add the UIHint to ContentArea property.

Property was developed and tested in EPiServer 8.
Below you can find full widget code.