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.
-
After each search result:
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:- Initialize my variable in Control Display Template.
- ‘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.
- 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. -
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 = [];
ctx.OnPostRender.push(function(){
if ($(“#slideshow”).exists()) {
$(“#slideshow”).wtRotator();
}
});
Another way of doing the same is using ‘AddPostRenderCallback’. Here’s an example:
AddPostRenderCallback(ctx, function(){
if ($(“#slideshow”).exists()) {
$(“#slideshow”).wtRotator();
}
});
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.
