Client-Side Rendering (CSR) demystified

Client-Side Rendering (CSR) demystifiedWes PrestonOwner / ConsultantTrecStone, LLC.

SPC318

AbstractSharePoint 2013, both in Office 365 and on-premises, provides the ability to customize how list views and forms are displayed using JavaScript and HTML without managed code. This session includes a primer on implementing customizations through the Web interface with examples such as conditional formatting - custom options no longer available through the SharePoint Designer tool.

Who? Developers AND Info Workers Explain where CSR + JS Link fits into the

toolset Explain the basics of using JS Link to

implement CSR Show some practical examples Review, governance, and resources

Objectives and Target Audience

Wes PrestonOwner / Principal Consultant - TrecStoneBased in Minneapolis, MN

Certification, etc. MVP – SharePoint Server (2009 - )MCITP – SharePoint Administrator 2010MCTS – SharePoint 2010, ConfigurationMCTS – WSS 3.0 and MOSS Configuration

Contact:www.idubbs.com/blog @idubbs

http://www.idubbs.com/blog

Raymond MitchellManaging the ‘Second Screen’ experience

Owner / Principal Consultant – IWSpaceBased in Minneapolis, MN / Wisconsin‘SharePointing’ since 2000

Contact:www.iwkid.com @iwkid

http://www.iwkid.com/

Overview General Features

Making it work Scenarios and Examples

Simple and Conditional Formatting Item Override Hide Form Fields Row Highlighting Building Item-specific content

Governance, References, and Wrap-up

Agenda

Users can’t get a view to do what they need

Users requesting specific UX User perception of ‘minor’ changes needed

quickly SharePoint Designer no longer supports

Design View changes

The ‘Why’

SharePoint pre-2013 handled display templates on the server using XSLT.

SharePoint 2013 moved rendering to the client/browser side using JavaScript

List Data + Rendering Template -> HTML

Uses established web technologies JavaScript, HTML, CSS

What is Client-Side Rendering (CSR)

Default rendering behavior is handled by JavaScript

SharePoint has built-in hooks for customizing output

CSR customization requires injecting JavaScript into the page

Enter ‘JS Link’…

Customizing with CSR

JS Link is a new web part property

ONLY available in SharePoint 2013 All versions: Foundation, Server, O365

References one or more JavaScript files ~site/_catalogs/masterpage/myJavaScript.js ~site/SiteAssets/myJavaScript.js Must use a URL token – not a relative path

Overview – What is JS Link

Data is still managed by the list, the schema, and the selected view (filtering and sorting)

JS Link facilitates changing the display of the data, NOT the underlying data

The Data

Making it work

An app (list or library), Fields and Views An app part The JS Link web part property value The Override (one or more JavaScript files)

Core Components

PreRender – Modify client-side data before it is rendered

Overrides – Overriding how different components of the Fields or View will be displayed

PostRender – Traditional DOM manipulation

Three Override Techniques

Fields Items

Header Footer Group

JavaScript – Override Opportunities

Examples

DemoSimple and Conditional Field Formatting

Use the Field overrideSimple and Conditional Formatting

Field Override(function () { var overrideCtx = {}; overrideCtx.Templates = {};

overrideCtx.Templates.Fields = {'Status':{'View':

'<#=ctx.CurrentItem.Status#>'}};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);})();

'Status':{'View': '<#=ctx.CurrentItem.Status#>'}

Simple and Conditional Formatting

Add rules to the formatting…Conditional Formatting

Field OverrideoverrideCtx.Templates.Fields = {

'Status':{'View': ConditionalStatus},'Priority':{'View': ConditionalPriority}

};

function ConditionalStatus…

Field Overridefunction ConditionalStatus(ctx) {

var ret;if (ctx.CurrentItem.Status == "Active" ) {

ret = "" + ctx.CurrentItem.Status + "";

}else {ret = ctx.CurrentItem.Status;}return ret; //HTML String

}

Adding conditions, Multiple field overrides, and building output string

Conditional Formatting

DemoItem Override

Requires more work than Field overrides. You’re building out all the data and formatting

Item Override

