Updates needed to get “Navigation options for SharePoint Online” MSDN article to work

My company was working on a project with a SharePoint Online implementation. While developing the site it was noticed that the performance wasn’t up to the required level.

My colleagues and I done some investigation and the results seem to indicate the slow load times were down to the response coming from the server.

We al tried different approaches to try and track down which elements were causing the poor performance by changing the master pages and adding/removing components.

The main issue seemed to related to the navigation options on the site. Our initial setup was to create the site using the structural navigation as this is easy to use and is security trimmed.

When the top navigation was removed we noticed significantly better page load times. After it was identified the top navigation was having an impact it was changed from structural to managed metadata and while this did help it doesn’t doesn’t security trim the navigation and requires the term set to be updated when new sites are added.

After much searching I finally found an MSDN article which backed up the top navigation potentially being a performance problem. The article suggested the managed metadata as an alternative but we had already ruled this out. It did provide a third approach which I had not previously considered and this was to use a search driven approach.

After reading through this I thought it sounded like a good solution. The only downsides were the ability to order the top navigation and the fact it renders the navigation using JavaScript so obviously puts additional load on the client.

I decided to implement this approach and then compare the page load times with the structural and search driven navigation to see if there was any significant difference. Reading the article I though this will be a 5 minute change but in the end it took me half the morning. Hopefully this blog will provide a more detailed set of steps for anyone looking to implement this approach.

Steps 1 to 4 are simply supplying instructions on how to download a copy of one of the existing master page files. Steps 5 and 6 provide details on how to update the downloaded master page and re-upload it to SharePoint under a different name.

All these steps for far are fine, however it was after this I started noticing some issues. The first issue is nowhere in the article does it actually tell you to add the JavaScript anywhere to the site. This may seem obvious but for completeness I wanted to highlight it. In my case I copied the JavaScript, made the change to the ‘root’ variable at the top of the file and then uploaded it to a folder in the Style library, which can be found at the root of the site.

With the JavaScript file in place I then added a reference to it in the head section of the custom master page, see figure 1

<script type="text/javascript" src="/sites/Intranet/Style%20Library/CN.Intranet/js/SearchTopNavigation.js"></script>

Figure 1

Steps 7 and 8 detail the change needed to update the root site URL and also describe in detail how the JavaScript works. This is where another of the additional steps is required. As part of step 7  it says “This data is then parsed into the previously defined SPO.Models.NavigationNode objects which use Knockout.js to create observable properties for use by data binding the values into the HTML that we defined earlier”. The key in here is the code uses Knockout.js so I needed to add a reference to this in my master page as well. To do this you can either download a copy or point the reference to a CDN. I always download a copy as then you are in control over the version and the availability of the content. I downloaded version 3 from the Knockout website. Once I have a copy of this I uploaded it to the same folder in the style library and added another reference in my custom master page, see below for reference.

<script type="text/javascript" src="/sites/Intranet/Style%20Library/CN.Intranet/js/JQ/knockout-3.0.0.js"></script>

Also in point 7 there is another line which is easy to skip over which requires another JavaScript reference “Next, the results are assigned to the self.nodes array and a hierarchy is built out of the objects using linq.js assigning the output to an array self.heirarchy.”. The key here is it uses linq.js to create the object hierarchy so it can build the navigation. I had a Google for this and found a CodePlex site. It looked like the correct plugin so I downloaded the solution and took the minimised version ‘linq.min.js’ and uploaded this into the same folder in the style library. I also added another reference to my custom master page, see figure 3

<script type="text/javascript" src="/sites/CHASIntranet/Style%20Library/CN.Intranet/js/JQ/linq.min.js"></script>

Figure 3

At this point I thought that would be all the changes I needed, however when I loaded the site I started getting a JavaScript error, see figure 4.

“object doesn’t support property or method “byhierarchy””

Figure 4

I then spent a while debugging through all the code to see if I could indentify what was happening and it seemed to be in the ‘buildHierarchy’ function where it was calling ‘ByHierarchy’ on the collection of navigation items. I checked and there were items being passed to the function.

I looked around and tried the JQuery Linq JS version which comes as part of the download, jquery.linq.min.js, but this didn’t work either. I then had a Google for the error and I found the Source Control where the “ByHierarchy” functionality was added to linq.js. The download provides a Visual Studio project so I opened this and searched for “ByHierarchy” and I found references in “jquery.linq.js” and “linq.js”. It took me a minute to trigger but I was using the minified versions to increase performance but it looks like the new function wasn’t added to the minified version. I double checked this by opening the minified version I upload to SharePoint and searched for “ByHierarchy” but nothing was returned.

I uploaded “linq.js” to the style library and updated the reference in my master page and then tested the site again and while the JavaScript error was gone the navigation was not displaying. All I could see was the navigation div was being displayed but there was no contents, see figure 5.

