This project is read-only.

Lightweight CSR library

Lightweight CSR library is a TypeScript library for creating template overrides. This library provides fluent syntax to customize rendering templates and fully compatible with SPClientTemplates definitions.

Lightweight CSR consists of two API tiers.

Tier 1 is suitable for customizing default list views and forms.

Sample code (tier 1, list view customization):
CSR.override(10057, 2)
   .onPreRender((ctx: SPClientTemplates.RenderContext_InView) => {
       // Override the default title with user input
       ctx.ListTitle = prompt("Type a title", ctx.ListTitle);
                       + "<hr><ul id='unorderedlist'>")
   .item(ctx => "<li>" + ctx.CurrentItem['Title'] + "</li>")

Sample code (tier 1, field rendering customization):
var complexityFieldName = "ComplexityField";
return CSR.override()
          .fieldView(complexityFieldName, SPFieldComplexity_View)
          .fieldDisplay(complexityFieldName, SPFieldComplexity_Display)
          .fieldEdit(complexityFieldName, SPFieldComplexity_Edit)
          .fieldNew(complexityFieldName, SPFieldComplexity_Edit)

Typescript provides intellisense for methods and type inference for lambdas.

Tier 2 is suitable for deep customizing rendering of views and forms.

Sample code (tier 2, list view customization):
Csr.override(10057, 2)
   .template('Header', "<b><#=ctx.ListTitle#></b>"
                        + "<hr><ul id='unorderedlist'>")
   .template('Item', customItem)
   .template('Footer', '</ul>')

You can override any template or add your templates to rendering process.

For compatibility you can cast CSR object to SPClientTemplates.TemplateOverridesOptions and use any properties or methods not provided by Lightweight CSR library.

Sample code (compatibility tier, list view customization):
var csr = Csr.override().template('View', customView);
var overrides = <SPClientTemplates.TemplateOverridesOptions>csr;
overrides.ViewStyle = ...;

Last edited Mar 20, 2013 at 7:11 PM by gandjustas, version 2


No comments yet.