The PropertyList is the new property introduced in EPiServer 9. It allows to use generic list on content model. List item property could be described with the same attributes as regular model properties. For example if we annotate property with Display attribute and set name, then name will be used as grid column header and as a label on the edit form. If we set the UiHint, like StringList then editing form will use selected editor.
There is an excellent Per Magne Skuseth tutorial that clearly describe how to use the list editor. Article can be found on the EPiServer blog.

List is represented as a grid. Each list element is a single grid row. There are two built-in data type formatters – for DateTime and Boolean. All other properties are converted directly to string. So for example if we set UiHint to UIHint.Image, then the editing form will use media selector.

PropertyList form editor

… but the grid will show number (ContentReference).


I tried to improve this behavior and display image thumbnails on the list. It’s implemented by adding a custom formatter for images. Formatter is a function that takes unformatted grid cell value as input parameter and returns formatted value (it could be HTML).

Based on the Per’s example and added image property to the Contact class. The image is ContentReference and use UIHint.Image:

To get thumbnailUrl for ContentReference we need to additionally load the content from repository. Unfortunately, grid formatters doesn’t allow to return deferred results from formatters, so code that returns promise won’t work:

It means that we need to have all conntentReference->URL mappings before rendering. All images for existing items will be returned from the server and all new images will be resolved during closing the edit dialog.

The server list will be provided using IMetadataAware attribute.

And client code for new images is handled in onExecuteDialog method:

To use image formatter we need to create new widget. It will extend original epi-cms/contentediting/editors/CollectionEditor editor and apply formatting and override onExecuteDialog method.

Formatter is added as a separated file and connected with as a dependency.

To use new solution we need to add ClientEditor and ImageThumbnailExtender on the property of the model.

After running application the editor will display thumbnails for images.

PropertyList with image

The source code is available on Gist.