In EPiServer 7 On-Page-Editing is the default way of editing a page. An editor clicks on a part of the page that represents a property and can update it using whatever type of editor (textbox, textarea, Tiny MCE etc) is configured for the property. All while almost instantly seeing the updated result on the page.

For us developers the live-preview way of editing pages in EPiServer 7 can present challenges. Especially when the design requires us to somehow modify whatever the editor has entered before rendering it.

In order to preserve our vocational pride and keep customers happy we need to ensure that the editors get a correct preview of the content.

Putting ourselves in the editors shoes, imagine that we edit a page and modify a couple of properties. All while checking how the page looks. Then we publish the page, only to find ourselves looking at something different from what the preview showed us. That wouldn't be very fun and we'd lose trust in the system.

On this topic and based on a simple case that I ran into not long ago, here's a challenge that will test your EPiServer development skills when it comes to rendering properties and your understanding of how EPiServer 7 CMS works.

The challenge

You have a page type class with two properties:

You should create a template for this page type that displays both properties. It should meet the following conditions:

1. Both properties should be edited using a text area.
2. If the Heading property contains line breaks those should be replaced with br tags when it's rendered, allowing editors to create headings that span multiple lines.
3. If the Intro property happens to contain line breaks those should not be replaced. That is, editors should not be able to force new lines in the Intro property.
4. Both properties should be editable by clicking on them in on-page-edit mode.
5. Both properties should offer a realistic preview at all times.
6. The preview of the page should not rely on a full refresh of the page. That is, methods whos name contain FullRefresh are not allowed.
7. You are not allowed to change the types of the properties and you are not allowed to move them to a block.

Here's an example of how a page that meets these conditions should look in edit mode:

Sounds and looks pretty simple, right? As it turns out, while each requirement on its own is straight forward, combine them and it's not entirely obvious how to meet them all. Give it a try!

Solutions

Solutions can be found in separate articles:

• Solution for Web Forms
• Solution for MVC

PS. For updates about new posts, sites I find useful and the occasional rant you can follow me on Twitter. You are also most welcome to subscribe to the RSS-feed.