How to verify if the Page is in Edit mode using JavaScript in SharePoint 2013

Hi Guyz,

In one of my project there was need to have a specific edit mode functionality to be implemented, so there might be lot of approaches we can have but I found some of the below approaches that we can implement to verify if the page is in edit mode using JavaScript.

For Publishing Page
SharePoint default input called MSOLayout_InDesignMode is there. If the value is 1 then page is in edit mode else it is in display mode.

var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;

if (inDesignMode == "1")
{
   // page is in edit mode
}
else
{
   // page is in browse mode
}

This will refer to value of the following html input control, which is rendering on the page when it is in edit mode:

<input id="MSOLayout_InDesignMode" name="MSOLayout_InDesignMode" type="hidden" value="1" />

For Wiki Pages
Same as above another default input _wikiPageMode parameter will be used. If the value is Edit page is in edit mode else in display mode.

var wikiInEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value;
if (wikiInEditMode == "Edit")
{
   // wiki page is in edit mode
}
else
{
   // wiki page is not in edit mode
}

Custom Code Snippets
Also you can place some snippet control to master page or page layout if you have customized it and place following snippets:

<PublishingWebControls:EditModePanel ID="EditModelPanel1" runat="server" PageDisplayMode="Edit">
    <h1>You are in EDIT mode</h1>
    <!-- Place you're javascript for execute only in edit mode -->
</PublishingWebControls:EditModePanel>

<PublishingWebControls:EditModePanel ID="EditModelPanel2" runat="server" PageDisplayMode="Display">
    <h1>You are in DISPLAY mode</h1>
    <!-- Place you're javascript for execute only in display mode -->
</PublishingWebControls:EditModePanel>

Cheers!

Advertisements

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 )

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