Tabbed view on document library

The ‘group by’ native functionality of XsltListViewWebPart is convenient to present a classified view on the contents of a SharePoint List / Library. Requirement of one of our departments is to go beyond that, and provide a tabbed view on the document library: a tab per month per year.

To achieve this, one basically has the following options:

1. Build a custom webpart. However, this is so old-school SharePoint platform utilization; and in our company by default disallowed.
2. Build a custom HTML / javascript UI (App), and connect via SharePoint webservices. Although this setup nicely fits in ‘modern SharePoint App-development’, for this specific scenario the drawback is that you then also need to develop yourself all of the Office integration that SharePoint standard delivers for a rendered document library (via ECB menu).
3. Reuse XsltListViewWebPart, but specify an own Xslt-styling. This approach suffers from the same approach as the ‘modern App’ alternative: you’re then required to include in the custom Xstl all the code to render Office-integration friendly.
4. Reuse XsltListViewWebPart, and dynamically modify the standard grouped-by layout into a tabbed view. Beyond reuse of the native Office-integration, this approach also reuses the lazy loading per group that is native in the XsltListViewWebPart group-by handling. Especially with a larger document library, this makes it much more performant as to retrieve the entire contents at once.

Client-side transfrom group-by layout into tabbed view

The transformation of the standard group-by layout into a tabbed view can be achieved as full client-side code only. To achieve the effect, I inspected the standard delivered html; and next coded the transformation logic in jQuery.

Particulars

• The native 'group-by' functionality renders the header(s) of the groups. In a tabbed-view layout, the selected tab however already visualizes which group selected; and the group-headers are undesirable in the rendering.
• The native 'group-by' functionality opens new group in addition to the one(s) already open. For a tab-view experience, the views must be exclusive, act as toggles. Select one tab, automatically closes the tab selected before.
• The native 'group-by' functionality also includes a 'remember' function: by default a grouped-by layout opens with the group(s) opened as when the visitor was last on the page. For a consistent user-experience, it is then required to pre-select the associated tab-button.

The 'App' code

<style type="text/css">
    .et-tab {
       <ommitted…>
    }

    .et-tab-active {
       <ommitted…>
    }

    .et-tab-inactive {
       <ommitted…>
    }

    .et-separator {
       height: 5px;
       background-color: rgb(134, 206, 244);
    }

</style>

<script>

var TabbedListView = window.TabbedListView || {};

