How to detect if you are in the Editor view in XPM (serverside)

While working on an Experience Manager implementation, you often find yourself (at least I do) in the position where you want to change/update the HTML that is generated to be able to edit the content nicely in Experience Manager.
XPM uses HTML-comments to ‘mark’ fields as being editable. The XPM JavaScript draws a border around such a field to highlight it, so the editor knows he can edit this field.
The JavaScript from XPM uses the nearest HTML container (<div>, <h1>, etc) to draw this border.

But often enough the HTML doesn’t fit XPM. The border is drawn to big, too small or doesn’t show up at all because there is no ‘fitting’ HTML element. Or your property doesn’t have a visual representation. Think for instance video parameters, or metadata. Ideally you want your editors to be able to edit these properties in the Experience Manager view.

The most ideal scenario is that the developer somehow can detect if the current page/dcp is rendered in the XPM editor view (and NOT just in the ‘normal’ staging website). Knowing that the current page is rendered in the XPM editor view, allows the developer to add additional HTML to create a more customized user experience for the editor.

There are several solutions to detect the state (in XPM editor view) clientside (using JavaScript), but I haven’t seen a solution for detecting it serverside. And because I needed it in my current project and saw that several people asked for it, I decided to try to build a solution and ‘put it out there’.

This is how it works in a nutshell

1. XPM loads the staging website in an <iframe>
2. A GUI extension (1 JavaScript with very few lines of code) is loaded
3. This JavaScript contains a method that runs just before the page is loaded into the iframe
4. It updates the <iframe> ‘src’ attribute and adds a querystring parameter calld ‘ActiveInXpm=true’
5. Another line of code takes care of the ‘Exit’ button functionality (makes sure that you are redirected back to the original URL with a querystring parameter ‘ExitXpmEditor=true’)

I know it’s a *very* simple extension, but for me it does the job. In my (DD4T .NET ) website I check this querystring parameter and that’s how I know that the current page is loaded in the XPM editor view. (Getting the Querystring parameter is a trivial task in every serverside language).

While this works for the first page that is opened in the XPM Editor, it doesn’t work when the editor navigates to the following url while staying in the Experience Manager. This all happens within the <iframe> and I couldn’t find a reliable way to add the querystring parameter to each request. If you do, please let me know 🙂

I solved this by setting the ‘ActiveInXpm’ querystring parameter value in the session. And my code to check if I am in the Editor view, checks the session. If the user exits the XPM editor by clicking on the ‘Exit’ button, the session is emptied and the page looks exactly how it would look like on the live site. The session handling functionality is only added to the staging website, so the live website *never* has to deal with XPM stuff.

I build this for a DD4T .NET site. If you want the code for handling the session, drop me an email and I’ll send it to you.

I’ve uploaded the extension to GitHub.

Let me know what you think or if you have any problems with it.

Some useful links for more information about detecting the XPM state clientside:

• http://tcm4lex.wordpress.com/2013/07/04/javascript-detection-of-experience-manager/
• http://www.tridiondeveloper.com/having-fun-with-experience-manager