Determine if SharePoint Page Instance is in Edit Mode from JavaScript

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

MSOLayout_InDesignMode in Edit Mode

Here is how it looks like in Browse Mode

MSOLayout_InDesignMode in Browse Mode

References:

Advertisements
This entry was posted in SharePoint 2010, SharePoint 2013. Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s