TabbedListView.UI = function () {
    function MonthToInt(month) {
       <ommitted…>
    }

    function getCookieValue(cookieName) {
        if (document.cookie.indexOf(cookieName) != -1) {
            var cookies = document.cookie.split("; ");
            for (var cookieSeq in cookies) {
                var cookieSpec = cookies[cookieSeq];
                if (cookieSpec.indexOf(cookieName) != -1 
                    && cookieSpec.indexOf("=") != -1
                ) {
                    return unescape(cookieSpec.split("=")[1]);
                }
            }
        }
        return undefined;
    }

    function TabbedView() {
        var tabrow = $("<div class='et-tabrow'></div>");
        $(".ms-listviewtable")
            .before($(tabrow))
            .before("<div class='et-separator'></div>");
        
        $(".ms-listviewtable").children().each(function(i) {      
            // Grouping-row: level 0 or level 1
            if ($(this).attr("groupString") !== undefined) {
                // Month - lowest group level.
                if ($(this).children("[id='group1']").length > 0) {
                    var action = $("<a></a>");
                    // Set the buttonlabel := '<month> <year>' by extracting
                    // the values from the original headings.
                    var monthValue = 
                         $(this).find("a").parent().clone()
                            .children().remove().end().text().split(" : ")[1];

                    var parentId = 
                         $(this).attr('id')
                             .substring(0, $(this).attr('id').length - 2);
                    var group0 = 
                         $(this).parent().children("[id='" + parentId + "']");
                    var yearValue = 
                         $(group0).find("a").parent().clone()
                             .children().remove().end().text().split(" : ")[1];

                    $(action).text(monthValue + " " + yearValue);

                    $(action).click(function() {
                        var parentId = $(this).parent().attr('id'); 
                        var parentTBodyId = 
                             "titl" + parentId.substring(0, parentId.length -2;
                        var actualAA = $(".ms-listviewtable")
                               .find("tbody[id='" + parentTBodyId + "']").find("a");
                        if ($(actualAA).find('img').attr('src')
                            .endsWith("plus.gif")
                        ) {
                           $(actualAA).trigger('click');
                        }
                        var actualA = $(".ms-listviewtable")
                               .find("tbody[id='titl" + parentId + "']").find("a");
                        $(actualA).trigger('click');

                        if ($(this).parent().hasClass("et-tab-inactive")) {
                            $(".ms-listviewtable").children().each(function(i) {
                                if ($(this).attr("groupString") !== undefined) {
                                    $(this).hide();
                                }
                            }); 

                            $(".et-tabrow").children().each(function(i) {
                                if ($(this).hasClass("et-tab-active")) {
                                    $(this).find("a").click();
                                }
                            }); 

                            $(this).parent().removeClass("et-tab-inactive");
                            $(this).parent().addClass("et-tab-active");
                        } else {
                            $(this).parent().removeClass("et-tab-active");
                            $(this).parent().addClass("et-tab-inactive");
                        }
                    });

                    // Add 'tab-button' to tab-row; in chronological sorted order.
                    var button = $("<span class='et-tab'></span>");
                    $(button).attr('id', 
                        $(this).attr('id').substring(4, $(this).attr('id').length));
                    $(button).append($(action));

                    var totalMonths = 
                          parseInt(yearValue) * 12 + MonthToInt(monthValue);
                    $(button).data('TotalMonths',totalMonths);
                    var added = false;
                    $(".et-tabrow").children().each(function(i) {
                       if (!added && parseInt($(this).data("TotalMonths")) > totalMonths) {
                           $(this).before($(button));
                           added = true;
                       }
                    });
                    if (!added) $(tabrow).append($(button));
                    $(button).addClass("et-tab-inactive");
                }             

                $(this).hide();
            }       
        });

        ExecuteOrDelayUntilScriptLoaded(function() {
            var cookieValue = getCookieValue("WSS_ExpGroup_");
            var group1Opened = false;
            if (cookieValue !== undefined) {
                var expGroupParts = unescape(cookieValue).split(";#");
                for (var i = 1; i < expGroupParts.length - 2; i++) {
                     if (expGroupParts[i+1] !== "&") {
                         group1Opened = true;
                         break;
                     } else {
                         i++;
                     }
                }
            }

            if (group1Opened) {               
                // XsltListViewWebPart standard behaviour includes a 'remember' 
                // functionality: open the group(s) that was/were open before 
                // refreshing the page with the grouped-view. Overload that behaviour 
                // to make sure the 'tab-row' state is consistent with that.
                $.prototype.base_ExpColGroupScripts = ExpColGroupScripts;

                ExpColGroupScripts = function(c) {
                   var result = $.prototype.base_ExpColGroupScripts(c);

                   $(".ms-listviewtable").find("tbody[isLoaded]").each(function(i) {
                      if ($(this).find("td").text() === 'Loading....') {
                          var bodyId = $(this).attr('id')
                                .substring(4, $(this).attr('id').length-1);
                          var tabButton = $(".et-tabrow")
                                .children("[id='" + bodyId + "']");
                          if ($(tabButton).hasClass("et-tab-inactive")) {
                               $(tabButton).removeClass("et-tab-inactive");
                               $(tabButton).addClass("et-tab-active");
                          }
                      }
                   });

                   // Reset function
                   ExpColGroupScripts = $.prototype.base_ExpColGroupScripts;

                   return $(result);
                };
            } else {
                $(".et-tabrow span:first-child").find("a").trigger('click');
            }
        }, "inplview.js");

        $(".ms-listviewtable").show();
    }

    var ModuleInit = (function() {
        $(".ms-listviewtable").hide();
        _spBodyOnLoadFunctionNames.push("TabbedListView.UI.TabbedView");
    })();

    // Public interface
    return {
        TabbedView: TabbedView
    }
}();

</script>

Update: support for multiple XsltListViewWebParts on page

The above 'App' code works fine in case of a single XsltListViewWebPart on page. However, in our company we also have document dashboards that give entrance to 'archived' and 'active' documents. The above code requires some update to be usable for 1 or more XsltListViewWebPart instances on a single page.

<style type="text/css">

         <ommitted…>

</style>

<script>

var TabbedListView = window.TabbedListView || {};

TabbedListView.UI = function () {

    function MonthToInt(month) {
       <ommitted…>
    }

    function getCookieValue(cookieName) {
        var cookieNameLC = cookieName.toLowerCase();
        if (document.cookie.toLowerCase().indexOf(cookieNameLC) != -1) {
            var cookies = document.cookie.split("; ");
            for (var cookieSeq in cookies) {
                var cookieSpec = cookies[cookieSeq];
                if (cookieSpec.toLowerCase().indexOf(
                       cookieNameLC) != -1 && cookieSpec.indexOf("=") != -1) {
                    return unescape(cookieSpec.split("=")[1]);
                }
            }
        }
        return undefined;
    }

    var triggerCtxIsInit = false;

    function initTabSelection(webpartId) {
        var lstVw = $('div[WebPartID^="' + webpartId + '"]');

        var cookieValue = getCookieValue("WSS_ExpGroup_{" + webpartId + "}");
        var group1Opened = false;
        if (cookieValue !== undefined) {
            var expGroupParts = unescape(cookieValue).split(";#");
            for (var i = 1; i < expGroupParts.length - 2; i++) {
                if (expGroupParts[i+1] !== "&") {
                    group1Opened = true;
                    break;
                } else {
                    i++;
                }
            }
        }

        if (group1Opened) {               
            // XsltListViewWebPart standard behaviour includes a 'remember' 
            // functionality: open the group(s) that was/were open before 
            // refreshing the page with the grouped-view. Overload that 
            // behaviour to make sure the 'tab-row' state is consistent with that.
            if ($.prototype.base_ExpColGroupScripts === undefined) {
                $.prototype.base_ExpColGroupScripts = ExpColGroupScripts;

                ExpColGroupScripts = function(c) {
                   var result = $.prototype.base_ExpColGroupScripts(c);

                   $(".ms-listviewtable").find("tbody[isLoaded]").each(function(i) {
                      if ($(this).find("td").text() === 'Loading....') {
                          var bodyId = $(this).attr('id')
                                  .substring(4, $(this).attr('id').length-1);
                          var tabButton = 
                                  $(".et-tabrow").children("[id='" + bodyId + "']");
                          if ($(tabButton).hasClass("et-tab-inactive")) {
                               $(tabButton).removeClass("et-tab-inactive");
                               $(tabButton).addClass("et-tab-active");
                          }
                      }
                   });

                   return $(result);
                };
            }
         } else {
            triggerCtxIsInit = true;
            $(lstVw).parent().find(".et-tabrow span:first-child")
                .find("a").trigger('click');
            triggerCtxIsInit = false;
         }
    }


    function TabbedView() {
        $(".ms-listviewtable").each(function(i) {
            ExecTabbedView($(this));
        });
    }

    function ExecTabbedView(lstVw) {
        var tabrow = $("<div class='et-tabrow'></div>");
        $(lstVw).before($(tabrow)).before("<div class='et-separator'></div>");

        $(lstVw).children().each(function(i) {
            // Grouping-row: level 0 or level 1
            if ($(this).attr("groupString") !== undefined) {

                // Month - lowest group level.
                if ($(this).children("[id='group1']").length > 0) {
                    var action = $("<a></a>");
                    // Set the buttonlabel := '<month> <year>' by extracting 
                    // the values from the original headings.
                    var monthValue = $(this).find("a").parent().clone().children()
                            .remove().end().text().split(" : ")[1];
                    var parentId = $(this).attr('id')
                            .substring(0, $(this).attr('id').length - 2);
                    var group0 = 
                            $(this).parent().children("[id='" + parentId + "']");
                    var yearValue = $(group0).find("a").parent().clone().children()
                            .remove().end().text().split(" : ")[1];
                    $(action).text(monthValue + " " + yearValue);
                    // Add clickhandler to:
                    // - check the 'parent-group-header in the table whether already
                    //   opened; if not trigger it to open. This is required to reuse 
                    //   the standard XsltListViewWebPart behaviour wrt remember 
                    //   state upon refresh.
                    // - invoke the 'original' one of the group-header A in the  
                    //   table; to trigger the default behaviour
                    // - if 'selected':
                    //   - hide the headings that are visualized by the default 
                    //     clickhandler
                    //   - deselect the 'tab' that is current active
                    //   - visualize the 'tab' to display as active
                    // - if 'deselected'
                    //   - visualize the 'tab' to display as inactive   
                    $(action).click(function() {
                        // On first user-initiated click; reset the overload of 
                        // ExpColGroupScripts as only applicable on initialization.
                        if (!triggerCtxIsInit && 
                            $.prototype.base_ExpColGroupScripts !== undefined
                        ) {
                            ExpColGroupScripts = $.prototype.base_ExpColGroupScripts;
                            $.prototype.base_ExpColGroupScripts = undefined;
                        }
    
                        var parentId = $(this).parent().attr('id');
                        var tabrow = $(this).parents('div[class^="et-tabrow"]');
                        var lstVw = $(tabrow).parent()
                               .find('table[class^="ms-listviewtable"]');
                        var actualAA = $(lstVw).find("tbody[id='titl" + 
                               parentId.substring(0, parentId.length -2) + "']")
                                   .find("a");
                        if ($(actualAA).find('img').attr('src')
                               .endsWith("plus.gif")
                        ) {
                           $(actualAA).trigger('click');
                        }
                        var actualA = $(lstVw).find("tbody[id='titl" + 
                              parentId + "']").find("a");
                        $(actualA).trigger('click');

                        if ($(this).parent().hasClass("et-tab-inactive")) {
                            $(lstVw).children().each(function(i) {
                                if ($(this).attr("groupString") !== undefined) {
                                    $(this).hide();
                                }
                            }); 

                            $(tabrow).children().each(function(i) {
                                if ($(this).hasClass("et-tab-active")) {
                                   $(this).find("a").click();
                                }
                            }); 

                            $(this).parent().removeClass("et-tab-inactive");
                            $(this).parent().addClass("et-tab-active");
                        } else {
                            $(this).parent().removeClass("et-tab-active");
                            $(this).parent().addClass("et-tab-inactive");
                        }
                    });

                    // Add 'tab-button' to tab-row; in chronological sorted order.
                    var button = $("<span class='et-tab'></span>");
                    $(button).attr('id', $(this).attr('id')
                       .substring(4, $(this).attr('id').length));
                    $(button).append($(action));

                    var totalMonths = 
                            parseInt(yearValue) * 12 + MonthToInt(monthValue);
                    $(button).data('TotalMonths',totalMonths);
                    var added = false;
                    $(tabrow).children().each(function(i) {
                       if (!added && parseInt($(this).data("TotalMonths")) > totalMonths) {
                           $(this).before($(button));
                           added = true;
                       }
                    });
                    if (!added) $(tabrow).append($(button));
                    $(button).addClass("et-tab-inactive");
                }             

                $(this).hide();
            }
        });

        var webpartId = $(lstVw).parents('div[WebPartID^!=""]').attr('WebPartID');
        ExecuteOrDelayUntilScriptLoaded(
            function () { initTabSelection(webpartId) }, 
            "inplview.js");

        $(lstVw).show();
    }

    var ModuleInit = (function() {
        $(".ms-listviewtable").each(function(i) {
            $(this).hide();
        });
 _spBodyOnLoadFunctionNames.push("TabbedListView.UI.TabbedView");
    })();

    // Public interface
    return {
        TabbedView: TabbedView
    }
}();

</script>

Beware: BLOB cache may miss modifications via SPD

There are 2 alternative approaches to manually (not via a SharePoint solution) update content resources (.css, .js, page layouts, masterpage) that are provisioned in a SharePoint library. Via the browser: you can download the content resource/file, make the changes in the downloaded file, and upload, checkin and publish the modified file into the SharePoint library. Alternative approach is to open the SharePoint site in SharePoint Designer, open + edit the content resource direct from within SPD, and afterwards checkin + publish the modified file from SPD.

Although both approaches work to modify the content file administrated in a SharePoint library, the SPD alternative has a caveat. This week we noticed that the SharePoint BLOB cache may miss the modification trigger when the modification is done through SPD. One of our developers changed a CSS file via SPD, but when browsing the site did not see the effect of his modifications. I immediately had my suspicion towards the BLOB cache. To verify, I inspected the BLOB cache folder on the WFEs, and noticed that on all 3 of the WFEs the date of the file in cache was earlier as the published date of the file with modifications. All other files in the cache appeared up-to-date, so it was not a situation of complete BLOB cache corruption. Merely the file changed via SPD was outdated in the cache. Pragmatic resolution here is to delete the outdated file from the BLOB cache folder on all WFEs.

Takeaways from SharePoint YamJam

The SharePoint productteam augmented with some MVPs, hosted a SharePoint YamJam tonight. A.o. Bill Baer and Benjamin Niaulin were present to answer questions and share additional insights on what has been presented previous week at MS Ignite. Below I've summarized my main takeaways from the interesting YamJam.

[Bill Baer]

For NextGen Portal experiences such as Delve, Video, etc. we're investing in bringing them to our on-premises customers via hybrid scenarios as many take dependencies on technologies we cannot package on a DVD, I.e. WAMS, Office Graph, etc.

[Benjamin Niaulin]

You'll want to start using Groups for Office 365 as much as possible for Team Collaboration as a lot of things will tie in to it, including the new portal. Get familiar with Delve right away.

[Bill Baer]

SharePoint Designer will not be shipped with SharePoint 2016; however, SharePoint Designer 2013 can be used with SharePoint 2016.

[Bill Baer]

SharePoint social capabilities as designed and delivered in SharePoint 2013 will be carried forward into SharePoint 2016 in addition to new integrated Yammer experiences thru hybrid to include Post to Yammer, etc. from SharePoint Document Libraries.

[Bill Baer]

In SharePoint Server 2016 updates are orchestrated differently mitigating the offline upgraders as experienced in earlier versions of SharePoint, we're moving to a B2B online upgrade model that alleviates the need for post-patch experiences.
We'll share more details soon, at a high level patching remains thru MSPs (w/ significant reduction), but now with 0 downtime, removing dependencies between FE and BE components and now upgraders are all done online.

[Benjamin Niaulin]

Important: InfoPath Forms Services will be in SP2016 but not InfoPath client.
My experience, though it may change: When I installed Office 2016 it removed my InfoPath 2013 on my computer. May have been a bug or something still being worked on.

. . . That’s not a bug. It’s a feature (or rather a “known issue”). Microsoft explains it at bullet No. 4 here: Known issues for Office 2016 Preview

[Bill Baer]

We'll continue to invest in broader availability of endpoints to support search scenarios, particularly connectors, and deliver on the connectors we already ship. In addition we're shipping some new APIs to support surfacing external sources in Delve (as demonstrated at \\build) and have a number of partners in our search TAP program that are actively building connectors using some of our new search experiences and endpoints.

[Mike Holste]

Regarding question: how to decide when to use Yammer and SharePoint and Office 365 Groups; Check out this Channel9 recording of Ignite session for additional guidance on what to use and when: How to Decide When to Use SharePoint and Yammer and Office 365 Groups and Outlook and Skype

[Benjamin Niaulin]

I think it'll be hard to give as it'll vary based on each organizations needs. The SharePoint Team Site is still the "big" collaboration solution with many libraries, workflows, metadata, term store, etc... It's like the ECM.

Groups is more about Team Collaboration. It pulls things from different products and provides an easy to consume solution that works well from anywhere and on any device with the updates coming.

I have a Group for:

- Blogs

- A Specific project I am doing with others (O365 Guide)

- Sharegate Marketing (especially for Calendar and OneNote)

and anyone can create a new group and get started.

The Team Site is a little bigger and requires heavier thinking, Content Types, how to place everything so that it makes sense etc.

It'll come down to knowing SharePoint vs knowing O365 Experiences and compare to see which fits best for your customers individual needs.

The reality is the users in the organizations are already using other things all over the internet for free or low cost $ per user per month. Bypassing IT altogether.

Groups provides an alternative they can consume without having to go to IT to request a heavy duty Site that requires SharePoint Training (even though it's SharePoint behind it)

[Bill Baer]

On the development side, we'll continue to support FTC, invest more in hybrid apps via CAM, in addition to bringing much of the cloud experience to on-premises to draw parity between developing for the service and on-premises. Namely subscription apps, common consent, and Office 365 APIs as initial investment areas.

Beware of script-dependencies with AMD loading

Asynchronous Module Definition is very useful to manage the loading of (larger) sets of libraries in the JavaScript runtime engine. Instead of explicit in own code take the responsibility for loading each needed javascript library one by one, it is more managable to delegate this to one of the AMD implementations. Require.js is by my knowledge most applied currently, but there are alternatives.

Our developers have implemented AMD loading in multiple of our custom build SharePoint Apps, utilizing Require.js. On inspecting (F12, Fiddler) the request/response traffic of our App-Model based intranet, we observed that sometimes a specific script file is requested twice, and the 2nd time from wrong url and not in minimized version. When I asked the App developer about it, he could not explain: from his code, he explicitly specified to load the minimized library. Also weird that the re-request does not occur always.

I decided to inspect runtime behavior plus the App code myself, and try to analyze (or rather, puzzle) what caused the behavior.

Code inspection

require(['../Scripts/AppHelpers'], function () {
    var spHostUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));
    var hostProtocol = spHostUrl.split("//")[0];
    var hostRoot = spHostUrl.split("//")[1].split("/")[0];
    spHostUrl = hostProtocol + "//" + hostRoot;
    require([spHostUrl + '/Style%20Library/Scripts/jquery-1.11.1.min.js'], function () {
        require([spHostUrl + '/_layouts/15/MicrosoftAjax.js',
                 spHostUrl + '/_layouts/15/init.js',
                 spHostUrl + '/_layouts/15/sp.runtime.js',
                 spHostUrl + '/_layouts/15/sp.js',
                 spHostUrl + '/_layouts/15/sp.requestexecutor.js',
                 spHostUrl + '/_layouts/15/sp.core.js',
                 spHostUrl + '/_layouts/15/sp.init.js',
                 spHostUrl + '/_layouts/15/ScriptResx.ashx?culture=en%2Dus&name=SP%2ERes',
                 spHostUrl + '/_layouts/15/sp.ui.dialog.js',
                 "../Scripts/jquery.rotate.js",
                 "../Scripts/moment.min.js",
                 "../Scripts/moment-timezone.min.js",
                 "../Scripts/ListController.js",
                 "../Scripts/UserSettings.js",
                 "../Scripts/sp.communica.js",
                 "../Scripts/App.js"], 
             function () {
                     jQuery(document).ready(function () {
                         initialize(function () { });
             });
    });
});

Basically, the above code instructs require.js to first load the library ‘/Scripts/AppHelpers.js’, once that is loaded to load jQuery library, and once that is loaded, load a bunch of other libraries that are a.o. dependent on jQuery. And when all libraries loaded, invoke a custom initialization function (not displayed here, as not relevant for the issue).

Runtime analysis, via Fiddler and F12

In Fiddler, often however not always, the following sequence of requests is visible.

So first ‘/Scripts/moment.min.js’ is succesful requested, followed by unsuccesful (HTTP 404) request for ‘/Pages/moment.js’. The initiator of the http-request is setting the ‘src’ property of a <Script> element. Likely this is initiated from require.js handling.

I also inspected the runtime DOM. Herein it becomes clear why the browser requests the library a second time. And also it is indeed inserted in the DOM by require.js handling, as visible via the require.js properties.

Explanation: asynchronous loading + library-dependency

In the above displayed App HTML code, you see that in 3rd require.js load handling, a set of libraries are requested for load on the same level. Crucial here is that:

RequireJS uses Asynchronous Module Loading (AMD) for loading files. Each dependent module will start loading through asynchronous requests in the given order. Even though the file order is considered, we cannot guarantee that the first file is loaded before the second file due to the asynchronous nature

(source: Understanding RequireJS for Effective JavaScript Loading)

In the App code, moment.min.js and moment-timezone.min.js are specified required at same level:

       "../Scripts/moment.min.js",
       "../Scripts/moment-timezone.min.js",

But AMD thus does not guarantee that moment.min.js is loaded BEFORE moment-timezone.min.js; And as moment-timezone.min.js on its turns includes “define(["moment"],b)”, require.js resolves this to load the moment.js library in case not yet loaded. This explains why it does not always occur: sometimes moment.min.js is already loaded, sometimes not…

Solution

There are 2 alternative approaches to resolve the behavior. Essence of both is to make sure that moment.min.js is loaded before the dependent library moment-timezone.min.js:

1. Extend on the above code-pattern of explicit separating the load of libraries: still retrieve moment.min.js in the 3rd level, and move the load of moment-timezone.min.js to a 4th level:

   
   require(['../Scripts/AppHelpers'], function () {
       var spHostUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));
       var hostProtocol = spHostUrl.split("//")[0];
       var hostRoot = spHostUrl.split("//")[1].split("/")[0];
       spHostUrl = hostProtocol + "//" + hostRoot;
       require([spHostUrl + '/Style%20Library/Scripts/jquery-1.11.1.min.js'], function () {
           require([spHostUrl + '/_layouts/15/MicrosoftAjax.js',
                    spHostUrl + '/_layouts/15/init.js',
                    spHostUrl + '/_layouts/15/sp.runtime.js',
                    spHostUrl + '/_layouts/15/sp.js',
                    spHostUrl + '/_layouts/15/sp.requestexecutor.js',
                    spHostUrl + '/_layouts/15/sp.core.js',
                    spHostUrl + '/_layouts/15/sp.init.js',
                    spHostUrl + '/_layouts/15/ScriptResx.ashx?culture=en%2Dus&name=SP%2ERes',
                    spHostUrl + '/_layouts/15/sp.ui.dialog.js',
                    "../Scripts/jquery.rotate.js",
                    "../Scripts/moment.min.js", function () {
               require(["../Scripts/moment-timezone.min.js",
                        "../Scripts/ListController.js",
                        "../Scripts/UserSettings.js",
                        "../Scripts/sp.communica.js",
                        "../Scripts/App.js"], function () {
                    jQuery(document).ready(function () {
                        initialize(function () { });
                });
       });
   });
   

2. Configure Require.js to be aware of the Module dependency

   
   requirejs.config({
     shim: {
       'moment-timezone.min': ['moment.min']
     }
   });
   

CQWP, PictureLibrary and Blobcache

ContentByQueryWebPart is a very usable ‘tool’ to display all types of SharePoint data in a page. Listdata, document libraries and also picture library. But be aware that CQWP has some strange default behaviour wrt picture library. CQWP by default displays the preview images, instead of the actual images.

This also has several performance ramifications:

1. On server side: actual images can be cached in blobcache, but preview images and also thumbnails are by SharePoint design not cached in blobcache. The reasoning is that blobcache is for content that is multiple times (often) retrieved, while preview images are typically only of interest for content manager upon functional management of the picture library contents. As result, each request for a preview image means that SharePoint needs to retrieve it from the content database.
2. On client, network + server side: browser cache can be applied to avoid the browser over and over requesting same image. But the browser then still needs to query the server whether the cached resource is unmodified at the server (response 304). For images / static resources that do not change (often), even this request can be avoided: minimizing request/response handling between client (browser), server, and the network transfer. Browsers support this via ‘max-age’ setting. SharePoint supports this ‘max-age’ setting for SharePoint content, via… Blobcache. For SharePoint content retrieved outside blobcache, as thus preview images, the max-age value is not set in the http response. As result, the browser will query the remote SharePoint server whether the image is unmodified, and the server responds with '304 NotModified'. And this can end-up in some noticeable latency, dependent on how busy the SharePoint server is:

Solution is to modify the CQWP configuration to retrieve and display the actual image. This comprises of 2 parts:

1. In the ItemStyle.xsl, change the rendering specification to display ‘EncodedAbsUrl’ iso ‘ImageUrl’;

2. And you need to modify the ‘CommonViewFields’ specification of CQWP instance, to also include ‘EncodedAbsUrl’.

ScriptEditor reloads script-links

On the homepage of our SharePoint 2013 intranet we allow employees to install apps. One of them is for internal company ‘fun and facts’: Did you know? The global design of this app is a SharePoint list with the ‘fun and facts’, and jQuery script to get selected listitems via listdata.svc and bind the returned JSON data to html elements. The jQuery script is deployed to the Style Library in the site collection, and the link to this script file is provisioned to the page via a ScriptEditor webpart:

<div id="DW-DYK-Container"></div>
<script type="text/javascript" src="/Style Library/Scripts/DidYouKnow.js" ></script>

For performance tuning I regularly monitor via Fiddler the http requests that the browser sends for a page visit. With the modern web applications constructed partly as html+css+javascript, the number of http requests can grow to a larger set as one is aware. In the Fiddler trace, I spotted the browser request for the script file ‘/Style Library/Scripts/DidYouKnow.js’, on which SharePoint responds with ‘304 NonModified. But to my surprise I also noticed a second Http Get request for the same script file, and this url is made unique to force renewed retrieval from the server.

I analyzed what causes this second request for the script file. My finding is that it is caused by the ScriptEditor class. The above ScriptEditor content is rendered to the following html:

SharePoint 2013 includes Embed Code handling that detects ‘orphan’ client script code in the page html, and does some magic with that. Part of that magic apparently is to force the (re)loading of script-links that are within the ‘ms-rte-embedcode’ div-element, via an equivalent of jQuery’s getScript() method (that also adds an unique part to the url to force script file reload from the server). However, from performance and in particular latency perspective, I dislike this behaviour: I do not want the extra request and certainly not the everytime renewed retrieval of the script-file of which I know it remains stable. So I came up with an approach to break out of the ‘magic’ of ScriptEditor: move the ‘script’ element outside of the ‘ms-rte-embedcode’ div-elements:

<div id="DW-DYK-Container"></div>
<script language='javascript' type='text/javascript'>
    var head = document.getElementsByTagName('head').item(0);
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', '/Style Library/Scripts/DidYouKnow.js');
    head.appendChild(script);
</script>

I admit: the code is more complex as the initial one. But the result is what I want: no more duplicate and repetitive forced retrieval of the script file.

Max-age cache-control setting for SharePoint content

Browser-cache is often utilized to improve the performance and in particular latency of webapplications. Default, the browser will still go back to the remote web server on each request for cached resources to ask whether it can be reused from cache (HTTP 304), or has changed on the server since retrieved. For resources that rarely or never change (e.g. a specific version of jQuery library), it is beneficial to avoid the browser even send out the ‘has it changed’ requests. The http protocol supports this via ‘max-age’ cache-control header.

SharePoint supports the ‘max-age’ header setting. Application pages retrieved from the file system (12/14/15 hive) follow the IIS Response Headers setting. However, the IIS setting is not applied to content that is retrieved from SharePoint lists and libraries. If you also want to have the ‘max-age’ setting in the HTTP response for these items, you need to enable the SharePoint blobcache and specify ‘max-age’ value in the web.config: <BlobCache location="C:\blobCache" path="\.(gif|jpg|png|css|js)$" maxSize="10" max-age="86400" enabled="true"/>

Something to be aware of is that SharePoint only applies the blobcache for published items. The version of a file stored in a SharePoint library (e.g. Style Library) that has not been published, will not be cached in the blobcache. The valid reasoning here is that caching is contra-productive, as non-published SharePoint content typically is accessible to only a few persons instead of a large(r) audience. A consequence of this is that the ‘max-age’ cache-control setting will not be set in the http response for the retrieved item if the logged-on user has SharePoint permission to see the non-published version:

Publish the version, and the 'max-age' cache-control setting is included in the http response.