Item Override(function () { var overrideCtx = {}; overrideCtx.Templates = {};

overrideCtx.Templates.Item = CustomItem;overrideCtx.Templates.Header = "More of

a 'digest' form of output ";overrideCtx.Templates.Footer = " ";

SPClientTemplates.TemplateManager.RegisterTemplate Overrides(overrideCtx);})();

Item Overridefunction CustomItem(ctx) {

var ret = "Issue Title: " + ctx.CurrentItem.Title + "" ;

ret += " Created Date: " + ctx.CurrentItem.Created ;

ret += " Assigned To: " + ctx.CurrentItem["AssignedTo"]

[0].title + "";ret += " " + ctx.CurrentItem.Comment ;return ret;

}

Create a header Build out the displayed data

and structure using HTML, CSS, and JavaScript Use web design tools for building out the

HTML Create a footer

Item Override

DemoHide Form Fields

I want the columns in the list, but don’t always want them available to users.

There are three default forms created with each app New Form, Edit Form, Display Form

Editing the forms pages themselves

Hide Form Fields

We are limited in what we can easily do with traditional JavaScript

This scenario is a good opportunity to leverage jQuery or other libraries

Hide Form Fields

Hide Form Fieldsfunction HideFields() {

$("textarea[title=Comments']").closest("tr").hide();

$("div[title='Assigned To']").closest("tr").hide();

}

Hide Form FieldsBefore: Default After: Hide Fields

Identify when and where this approach can be used in your organization vs. other solutions

Be consistent with your broader jQuery approach

Hiding fields is not security. SharePoint only does security down to the item level, we’re modifying the UI for a better UX

Hide Form Fields - Governance

DemoRow Highlighting

Commonly done in the past with SPD to improve data visualization

Row Highlighting

Row Highlighting(function () { var overrideCtx = {};

overrideCtx.Templates = {}; overrideCtx.OnPostRender = [

HighlightRowOverride ]; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); })();

Row Highlightingfunction HighlightRowOverride(inCtx) {

for (var i = 0; i < inCtx.ListData.Row.length; ++i) { var listItem = inCtx.ListData.Row[i]; var iid = GenerateIIDForListItem(inCtx, listItem); var row = document.getElementById(iid);

if (listItem.Priority == "(1) High") { if (row != null) row.style.backgroundColor = "rgba(255, 0, 0, 0.5)"; } } inCtx.skipNextAnimation = true;}

Use PostRender – Need to add the formatting after the list has already rendered

Row Highlighting

DemoBuild Item-Specific Links

Users want to start a workflow more easily:Build Links

Add a text field to the list “Poke” Add the new field to the view being used Get the URL of the page the web part is on

- Source

Build Links

Build Links(function () {

var overrideCtx = {};overrideCtx.Templates = {};overrideCtx.Templates.Fields = {

'Poke': { 'View' : WorkflowField }};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);})();

Go to an item, start a workflow, get the URL of the initiation form We’ll be deconstructing this link and rebuilding it This includes the ListID This includes the TemplateID of the current workflow

Get the URL of the page you want to land on after the workflow starts

Figure out what the link name will be

Build Links

Build Linksfunction WorkflowField(ctx) {

var ret = "";ret = "<a href='https://theURL.sharepoint.com/sites/CSRDemo/_layouts/15/IniWrkflIP.aspx?"+ "List={84c96004-68e8-4dab-9be1-1c6e9b634e8e}"+ "&ID=" + ctx.CurrentItem.ID+ "&TemplateID={5a0ea3b2-4faa-41b0-b868-89bc7cdabc14}"+ "&Source=https%3A%2F%2FtheURL%2Esharepoint%2Ecom%2Fsites%2FCSRDemo%2FSitePages%2FWorkflow%20Link%2Easpx'"

+ ">Poke</a>";return ret;

}

Could create columns for different actions…Build Links

What will you use CSR for?

Notes and Recap

There can be conflicts between MDS and code injected using JS Link.

Make your code MDS-friendly (see blog post)

Notes: Minimal Download Strategy (MDS)

Still need to follow code guidelines May need to establish some new ones for CSR/JSLink

Where are the files? Best practice for common libraries,

locations, etc. Code reviews? Documentation: FAQ, examples, etc…

Governance

