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

  1. var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;  
  2. if (inDesignMode == "1")  
  3. {  
  4.     // page is in edit mode  
  5. else {  
  6.     // page is in browse mode  
  7. }  
  8. For Wiki pages  
  9. var wikiInEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value;  
  10. if (wikiInEditMode == "Edit")  
  11. {  
  12.     // wiki page is in edit mode  
  13. else  
  14. {  
  15.     // wiki page is not in edit mode  
  16. }  

Option 2

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

  1. ExecuteOrDelayUntilScriptLoaded(function()  
  2.     {  
  3.     var InEditMode = SP.Ribbon.PageState.Handlers.isInEditMode();  
  4.     if (!InEditMode)\  
  5.     {  
  6.         //...  
  7.     }  
  8. }, 'SP.Ribbon.js');  

Option 3

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

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

Happy Learning!