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!