I have been recently working on publishing page layouts and wanted to ensure code required to access EditModePanel controls executes only if page instance is in Edit mode from Javascript. As usual, upon doing quick Google research, I have found several tips including nicely done on stackexchange.

It turns out that every web part pages and SharePoint publishing pages, there is a hidden field “MSOLayout_InDesignMode“, which would allow us to access page mode from client side code.

<input type=”hidden” name=”MSOLayout_InDesignMode” id=”MSOLayout_InDesignMode” value=”” />

Here is the example of how you would determine if your page is in design mode or not from JavaScript

var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
if (inDesignMode == "1")
{
// Page instance is in edit mode
// Run code which requires accessing EditModePanel controls
}
else
{
// Page instance is in browse mode
}

Here is how it looks like in Edit Mode

Here is how it looks like in Browse Mode

References:

• http://sympmarc.com/2013/05/03/determine-if-a-sharepoint-publishing-page-is-in-design-mode-edit-mode-with-script/
• http://sharepoint.stackexchange.com/questions/12792/how-do-i-know-if-the-page-is-in-edit-mode-from-javascript
• http://sharepointquest.blogspot.com/2011/06/to-find-if-page-in-moss-is-in-design.html
• http://amalhashim.wordpress.com/2012/12/23/javascript-detect-sharepoint-page-in-edit-mode/