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

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.