In this tutorial how to display different preview renderings for your blocks when display options are enabled. For those of you new to previewing blocks, in general, you can learn more here

episerver_display_options_dialog

In this advanced tutorial we'll cover a preview model to render all these variations, like so:

preview_blocks_editor

I've talked previously about display options and I'm assuming you have all that bit set-up.  If you go to the end of this tutorial you can download a working code example with both preview and display options enabled.

The Preview Controller

The first thing we need to do is create a preview controller.  This is the controller that will get called when we try to preview a block in the editor.

There's quite a lot of code here so we'll start a method at the time.

  • GetSupportedPreviewAreas: In the constructor we get Episerver to pass in all the available display options. In this method we iterate through each one of the display options and create a preview area for it.
  • CreatePreviewArea: In here we build up a PreviewArea. The Preview Area will eventually be passed on down to the view so it will contain all the information we need about the block. We create our own content area.

The Preview View Model

In the view model we pass in a reference to the start page and the list of Preview Areas we created.

The Preview View

We'll use the same preview layout from the last tutorial, the only difference now is we need to define a custom TemplateHint.  The template hint is the little hint that gets displayed in the .

TemplateHint

We've extended on How to Preview a Block in Episerver but this time we're using the different display options to render all the different variations of the block.

I've talked previously about how to set-up Episerver to render blocks differently based on the display options, How To Make A Block Use Multiple Views ? A Partial View Controller Explained

On this preview, we also render every display option in the view. Additionally, we also implemented our own TemplateHint to make the little hint that appears in the preview.

All the above code can be downloaded in a fully working website from my github account here. #ILoveEpiserver