Applies To: SharePoint 2013, 2016, Office 365

List View Client Side Rendering Primer: 5 of 5

About This Series

This series provides a brief overview of Client Side Rendering for List Views (often referred to as JSLink). Basic extension points and examples are included. The goal of this series is to get developers unfamiliar with this programming model quickly up to speed.

• An Introduction to Client Side Rendering
• Benefits of Client Side Rendering
• Getting Started
• List View Extension Points
• Client Side Rendering Best Practices ⇐You Are Here

CSR Best Practices

• Use SPURLs (~site, ~sitecollection, ~layouts, ~sitecolletionlayouts, ~sitelayouts etc.) when referencing JSLink files in the XSLTListView web part
  • Not yet supported in csrShim
• Specify multiple JavaScript files (like jQuery) using a pipe to separate the URLs (they will be loaded in order)
• Wrap your JS Link code in an Immediately Invoked Function Expression (IIFE)
• Specify the BaseViewID and the ListTemplateType when targeting your list view
• Use Template Functions for all but the simplest templates
• Don’t rely on the Footer template to close elements from either the Header or Item template
• If there are no items returned, the Item template will never be called, so add logic to close the elements from the header when ctx.ListData.Row.length == 0
• Use csrShim when placing multiple CSR list views on a single page
• Use csrShim when using CSR with Content by Query web parts
• Use csrShim when using CSR with RSS, RDF, Atom, or Atom2 feeds
• Use csrShim when using CSR with custom XML