Determining whether a user is currently editing a page is a common requirement for SharePoint developers. Whether you need to disable specific UI scripts, hide custom styling that interferes with the ribbon, or prevent animations from running while a content author is at work, knowing the page state is critical.

While server-side code offers a straightforward SPContext.Current.FormContext.FormMode property, detecting this client-side in JavaScript requires a bit more nuance. Because SharePoint handles different page types—such as Wiki pages, Web Part pages, and Publishing pages—differently, a one-size-fits-all approach can be elusive. In this guide, we will explore the most reliable methods to detect Edit Mode using JavaScript and the SharePoint Client Object Model.

Method 1: Checking Hidden Form Fields

The most common way to detect the page state is by inspecting hidden input fields that SharePoint injects into the page DOM. These fields are updated by the SharePoint engine when the page transitions between Browse and Edit modes.

Web Part Pages

For standard Web Part pages, SharePoint uses a hidden input named MSOLayout_InDesignMode. You can access this through the global document.forms collection.

var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;

if (inDesignMode == "1") {
    // The page is in edit mode
    console.log("User is editing the Web Part page.");
} else {
    // The page is in browse mode
    console.log("User is viewing the page.");
}

Wiki Pages

Wiki pages behave slightly differently and use a parameter called _wikiPageMode. If you are working within a Wiki library, use the following logic:

var wikiInEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value;

if (wikiInEditMode == "Edit") {
    // Wiki page is in edit mode
}

Method 2: Using the SharePoint Ribbon API

If you prefer using the built-in SharePoint JavaScript API, the SP.Ribbon.PageState namespace provides a dedicated handler for this check. This is often considered the "official" way to check state in Publishing environments.

// Returns a boolean: true or false
var inEditMode = SP.Ribbon.PageState.Handlers.isInEditMode();

if (inEditMode) {
    // Logic for edit mode
}

Note: This method relies on sp.ribbon.js being fully loaded. If you call this too early in the page lifecycle (e.g., in a head script), it may return an error. Always ensure your code runs after the necessary SharePoint libraries are initialized.

Method 3: The Global PageState Object

SharePoint also exposes a global PageState object. This object contains various members regarding the current state of the page, including ViewModeIsEdit.

if (window.PageState && window.PageState.ViewModeIsEdit === "1") {
    // Page is in edit mode
}

This variable is typically initialized from the _spBodyOnLoadFunctionNames array during the body load event. Just like the Ribbon API, you should perform a null check to ensure the object exists before querying its properties.

Method 4: Server-Side Injection for JavaScript

Sometimes the most robust way to handle this is to let the server tell the client what the mode is. By using the EditModePanel control in your Master Page or Page Layout, you can declare a global JavaScript variable that is only set when the page is being edited.

<script type="text/javascript">
    var IsInPageEditMode = false;
</script>

<PublishingWebControls:EditModePanel runat="server" id="EditModePanelJS">
     <script type="text/javascript">
        IsInPageEditMode = true;
     </script>
</PublishingWebControls:EditModePanel>

This approach is highly reliable because it leverages the server-side context directly, avoiding the need to scrape the DOM for hidden fields that might change across SharePoint versions.

Creating a Universal Detection Function

To make your code reusable across different SharePoint environments, it is best practice to wrap these checks into a single utility function. This function accounts for both Web Part pages and Wiki pages.

function isSharePointInEditMode() {
    var form = document.forms[window.MSOWebPartPageFormName];
    if (!form) return false;

    // Check for Web Part Page Edit Mode
    var isDesignMode = form.MSOLayout_InDesignMode && form.MSOLayout_InDesignMode.value === "1";

    // Check for Wiki Page Edit Mode
    var isWikiEdit = form._wikiPageMode && form._wikiPageMode.value === "Edit";

    // Check for WebPartManager Display Mode
    var isWPMEdit = form.MSOSPWebPartManager_DisplayModeName && form.MSOSPWebPartManager_DisplayModeName.value === "Edit";

    return !!(isDesignMode || isWikiEdit || isWPMEdit);
}

Common Pitfalls and Best Practices

1. SharePoint 2010 Team Sites

A known issue exists in some SharePoint 2010 Team Site templates where MSOLayout_InDesignMode does not correctly toggle to '1'. In these specific environments, you may need to rely on the URL query string (checking for DisplayMode=Design) or the EditModePanel approach.

2. Race Conditions

Many of these variables are injected via script blocks at the bottom of the page. If your custom script runs in the <head>, it will likely fail. Always wrap your detection logic in a DOMContentReady listener or use ExecuteOrDelayUntilScriptLoaded.

3. Modern vs. Classic

The methods described above apply to SharePoint Classic pages (On-premises and Classic SharePoint Online). If you are working with Modern SharePoint (SPFx), you should instead use the this.context.displayMode property provided by the SharePoint Framework.

4. Postbacks

Be careful when checking for edit mode during a postback. On Wiki pages, a postback might reset certain hidden fields temporarily. The universal function provided above helps mitigate this by checking multiple possible indicators.

Frequently Asked Questions

Does MSOLayout_InDesignMode work in SharePoint Online?

Yes, it works on Classic pages in SharePoint Online. However, for Modern pages, you must use the SPFx context as the classic DOM structure is not present.

What is the difference between Design Mode and Edit Mode?

In the context of these JavaScript variables, they are often used interchangeably. "Design Mode" usually refers to the Web Part maintenance view, while "Edit Mode" refers to the general state of editing page content.

Can I use jQuery to check the edit mode?

Absolutely. If you have jQuery loaded, you can check the hidden field value easily: if ($("#MSOLayout_InDesignMode").val() == "1") { ... }.

Wrapping Up

Detecting Edit Mode in SharePoint requires understanding the specific page type you are working with. While checking MSOLayout_InDesignMode is the standard approach for Web Part pages, incorporating checks for _wikiPageMode and the PageState object ensures your scripts behave correctly across the entire site collection. By using a centralized utility function, you can keep your codebase clean and maintainable across different SharePoint versions.