SharePoint - Find If The Page Is In Edit Mode Or Not

As SharePoint evolved and other client technologies started to become popular and independent, we are now achieving most solutions with client side technologies like JavaScript, jQuery and other similar ones.

I came across one requirement while working on a JavaScript based component, where I need a conditional code to run only when my page is in edit mode. I found multiple solutions which I have summarized below.

Option 1

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

Option 2

Using SP.Ribbon.PageState.Handlers.isInEditMode().

ExecuteOrDelayUntilScriptLoaded(function()
    {
    var InEditMode = SP.Ribbon.PageState.Handlers.isInEditMode();
    if (!InEditMode)\
    {
        //...
    }
}, 'SP.Ribbon.js');

Option 3

While checking the value in the SharePoint search display template, we need to use Srch.U.isPageInEditMode Method.

var isRollupPageInDisplayMode = Srch.ContentBySearch.isRollupPage(ctx.ClientControl) && !Srch.U.isPageInEditMode();

Happy Learning!