Few months ago I prepared ContentArea property with image thumbnails and image preview support. The new EPiServer has Content References list property which already implements thumbnails for list items. In Content references list with preview property I tried to extend standard editor and add support for image preview as well.

Content references list with preview

Client editor

The multipleReferencesWithPreview.js widget extends built-in EPiServer ContentReferenceListEditor editor. Standard editor use ContentReferenceList widget, which use “List” and “Formatter” mixins. So probably it could be possible to prepare a custom item formatter and use it to show tooltip. I decided to use different solution to minimize the amount of code.

The List mixin has insertRow method used every time new element is added. I tried to call the original method and then add my custom code. To achieve this I used dojo aspect functionality. Using this module we can attach custom code to existing methods. Module provides three methods:

  • before – the code will be executed before original method.
  • after – the code will be executed after original method.
  • around – the code will be executed in place of original method.

I used “around” method, because I needed access to input parameters, but also I wanted to change the return value. The widget source code is below:

Server code

I also created EditorDescriptor responsible for setting new widget class.

To make it work I’ve added “multiple-references-with-preview” on page model:

Using Content References Tooltip

The snippet is available on Gist