How to Verify if the Page is in Edit Mode using JavaScript in SharePoint 2013 - ...


: 2

In one of my projects, there was a 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
   // page is in browse mode

This will refer to the 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
   // 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 the 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 ID="EditModelPanel2" 

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