Custom JavaScript Code After a Display Template Loads

July 11, 2013 By 4 Comments

Display templates are one of my favorite new features of SharePoint 2013. That and the Design Manager. Anyhow, with display templates it is now much more easy to retrieve results from search and display the results in a custom manner.

What I often want to do is let SharePoint provide the query results, but I want to use custom JavaScript or jQuery to handle the actual rendering and user interaction with the results. As an example consider the jQuery plugin, Isotope. I really like how this plugin can create a dynamic grid of data that is sortable inline with nice animation. Anyhow, the HTML required for Isotope is easy enough with display templates. The control template can create the simple container Isotope requires, then the item template can be coded to provide the HTML for each item. The catch is that we need our custom JavaScript code to execute after the display template has completely rendered the HTML.

htmloutputofdisplaytemplatesLet me explain. Display templates are actually JavaScript code that SharePoint generates for you based on the .html control and item display templates you create. This JavaScript code is then executed by the browser after the search results are returned by SharePoint to the client. We need to make sure that our plugin or any custom JavaScript code we may wish to add executes after the display templates have done their magic.

Easy enough, SharePoint once again has our back.

In the control display template we can use the ctx object SharePoint provides us. In particular we may use the property ctx.OnPostRender to store a function or array of functions we want the control display template to execute after the entire control and item templates have rendered.

A quick example

1
2
3
4
5
6
7
8
9
<!--#_
ctx.OnPostRender = function() {
     var isoContainer = $('#'+itemsContainerId);

     isoContainer.isotope({
          itemSelector: '.element'
     });
};
_#-->

Now let’s look at a more complete control display template, this time setting ctx.OnPostRender to an array and then pushing a function onto the array. In this manner you could load up multiple functions you want run in order after a display template has rendered. Note that I took out some extra code from this control template and we are also ignoring the item template as it is not important to show ctx.OnPostRender

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>Isotope Control Template</title>

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string"></mso:MasterPageDescription>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>

<body>
    <script>
        $includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");
          $includeScript(this.url, "~sitecollection/_catalogs/masterpage/scripts/jquery.min.js");
    </script>

    <div id="IsotopeControl">
<!--#_
var $noResults = Srch.ContentBySearch.getControlTemplateEncodedNoResultsMessage(ctx.ClientControl);

if (!$isNull(ctx.ClientControl) && !$isNull(ctx.ClientControl.shouldRenderControl) && !ctx.ClientControl.shouldRenderControl()) return "";

var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_slideShow_");
var itemsContainerId = encodedId + "container";

ctx.OnPostRender = [];

ctx.OnPostRender.push(function(){
     var isoContainer = $('#'+itemsContainerId);

     isoContainer.isotope({
          itemSelector: '.element'
     });
});
_#-->

          <div id="container" id="_#= itemsContainerId =#_">
               _#= ctx.RenderGroups(ctx) =#_
          </div>
    </div>
</body>
</html>

There are truly endless possibilities with search, display templates and a custom UI and branding in SharePoint 2013.

Filed Under: SharePoint 2013

Comments

  1. Robert Merritt says:
    June 11, 2017 at 6:22 pm

    Hi Eric, Awesome display template demos! Thank so much. May I ask if you know of a full SharePoint Display Template JavaScript reference?

    Reply

Speak Your Mind

*