Identify whether the Page is in EditMode or in Design Mode in SharePoint 2013 using Javascript.


Sathish Nadarajan
SharePoint MVP
Published On :   03 Dec 2014
Visit Count
Today :  3    Total :   9625
Plan, Migrate, Secure, Report
SharePoint & Office 365 Tool. Simple & Easy to Use. 15-Day Trial!

SharePoint Office 365 Tool
Simple & Powerful Tool for Migration, Security & Reporting. Free Trial


I faced one interesting requirement like, from a publishing page, I would like to know whether the page is in Edit Mode or in Design Mode. Based on that, we need to update one property value as well on the PageLayout. Let us see how to do that in SharePoint 2013 using Javascript.

On the PageLayout, I added a JS file. On the Document.Ready Event,

 $(document).ready(function ($) {
 
     var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
 
     if (inDesignMode == "1") {
         // page is in edit mode
         $(".MyPropertyValue").val("");
     }
     else {
         // page is in browse mode
     }
 });
 

The Layout would be the same when you are in EditMode as well as on the Design Mode. Though it is very simple, this will be very useful, when we deal with the PageLayouts and Javascript.

On the PageLayout, I have the Field as,

 <SharePointWebControls:TextField  runat="server" FieldName="MyProperty"  CssClass="MyPropertyValue" />

Happy Coding.

Sathish Nadarajan.

SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Categories

Migratiin Tools for SharePoint