SharePoint: How to check if page is in edit mode or not in JavaScript

As SharePoint evolved and other client technologies started to become popular and independent we are achieving most of the solution with client side technologies like JavaScript, jQuery and other similar.

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 summaries below.

Option 1:

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

For Wiki pages

var wikiInEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value;
if (wikiInEditMode == "Edit")
{
// wiki page is in edit mode
}
else
{
// wiki page is not in edit mode
}

Option 2: Using SP.Ribbon.PageState.Handlers.isInEditMode()

ExecuteOrDelayUntilScriptLoaded(function(){
var InEditMode = SP.Ribbon.PageState.Handlers.isInEditMode();
if(InEditMode){
// page is in edit mode
}
}, 'SP.Ribbon.js');

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

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

Happy Learning!

Angular JS: Calling angular function from jQuery

Hi Friends,

Angular JS and jQuery are best companion and in most of the cases we need to use both of those to achieve some functionality.

I my case as well I was using jQuery UI tabs with Angular JS. Where tabs are manually added but in my case I wanted to call an angular function when tabs are getting changed.

The problem is tabs changed event was non-angular section and $scope was not available in the jQuery tab change event.

Solution:

We need to provide the ID property for controller div where we have defined ng-controller.

<div class="form-group" ng-controller="getTestCtrl" id="ctrlTest">

Then we can call the method from non-angular part of the JavaScript as well, in my case jQuery UI tabs change event.

angular.element('#ctrlTest').scope().GetTestData();

angular.element('#ctrlTest').scope().$apply();

Make sure to call $apply() method which triggers a $digest cycle after calling the function as we are not in Angular cope hence we need  to explicitly call $apply method to force the UI binding.