sharepoint 2013 client-side rendering (csr) & jslink templates

SharePoint Saturday Gulf#SPSGulf

Client Side Rendering in SharePoint 2013

(DeepDive)Muawiyah Shannak

Our Sponsors:

Twitter: @MuShannak

Blog: mushannak.blogspot.ae

LinkedIn: linkedin.com/in/shannak

Slideshare:

slideshare.net/MuawiyahShannak

Website: mushannak-

public.sharepoint.com

Muawiyah ShannakSharePoint Architect, MCC & UAE-SPUG

Leaders

Agenda

• Introduction

• CSR Model

• Advantages

• Building CSR Template

OOTB List forms and views

• Lists are a key, underlying feature of your SharePoint site

• Forms: A page that allows users to create, view, or edit an item in a list.• New• Edit• Display

• Views: A named collection of settings for querying and displaying items in a SharePoint list

OOTB CapabilitiesDemo 1

Customize SP 2013 forms & views

Asp.net InfoPath Custom Fields

Custom JavaScript XSLT CSR

What is Client-side rendering (CSR)

Client-side rendering enables you to customize UI components by using JavaScript on the client as opposed to on the server.

CSR ExamplesDemo 2

Server Side Render

Request

HTML

Content DB

Server

Processing

Browser

Client Side Render (CSR)

Request

JSON

Browser

Content DB

Server

Processing

JSON to HTML

How it’s workDemo 3

CSR advantages over other options

Single field, entire view or form

Flexibility

Rendering is performed on the client side.

Performance

Web developers will already be familiar with JavaScript

Ease of Development

Consistency with SharePoint OOTB views and forms

Consistency

Build and Use CSR Template

Build

Create JSLink JavaScript files and define a template

Upload

Upload templates files to

SharePoint(system files or libraries)

Update the property

Update the JSLink property by using OOTB, PowerShell,

code or schema

Build CSR Template

• Custom context variable

• Register the context

• Custom context variable

Field (internal name)

Display mode

Function return string (html) value

CSR Field TemplatesDemo 4

Where we can use CSR Templates

Override fields render in display,

edit and new forms.

Forms

Display Templates

Search Result

List View

• Fields

• Items

• Body

• Group

• View

• Header

• Footer

CSR & List Views

Fields

Item

Body

Header

Footer

View

CSR Item Template

CSR Item TemplateDemo 5

CSR & Forms

Fields

OnPreRender and OnPostRender

• OnPreRender: The JavaScript event handler for the event that occurs immediately before the field is rendered to its containing place. Useful usage scenario: request more dilated data

• OnPostRender: The JavaScript event handler for the event that occurs immediately after complete the field HTML render. Useful usage scenario: applying JQuery UI transformation

OnPostRenderDemo 6

Link CSR files

PowerShellOOTB

Code (Client & Server API) CAML

Link CSR files using PowerShell

Demo 6

Samples

http://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a

Our Sponsors:

SharePoint Saturday Gulf#SPSGulf

Thank You!