Introduction to JSLink

In SharePoint 2013

Jameson Bozeman

Session Preview

Introduction to JSLinkOut with the old – XSLTIn with the new – JSLinkJSLink TutorialCase studies

List ViewsFormsReports

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 waysGives you an easy way to access and override content outside of normal JavaScript

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

JSLinkAdvantages

Easy to write Easy to debug Less server load Extensible - Javascript libraries Flexible in application

DisadvantagesAt mercy of the users hardware and browser

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

Ways to Apply JSLink – The ProcessWeb Part PropertiesPowerShellProgrammatically

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

Ways to Apply JSLink – The TargetItems and DocsFieldsWhole Web PartsForms

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.MyRenderingLogicFunction, } }

Helpful Links

Great JSLink Tutorialhttp://www.martinhatch.com/2013/08/jslink-and-display-templates-part-1.html

Good Article for Deployment Methods i.e. Programatically and Powershellhttp://www.martinhatch.com/2013/08/jslink-and-display-templates-part-1.html

Many examples of ways to use JSLinkhttp://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a

Code example – helpful demonstration of using registerGetValueCallback to submit values in edit formshttp://code.msdn.microsoft.com/office/Client-side-rendering-code-94145281

Any Questions?