Sitecore View Renderings – Implementing Views for the Experience Editor

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.

GetViewRenderer

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.


Do you enjoy my oddly themed blogs and wish you had access to even more of me and my ideas? Good news, you’re in luck!

If 140 characters is your thing, follow me on Twitter.


If you hate reading and watching Sitecore videos entertains you, head over to my YouTube channel! Sometimes I entertain, sometime I provide useful Sitecore information and sometimes I can do both in the same video.


I can also be found hanging out on the Sitecore channels on Slack, I like it, although it occasionally triggers AOL chat room flashbacks from the olden days.


You can also find me adding content on LinkedIn and on Reddit.