Generated Top Nav
  1. <div style="" id="navContainer">
  2.                     <div class="noindex ms-core-listMenu-horizontalBox" data-bind="foreach: hierarchy">
  3.                         <ul style="padding-left:20px" data-bind="foreach: $data.children" id="menu"></ul>
  4.                     </div>
  5.                 </div>

Figure 5

I checked and there were no JavaScript errors in the console in IE so I started debugging through the code. I could see items were being returned as part of the query and NavigationNode objects were getting created but I couldn’t see what was missing. In the end I got a colleague of mine to double checked and he noticed that when building up the NavigationNode objects in function “getNavigationFromDto” it looked like the parent property was getting set to the content type ID not the parent site URL.

After checking the values available the parent site URL seemed to be stored in index 20 so I updated my version of the code, see figure 6

Updated JavaScript Function
  1. //Parses a local object from JSON search result.
  2. function getNavigationFromDto(dto) {
  3.     var item = new SPO.Models.NavigationNode();
  4.     if (dto != undefined) {
  5.  
  6.         item.Title(dto.Cells.results[3].Value);
  7.         item.Url(dto.Cells.results[6].Value);
  8.         item.Parent(dto.Cells.results[20].Value);
  9.     }
  10.  
  11.     return item;
  12. }

Figure 6

When I then tested the site the navigation started working. I was very relieved at this point but I wanted to make sure everything was functioning as expected so I attached a break point in IE and started to step through the code and  this is where I found my final error. In the sample supplied in the MSDN article the “NavigationViewModel” function is used to get the data from either the localStorage cache or it executes the search API query, however in the sample code the checked implemented is always false so never retrieves from the local storage see line 2 in figure 7 below.

Retrieve Navigation Function
  1. var fromStorage = localStorage["nodesCache"];
  2.         if (false) {
  3.             var cachedNodes = JSON.parse(localStorage["nodesCache"]);
  4.             var timeStamp = localStorage["nodesCachedAt"];
  5.             if (cachedNodes && timeStamp) {
  6.                 //Check for cache expiration. Currently set to 3 hrs.
  7.                 var now = new Date();
  8.                 var diff = now.getTime() – timeStamp;
  9.                 if (Math.round(diff / (1000 * 60 * 60)) < 3) {
  10.  
  11.                     //return from cache.
  12.                     var cacheResults = [];
  13.                     $.each(cachedNodes, function (i, item) {
  14.                         var nodeitem = getNavigationFromCache(item, true);
  15.                         cacheResults.push(nodeitem);
  16.                     });
  17.  
  18.                     self.buildHierarchy(cacheResults);
  19.                     self.toggleView();
  20. addEventsToElements();
  21.                     return;
  22.                 }
  23.             }
  24.         }
  25.         //No cache hit, REST call required.
  26.         self.queryRemoteInterface();

Figure 7

I updated this test to check the value of the fromStorage variable, see figure 8, and done some testing and the code starting pulling the results from my local storage instead of doing the query every time.

Retrieve Navigation Function 2
  1. var fromStorage = localStorage["nodesCache"];
  2.         if (fromStorage != null) {
  3.             var cachedNodes = JSON.parse(localStorage["nodesCache"]);
  4.             var timeStamp = localStorage["nodesCachedAt"];
  5.             if (cachedNodes && timeStamp) {
  6.                 //Check for cache expiration. Currently set to 3 hrs.
  7.                 var now = new Date();
  8.                 var diff = now.getTime() – timeStamp;
  9.                 if (Math.round(diff / (1000 * 60 * 60)) < 3) {
  10.  
  11.                     //return from cache.
  12.                     var cacheResults = [];
  13.                     $.each(cachedNodes, function (i, item) {
  14.                         var nodeitem = getNavigationFromCache(item, true);
  15.                         cacheResults.push(nodeitem);
  16.                     });
  17.  
  18.                     self.buildHierarchy(cacheResults);
  19.                     self.toggleView();
  20. addEventsToElements();
  21.                     return;
  22.                 }
  23.             }
  24.         }
  25.         //No cache hit, REST call required.
  26.         self.queryRemoteInterface();

Figure 8

The final issue with this was noticed by one of my colleagues Tal Peer. Our development environment was a basic site collection with some team sites, however when this was deployed to the production site collections Tal noticed the top navigation was returning additional items. It turns out that the search query will also return app webs which are installed as part of adding apps to the site. Obviously these webs are generally hidden from the end user so they shouldn’t appear in the top navigation. Tal was able to add an additional part to the search query to exclude these app webs by adding “-WebTemplate:APP”, the full query can be seen in figure 9

Hopefully this helps any other people who were trying to implement this functionality. It’s a very good idea to load the navigation from the search index and the basis of the code is there but I just found these additional steps/issues to be very frustrating.

Happy SharePointing 🙂

Advertisements

2 Responses to Updates needed to get “Navigation options for SharePoint Online” MSDN article to work

  1. Holly says:

    you rock! was trying to implement the same code to test out search-driven navigation in SharePoint online, this helped immensely!

  2. freserovski says:

    Thank you, you saved my day. Thanks god there is someone who fixing after Microsoft.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: