15
CLIENT SIDE RENDERING IN SHAREPOINT 2013 SharePoint Techfest Dallas

Client Side Rendering in SharePoint 2013

Embed Size (px)

Citation preview

Page 1: Client Side Rendering in SharePoint 2013

CLIENT SIDE RENDERING

IN SHAREPOINT 2013

SharePoint Techfest Dallas

Page 2: Client Side Rendering in SharePoint 2013

2

About Me

Principal Consultant at Sparkhound in Baton

Rouge

http://www.sparkhound.com/pages/blogs.asp

x

@codygros

Leader of the Baton Rouge SharePoint User

Group – www.brspug.com

Page 3: Client Side Rendering in SharePoint 2013

3

AGENDA

What is Client Side Rendering (CSR)

Benefits & Options

Demos

Page 4: Client Side Rendering in SharePoint 2013

4

Client Side Rendering

(CSR)

Method to transform the look and the feel of

data in SharePoint using the client(browser).

Utilizes client side technologies such as:

HTML

JavaScript

CSS

The two common options are:

Display Templates (Search)

JSLink

Page 5: Client Side Rendering in SharePoint 2013

5

Client Side Rendering

Page 6: Client Side Rendering in SharePoint 2013

6

CSR Advantages

Performance

Executed on the client as opposed to the

SharePoint server

Modern Technology

No more XSL!!!!

Conditional Formatting

Page 7: Client Side Rendering in SharePoint 2013

7

JSLinkProperty added to the following

objects in SharePoint 2013:

SPContentType

SPField

SPForm

SPView

Points to a custom JavaScript file for

overriding the default rendering

Page 8: Client Side Rendering in SharePoint 2013

8

JSLinkAvailable in all versions of SharePoint 2013

Foundation

Server

O365

Page 9: Client Side Rendering in SharePoint 2013

9

DEMO

Page 10: Client Side Rendering in SharePoint 2013

10

Override OptionsField

Items

Header

Footer

Group

Page 11: Client Side Rendering in SharePoint 2013

11

Field OverrideFormat:

Page 12: Client Side Rendering in SharePoint 2013

12

Item OverrideFormat:

Page 13: Client Side Rendering in SharePoint 2013

13

Override OptionsOnPreRender

Overrides

OnPostRender

Page 14: Client Side Rendering in SharePoint 2013

14

Questions??

Page 15: Client Side Rendering in SharePoint 2013

15