Quick Tip: Display Templates and jQuery plugins in SharePoint 2013

Here is a good article on Display Templates and Result Sets in SharePoint 2013. jQuery comes to mind when you think of the most common framework people use to manipulate and display content on the client side. There are a huge number of plugins that transform your HTML structure into a visually appealing format. These plugins need to be invoked after the html has been loaded in DOM.

Display Templates work a little differently. The skeleton gets loaded in DOM and then when the search results are fetched, they are transformed into the HTML structure that the Item Template defines.

So, as a developer you need to know when to invoke your plugin. If you invoke your plugin before the content is rendered, the plugin won’t find any child elements and will not work as expected.

SharePoint 2013 provides an array called OnPostRender as part of the context. Any function that is added to this array will be invoked after the search results have been transformed using the Item Template.

In your List Display Template add the following in the first DIV under the BODY tag.

The IT Leader's Guide to Multicloud Readiness

This guide provides practical key insights and important factors to consider to make informed decisions in your multicloud journey.

Download the Guide

<!–#_

ctx.OnPostRender = [];

ctx.OnPostRender.push(function(){

/* invoke your plugin code here to ensure the plugin has the content to work against */

});

_#—>

You will need to use this to create carousels, jQuery Mobile transformations, accordions, etc.