SPC400: Scot Hillier – 3rd party JavaScript libraries you need to know Tuesday @ 3:15 pm

SPC3000: Cory Roth – Changing the look of Search using Display Templates and CSR Thursday @ 10:30 am

Related Sessions

CSR / JS Link Primer – My Bloghttp://www.idubbs.com/blog/2012/js-link-for-sharepoint-2013-web-partsa-quick-functional-primer/

JS Link – Hello Worldhttp://www.idubbs.com/blog/2014/js-link-hello-world/

JS Link – Row Highlightinghttp://www.idubbs.com/blog/2014/js-link-highlighting-a-row-with-csr/

JS Link - Conditional Formattinghttp://www.idubbs.com/blog/2014/js-link-csr-view-conditional-formatting/

My Blog Posts

http://www.idubbs.com/blog/2012/js-link-for-sharepoint-2013-web-partsa-quick-functional-primer/



http://www.idubbs.com/blog/2014/js-link-hello-world/

http://www.idubbs.com/blog/2014/js-link-hello-world/

http://www.idubbs.com/blog/2014/js-link-csr-view-conditional-formatting/



Mark’s Posts:http://geekswithblogs.net/SoYouKnow/archive/2011/07/28/a-dummies-guide-to-sharepoint-and-jqueryndashgetting-started.aspx http://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=47

How to load jquery in the JSLink filehttp://www.rbradbrook.co.uk/Blog/Post/12/Customising-the-NewForm-with-JSLink

Hide the <tr> code:http://stackoverflow.com/questions/10010405/how-to-hide-a-field-in-sharepoint-display-form-based-on-the-field-name-jquery

References – Hide Form Fields

http://geekswithblogs.net/SoYouKnow/archive/2011/07/28/a-dummies-guide-to-sharepoint-and-jqueryndashgetting-started.aspx



http://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=47

http://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=47

http://www.rbradbrook.co.uk/Blog/Post/12/Customising-the-NewForm-with-JSLink



http://stackoverflow.com/questions/10010405/how-to-hide-a-field-in-sharepoint-display-form-based-on-the-field-name-jquery




Paul Hunthttp://www.slideshare.net/Cimares/spssthlm-using-jslink-and-display-templates-for-itpros

Martin Hatchhttp://www.martinhatch.com/2013/08/jslink-and-display-templates-part-1.html

Phil Jirsa – MVC Pattern with CSRhttp://36mph.com/100#more-100

References – Other JS Link and CSR

http://www.slideshare.net/Cimares/spssthlm-using-jslink-and-display-templates-for-itpros



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



http://36mph.com/100#more-100

http://36mph.com/100#more-100

Modify Forms Using Content Types – Sarah Haasehttp://blog.splibrarian.com/2011/03/21/using-content-types-to-modify-the-newform-aspx-and-editform-aspx-pages/

jQuery and JS Linkhttp://prasadpathak.wordpress.com/category/microsoft-sharepoint/

MDShttp://blogs.msdn.com/b/sridhara/archive/2013/02/08/register-csr-override-on-mds-enabled-sharepoint-2013-site.aspx

List Type Reference (MS)http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.client.listtemplatetype(v=office.15).aspx

References

http://blog.splibrarian.com/2011/03/21/using-content-types-to-modify-the-newform-aspx-and-editform-aspx-pages/



http://prasadpathak.wordpress.com/category/microsoft-sharepoint/



http://blogs.msdn.com/b/sridhara/archive/2013/02/08/register-csr-override-on-mds-enabled-sharepoint-2013-site.aspx



http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.client.listtemplatetype(v=office.15).aspx

http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.client.listtemplatetype(v=office.15).aspx

Raymond Mitchell @iwkid Phil Jirsa @36mph Mark Rackley @mrackley Sonya Koptyev @sonyakoptyev Jon Campbell @MSFT_JonCamp

Thanks!

Don’t forget to submit your feedback Submit questions and look for more

information on the Yammer link page

Try these out !!

Thank you!

MySPC Sponsored by

connect. reimagine. transform.

Evaluate sessionson MySPC using yourlaptop or mobile device:myspc.sharepointconference.com

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Documents

Client-Side Rendering (CSR) demystified