JSLink is client functionality in SharePoint 2013 that allows you to format the look, feel and functionality of various objects such as site collection fields, list forms and list views. This session will take the audience from the absolute beginning of using JSLink to examples of using it in real world applications. Level: Beginner

1. Introduction to JSLink
In SharePoint 2013
Jameson Bozeman

2. Session Preview
Introduction to JSLink
Out with the old – XSLT
In with the new – JSLink
JSLink Tutorial
Case studies
List Views
Forms
Reports

3. What is JSLink
JSLink is a property that controls rendering of
fields, items and Web Parts through a JavaScript
file.
Ties JavaScript to SharePoint objects in many different
ways
Gives you an easy way to access and override content
outside of normal JavaScript

4. XSLT
Advantages
Server side - Compatibility and performance with slow clients
Only way to customize some web parts (CQWP)
Simple changes could be done through design view (not in SharePoint
designer 2013)
Disadvantages
Hard to learn or read
Hard to debug

5. JSLink
Advantages
Easy to write
Easy to debug
Less server load
Extensible - Javascript libraries
Flexible in application
Disadvantages
At mercy of the users hardware
and browser

6. Structure of JSLink File
//Create Namespace
var JamesonsNamespace = {};
//Function to tell SharePoint how to render field
JamesonsNamespace.JamesonsItemOverrideFunction = function (ctx) { return "<div>Demo
Content</div>"; };
//Register for override
JamesonsNamespace.Templates = {};
JamesonsNamespace.Templates.Item = JamesonsNamespace.JamesonsItemOverrideFunction;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(JamesonsNamespace);
Grey Content is JSLink Specific and doesn’t change

7. Ways to Apply JSLink – The
Process
Web Part Properties
PowerShell
Programmatically
Tokens
~site – reference to the current SharePoint site (or
“Web”)
~sitecollection – reference to the current SharePoint
site collection (or “Site”)
~layouts – version specific reference to the web
application Layouts folder (so it will automatically swap
out /_layouts/14 or /_layouts/15 for you)
~sitecollectionlayouts – reference to the layouts
folder in the current site collection (e.g.
/sites/team/_layouts/15)
~sitelayouts – reference to the layouts folder in the
current site (e.g. /sites/teams/subsite/_layouts/15)
Note:
Use Pipes “ | ” as a separator to add multiple
JavaScript files and Libraries
Example: ~site/siteassets/jquery-1.11.0.min.js|~site/siteassets/StatusColumnOverride.js

8. Ways to Apply JSLink – The
Target
Items and Docs
Fields
Whole Web Parts
Forms
Rendering Methods
• DisplayForm – Display/View item form
• EditForm – Edit form
• NewForm - New forms
• View – List view webparts
Example:
MyCustomNamespace.Templates.Fields =
{
‘MyFieldtoOverride':
{
'View':MyCustomNamespace.MyRenderingLogicFunction,
'DisplayForm':MyCustomNamespace.MyRenderingLogicF
unction,
}
}

9. Helpful Links
Great JSLink Tutorial
http://www.martinhatch.com/2013/08/jslink-and-display-templates-part-
1.html
Good Article for Deployment Methods i.e. Programatically and
Powershell
http://www.martinhatch.com/2013/08/jslink-and-display-templates-part-
1.html
Many examples of ways to use JSLink
http://code.msdn.microsoft.com/office/Client-side-rendering-JS-
2ed3538a
Code example – helpful demonstration of using
registerGetValueCallback to submit values in edit forms
http://code.msdn.microsoft.com/office/Client-side-rendering-code-
94145281

10. Any Questions?