Friday, September 25, 2015

Getting past the CSWP item limit of 50 results–in one page load

I wrote about a solution to this back in 2013, which today seems a bit hacky. Elio Struyf also recently wrote about this (and I stole the post title from him :-) where he does subsequent 50 item loading calls to fill up the item list.

Here’' I’ll show a solution which can load up to whatever limit is set at the SSA or tenant (which by default is 500) on the initial load of the CSWP. I will use the same approach as I did when configuring the OSSSearchResults.aspx page in How to do a light weight search center using osssearchresults.aspx (part 2/3).

The limit of 50 is hard coded in the CSWP server side – see my original post for details.
imageThere is one pre-requisite to make this work, and that is to configure the CSWP to act in an asynchronous way.

First I’ll set the CSWP to show 42 items. I use the magic number 42 as a trigger to know when to load 500.

This means if you have multiple CSWP’s on a page, only the ones set to 42 will be expanded to 500. (The other way to identify a CSWP is to set the Alternate Error Message field, and use that as your id.)

Next up click Change query to launch the query builder, pick the Settings tab, and check the Async option.

image

Now the CSWP is primed for action. All you need is to add some script to your page. You can either add this in a script web part, attach via pagelayout/master page, or hook it up as a custom user action on the page. Any thing goes as long as the script is on the page before search is triggered.

You can find the complete script at my github repo, which includes register of the changeMaxResults function in the page lifecycle.

// Author: Mikael Svenson - @mikaelsvenson
// techmikael.blogspot.com
"use strict";
(function () {
  function changeMaxResults() {
    var magicNumber = 42;
    var newMax = 500;
    ExecuteOrDelayUntilBodyLoaded(function () {
      SP.SOD.executeFunc("search.clientcontrols.js", "Srch.ScriptApplicationManager", function () {
        var scriptManager = Srch.ScriptApplicationManager.get_current();
        for (var queryGroupName in scriptManager.queryGroups) {
          var queryGroup = scriptManager.queryGroups[queryGroupName];
          if (queryGroup.dataProvider) {
            var currentCount = queryGroup.dataProvider.get_resultsPerPage();
            if (currentCount === magicNumber) {
              queryGroup.dataProvider.set_resultsPerPage(newMax); // set the query to retreive 500 items per page
              var searchControls = queryGroup.displays;
              for (var i = 0; i < searchControls.length; i++) {
                if (searchControls[i] instanceof Srch.ContentBySearch) {
                  searchControls[i].set_numberOfItems(newMax); // set CSWP to show 500 items per page
                  break;
                }
              }

            }
          }
        }
      });
    });
  }
}());

Here’s a zoomed out screenshot to illustrate that you get more than 50.

image