Quick Tip: Display Templates and jQuery plugins in SharePoint 2013 - Perficient Blogs
Blog
  • Topics
  • Industries
  • Partners

Explore

Topics

Industries

Partners

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.

<!–#_

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.

One thought on “Quick Tip: Display Templates and jQuery plugins in SharePoint 2013

Leave a Reply

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

Subscribe to the Weekly Blog Digest:

Sign Up