Client Side Rendering (CSR)

CSR in SharePoint 2013 is an essential tool for rendering list views and list forms, using JavaScript techniques. CSR replaces notorious XSLT rendering system introduced in SP2010. Currently ALL SharePoint list types except for Survey and Calendar are rendered via CSR! This is really powerful stuff and you gain many benefits from using it in your own projects.

Native CSR API classes can be found in 15/TEMPLATE/LAYOUTS/clienttemplates.debug.js file.

Disclaimer

Client Side Rendering system in SharePoint allows different types of parameters to be passed when registering template overrides, which is not supported by TypeScript.

For example, you can pass either function (recommended) or string as a template.

In the latter case, the string is parsed using SPClientRenderer class, so that all context tokens are replaced with actual context values. Though in this case, TypeScript doesn't bring any benefits: obviously, intellisense doesn't work inside strings.

Thus in the declarations, we decided to stick to functions only. This also holds true for some other cases, i.e. when either single value or an array is allowed - we use single value, etc. In 99% real cases it is OK, and these considerations significantly help in making the declarations more prescriptive and thus much easier to learn.

If you still need to use string templates for some reason, just change a strict type (e.g. "ItemCallback") in the declaration to "any".

E.g. you have this in the TemplateOverrides class declaration:

/** Defines template for list items rendering. */
Item: ItemCallback;

Then change it to:

/** Defines template for list items rendering. */
Item: any;

Examples

CSR is really simple in usage, especially with TypeScript. There are two basic steps:

  1. Register templates overrides.
  2. From your override, render HTML to a string based on the context values.

We created several examples for you:

  1. Customizing a list view
  2. Custom "Complexity" field rendering
  3. Conditional formatting of the view on-fly (applying different colors to items of the list depending on their contents)

Download our Examples project to get the source code.

Last edited Mar 15, 2013 at 12:55 AM by omlin, version 15

Comments

No comments yet.