client-side rendering (csr) demystified
TRANSCRIPT
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
Raymond MitchellManaging the ‘Second Screen’ experience
Owner / Principal Consultant – IWSpaceBased in Minneapolis, MN / Wisconsin‘SharePointing’ since 2000
Contact:www.iwkid.com @iwkid
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':
'<b><#=ctx.CurrentItem.Status#></b>'}};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);})();
'Status':{'View': '<b><#=ctx.CurrentItem.Status#></b>'}
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 = "<b>" + ctx.CurrentItem.Status + "</b>";
}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 = "<b>More of
a 'digest' form of output</b><br><br>";overrideCtx.Templates.Footer = "<br>";
SPClientTemplates.TemplateManager.RegisterTemplate Overrides(overrideCtx);})();
Item Overridefunction CustomItem(ctx) {
var ret = "Issue Title: <b>" + ctx.CurrentItem.Title + "</b>" ;
ret += "<br>Created Date: " + ctx.CurrentItem.Created ;
ret += "<br>Assigned To: " + ctx.CurrentItem["AssignedTo"]
[0].title + "</br>";ret += "<br>" + 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
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
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
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
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.