SharePoint - How To Check If Page Is In Edit Mode Or Not In JavaScript

As SharePoint has evolved and other client technologies have started to become popular and independent, we are achieving most of the solutions with client side technologies like JavaScript, jQuery, and other similar kinds.

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){
   // page is in edit mode
   }
}, 'SP.Ribbon.js');

Option 3

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

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

Happy Learning!