Skip to main content


Developing Rich UI Applications with Display Templates

As part of working on two SharePoint 2013 WCM projects I’ve had the opportunity to develop a lot of Display Templates. At first, Display Templates development sounded more painful than it should be, but as I spent more time I found a few techniques to easily build rich interfaces. In this post I’ll go over two techniques that we used extensively: 1) Execute custom code after each search result is processed 2) Execute custom code after all search results are processed.

  1. After each search result:Developing Rich UI Applications with Display Templates

    Each search result is processed in an item template where you build the HTML for that particular search result. I was working on a simple requirement to apply a specific CSS class on the last item of the search results. My requirement was to show search results in a

      element so each search result is a

    • element, and I have to put a specific CSS class on the last
    • element. I couldn’t find a way to get the index of the current item, so, can’t put a class name on
    • conditionally. My first thought was to declare a variable in Control Display Template and increment it Item Display Template and use it to check the index of current search result. But that doesn’t work because every Item Display Template invocation is a separate JavaScript function call and any variable manipulation in the function call won’t be preserved.

    ‘ctx’ object drives the client-side processing of Content By Search (CBS) web part. It has all the search results being processed, and ton of other useful information. Best way to learn about it is open browser’s Dev tools, put ‘ctx’ object in the watch window and go through its different properties.
    For my scenario, approach that worked for me is to put a custom variable in the ‘ctx’ object and increment it after each item template is processed.
    Here are the steps to implement this:

    1. Initialize my variable in Control Display Template.
    2. ‘ctx’ object has a property called ‘ItemRenderWrapper’. This points to a function that gets called after each Item Template is processed. Assign a custom function to this property and increment above custom variable in this function.
    3. If the counter is equal to the number of items in the search result, apply conditional CSS here.

    Here’s the code summary:

    ‘ctx’ object is created in Control Display Template and is available during Item Display Template processing, so another way of doing this is initialize the custom variable in Control Display Template and do all the conditional logic in Item Display Template.

  2. After all search results:

    Another useful property in ‘ctx’ is ‘OnPostRender’. This property takes a pointer to a function and Display Template processing pipeline will execute that function after all the Item Template calls are finished. If you want to initialize a jQuery plugin on the HTML generated by the Display Template, this is where you’d do that. ‘OnPostRender’. You can also initialize ‘OnPostRender’ as an array, push your JavaScript functions to the array, and those functions will be executed in that order. Here’s an example:
    ctx.OnPostRender = [];


if ($(“#slideshow”).exists()) {




Another way of doing the same is using ‘AddPostRenderCallback’. Here’s an example:

AddPostRenderCallback(ctx, function(){

if ($(“#slideshow”).exists()) {




Display Templates development does take some getting used to, but as you can see, using the above two ways it is possible to build rich UI applications using Display Templates.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Raja Ayyapusetty

Raja is a software consultant with over 9 years of experience in designing, developing and testing complex solutions using Microsoft technologies. Throughout his career he has worked primarily on SharePoint and .NET technologies. Raja has worked with SharePoint since the 2003 version and has deep understanding of its features and capabilities. Raja is also a certified Sitecore developer.

More from this Author

Follow Us