Detect Sitecore Page Modes

If you’re a frontend developer new to Sitecore you may not know that Sitecore has a series of page modes which provide different functionality to the content editor. These page modes are Design, Preview and most importantly Experience Editor (previously known as Page Editor).

I won’t go into these page modes in detail but for this blog post I’ll be focusing on Experience Editor and design page modes, and how to detect these page mode with JavaScript

All examples in this post use a fresh install of Sitecore but the same can be done in any Sitecore project.

Sitecore Global NameSpace

When you launch Experience Editor by navigating to publish and clicking on “Experience Editor”, Sitecore has helpfully added a global namespace you can tap into using JavaScript.

If you open up developer tools and type in console “Sitecore” you will see an object literal returned with a bunch of values

console

The item we are most interested in is “PageModes”, this has a load of parameter available for you to tinker about with. I’ve not tried all of these options so feel free to add comments in the comments box if you see anything that could be helpful.

console-pagemodes

Inside PageModes you’ll see “PageEditor” another property that will be useful in the JS to detect Page Editor mode.

Now that we can see what properties are available to use from the Sitecore global namespace, that allows us to write code to detect the if we are in the Experience Editor mode.

The example I’ve given has some extra code just to demonstrate how it could be useful in a real project.

Detecting Sitecore Page Modes with C#

You can detect page modes in the backend code in nearly the same way as you can using JavaScript. I would suggest using this method instead of the client side; it just feels cleaner and more robust for me (I’m not a backend developer so please excuse any bad code)

As you can see from the code example there are more page modes you can tap into which will allow you to do different things depending on the type. This is something you cannot do in the JavaScript version (from what I know).

Hope this post helped, thanks for reading.

Advertisements

One thought on “Detect Sitecore Page Modes

  1. Great article.
    In addition, I have a question. What is the difference from “return !!(Sitecore && Sitecore.PageModes && Sitecore.PageModes.PageEditor);” and “return (Sitecore && Sitecore.PageModes && Sitecore.PageModes.PageEditor);”. I see you use “!!” and I think Its not necessary.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s