Sitecore View Renderings - Implementing Views for the Experience Editor

Tuesday, August 23, 2016 @ 11:00

By: Eric Stafford, Sitecore Developer – One of my biggest areas of focus developing with Sitecore the last two years has been the Experience Editor. I am passionate about providing clients a clean, robust, confusion free experience while they edit their content.

Sometimes I see components that are not very Experience Editor friendly, like a ‘Mega Nav’. Due to expanding nature of the navigation, it is very difficult to edit inline. We could alter the CSS to stack the Nav drop downs when editing them, but that’s not always ideal. What if we have other components that need stacked to provide an easy editing experience? This could make the page extremely long.

The solution is to add “Experience Editor only” markup. Then when the user is editing the component, they can see an expanded view of the navigation that makes it easy to edit.

In Sitecore, I create one Mega Nav view rendering called MegaNavigation. In the file, I then create two views, the normal “MegaNavigation.cshtml” and the Experience Editor only view “MegaNavigation_EE.cshtml”.

In order for this to work we need to override the GetViewRenderer pipeline.

Config Settings
Place this in your site’s config:

Enabling Experience Editor with View Rendering is pretty simple. But what about Controller Renderings? Well that’s a little more complex and I will cover that in another blog post. Hint, it involves creating a new Razor View Engine.