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).
All examples in this post use a fresh install of Sitecore but the same can be done in any Sitecore project.
Sitecore Global NameSpace
If you open up developer tools and type in console “Sitecore” you will see an object literal returned with a bunch of values
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.
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#
Hope this post helped, thanks for reading.