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!

Advertisements

SharePoint 2013: Newly created rendition not working

Recently I was facing an issue with newly created rendition, I created new rendition but the images are not showing the newly created rendition on my development server, also in image picker we not able to see the newly created rendition.

After waiting for some time as well my newly created rendition not worked. After some investigation we figured out that as renditions was previously working fine means blob cache working as expected but after adding new rendition we found that it was not working.

Solution:

We need to flush the blob cache using PowerShell.

$webApplication = Get-SPWebApplication "http://mytestdomain.com";
[Microsoft.SharePoint.Publishing.PublishingCache]::FlushBlobCache($webApplication);

After flushing the blob cache we are now able to see newly added rendition. For more details please check https://technet.microsoft.com/en-us/library/gg277249.aspx

Flush action will not be immediate, it will be queued.

Hope this will help, happy learning.

SharePoint 2013: Identifying the variation source and target with PowerShell

While working with one reporting requirement I needed to eliminate the variation targets and only need to consider variation sources. I struggled to find out the property which will help me to identify the page is variation source or target.

Solution:

Publishing web and Publishing page have the property called as ‘PublishingPage.Label.IsSource’ which we can use to identify the source page and source web. The same way we can use the publishing web level property as well.

if ([Microsoft.SharePoint.Publishing.PublishingWeb]::IsPublishingWeb($childWeb)){
 $spPubWeb =
 [Microsoft.SharePoint.Publishing.PublishingWeb]::GetPublishingWeb($childWeb);

 $item = $spPubWeb.PagesList.GetItemById($row.ID);
 $pubPage =
 [Microsoft.SharePoint.Publishing.PublishingPage]::GetPublishingPage($item);

 if($pubPage.VariationPageUrls.Count -eq 0)
 {
     #Page directly created in language sites and not Variated from source
 }
 else #Page Variated
 {
   if($pubPage.Label.IsSource) # then check if the web is Label IsSource
   {
     #this page is variation source
   }
 }
}

Hope this will help, happy learning.

SharePoint 2013: Make list tools appear again when added multiple web parts on allitems.aspx page

Recently while working with one of the requirement, I needed to add a content editor web part on Allitems.aspx page, I completed the requirement with adding the CE web part on the page but later testing team reported that the top level ‘list tools’ section is not appearing.

After some analysis I found the issue is nothing but default behavior, while allitems.aspx page is unmodified SharePoint knows that list tools section should be shown always and for the same list or library, when we add some other web part like content editor web part the SharePoint actually not able to understand where the focus currently on i.e. on Allitems web part or on the new web part we added.

Solution:

If customer is fine we can ask customer to click on the List Views web part, then customer will be able to see the list tools directly.

Other solution is to keep the focus on the List Views web part using JavaScript.

<script type="text/javascript">

ExecuteOrDelayUntilScriptLoaded(init_defaultWP, "sp.ribbon.js");

function init_defaultWP() {

setTimeout(function () {

var defaultWP = document.getElementById("MSOZoneCell_WebPartWPQ2");

WpClick({ target: defaultWP, srcElement: defaultWP });

SP.Ribbon.WebPartComponent.$3.deselectWebPartAndZone = function () { };

}, 100);

}

</script>

Happy learning.

Angular JS: date formatting in ng-repeat

Hi Friends,

I was binding some data using angular JS with ng-repeat, in my case there are couple of columns which are dates. From the data source it is coming in different format something like full date as 2017-04-21T09:01:00.000Z

Now I wanted to format it without changing my data source array, one option would be to create a JavaScript Date object and then convert in required format and then update the value in array.

Angular have some easy way to achieve date formatting with ng-repeat.

<div class="dateCreated">{{myobj.CreatedDate | date:'M/d/yy h:mm a'}}</div>

Or we can use fixed formats provided by Angular like ‘short’ or ‘mediumDate’, example

<div class="dateCreated">{{myobj.CreatedDate | date:'short'}}/div>

There are some other formats also available, please refer Angular Date formatting API documentation at https://docs.angularjs.org/api/ng/filter/date

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.

SharePoint: Access denied error while calling web service from JavaScript

Hi Friends,

I would like to share one very specific while calling web service from JavaScript, we were getting exception. Important point to note here is the code is working very fine if we access the page on server. But we are getting JavaScript ‘Error: Access is denied.’ Error while accessing the web page from client machine through browser.

We are getting exception where we are calling the web service.

After some analysis the error came out as HTTP and HTTPS mixed content issue.

In our case HTTPS is configured on load balancer level and on ISS 7 level we have HTTP only hence web service call is working fine.

While accessing from outside URL is getting accessed only with HTTPS and non-secured request is also redirected with secured.

Problem fund that we have used ‘_spPageContextInfo.webAbsoluteUrl’ variable which is providing the HTTP path as SharePoint is unaware with existence of HTTPS as it is configured on load balancer level.

‘_spPageContextInfo.webAbsoluteUrl’ is supposed to give HTTPS path if HTTPS configured on ISS 7 level but as in our case SSL is configured on load balancer hence SharePoint is unaware about SSL.

Solution:

We have checked the protocol of the browser request using ‘document.location.protocol’ and if it is HTTPS then we replaced HTTP with HTTPS from the output of ‘_spPageContextInfo.webAbsoluteUrl’

This solution is working fine both in the case of HTTPS and HTTP.

Though this scenario is very specific but still this may help someone to understand the issue better.