Client-Side Rendering (CSR) demystified Wes Preston Owner/Consultant TrecStone

4/14/2018 Abstract SharePoint 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. So what are we talking about here is implementing Client-side rendering (CSR) by using the JS Link property – a new property in 2013 that allows us to make tweaks to the interface, things that we can’t do or can’t easily do through calculated fields and view configuration. Things we might have previously done with SPD but can’t in 2013 with removal of the design view. © 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.

Objectives and Target Audience 4/14/2018 Objectives and Target Audience 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 This session is targeted at both information workers (citizen developers, etc.) folks and developers. For the 'no code' folks, this will help you understand new capabilities with 2013 and some of the 'minor' tweaks that can be done for you by developers. For IW folks comfortable dabbling with a little (HTML and JavaScript) code the session will show you how do start digging into the formatting you might have done in SPD in the past. For developers interested in learning about yet another way to implement some tweaks to views and forms this will be an intro to some of the basics that will open the gates to deeper customization through JS Link. It's kind of a bridge between 'no code' and 'managed code'. © 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.

Wes Preston Owner / Principal Consultant - TrecStone 4/14/2018 Wes Preston Owner / Principal Consultant - TrecStone Based in Minneapolis, MN Certification, etc. MVP – SharePoint Server (2009 -> ) MCITP – SharePoint Administrator 2010 MCTS – SharePoint 2010, Configuration MCTS – WSS 3.0 and MOSS Configuration Contact: www.idubbs.com/blog @idubbs Wes – not a full time Dev, coming more from the OOB crowd, but comfortable stretching a bit and looking for solution templates that IW folks can use too Ray – deeper dev with long SharePoint history For the most part you don’t need to worry about copying any of this down because you’ve already got the session slides through Yammer. I’ve got most of the links that are listed throughout the presentation in the ‘Related Content’ section of the session/file page. You can get to the page via my site as well. I have a link from a post to the Yammer page. © 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.

Agenda Overview General Features Scenarios and Examples 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

The ‘Why’ Users can’t get a view to do what they need 4/14/2018 The ‘Why’ 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 May be quick and easy, but customizations that can be deployed may be more consistent with other existing solutions. © 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.

What is Client-Side Rendering (CSR) 4/14/2018 What is Client-Side Rendering (CSR) 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 SharePoint is using default templates already. Using CSR is just overriding the existing tem It’s the ‘official’ framework for customizing list view UI plates… © 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.

What is Client-Side Rendering (CSR) 4/14/2018 What is Client-Side Rendering (CSR) SharePoint is using default templates already. Using CSR is just overriding the existing tem It’s the ‘official’ framework for customizing list view UI plates… © 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.

Customizing with 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’…

Overview – What is ‘JS Link’ 4/14/2018 Overview – What is ‘JS Link’ 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 © 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.

The Data Data is still managed by the list, the schema, and the selected view (filtering and sorting) JS Link facilitates changing how data is displayed, NOT altering the underlying data

Making it work

4/14/2018 © 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.

Core Components An app (list or library), Fields and Views An app part 4/14/2018 Core Components An app (list or library), Fields and Views The data and foundation of how it’s displayed (columns, filtering, sorting) An app part Apply to a web part on a page Apply directly to a view page (less often) The Override (one or more JavaScript files) Upload to the master page gallery or other location The JS Link web part property value Set the web part property JS Link is just one of many ways to inject code… it may not always be the best way… It depends on the scenario Check out the Hello World and Primer posts for a lot more detail. We’ll be using these steps in the demos © 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.

Three Override Techniques 4/14/2018 Three Override Techniques 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 This is the JavaScript © 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.

JavaScript – Override Opportunities Fields Items Header Footer Group

4/14/2018 © 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.

CSR Implementation Options Deploy as an App Deploy as a solution Deploy manually and configure JS Link  Choose the implementation approach that best fits your needs. “It depends”…

Notes Need to know and find the internal column names Click on the column name in the List Settings page Adding columns using the edit grid Internal names created automatically Master Page Gallery Don’t need to set metadata properties

Using SharePoint Designer 4/14/2018 Using SharePoint Designer Can open and tweak in SharePoint Designer (SPD) Can also use Visual Studio, but Power Users likely won’t have access to VS. Doesn’t display in the main ‘Master Pages’ site objects All Files -> _catalogs -> masterpage © 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.

Examples

Demo Simple and Conditional Field Formatting

Simple and Conditional Formatting Use the Field override

Field Override (function () { var overrideCtx = {}; 4/14/2018 Field Override (function () { var overrideCtx = {}; overrideCtx.Templates = {}; overrideCtx.Templates.Fields = { 'Status':{'View': '<b><#=ctx.CurrentItem.Status#></b>'} }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); })(); This is the whole file ‘Status’ is the INTERNAL name for the column – can find it with several tools There are some exceptions to this working: Title field, People and Groups fields ‘View’ is the type of override: Newform, Editform, DisplayForm Ctx.CurrentItem.Status is how we get the value from © 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.

Simple and Conditional Formatting 'Status':{'View': '<b><#=ctx.CurrentItem.Status#></b>'}

Conditional Formatting Add rules to the formatting…

Field Override overrideCtx.Templates.Fields = { 4/14/2018 Field Override overrideCtx.Templates.Fields = { 'Status':{'View': ConditionalStatus}, 'Priority':{'View': ConditionalPriority} }; function ConditionalStatus… We’re able to affect more than one field at a time We’re getting more complex and calling a function rather than markup © 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.

Field Override function ConditionalStatus(ctx) { var ret; 4/14/2018 Field Override function ConditionalStatus(ctx) { var ret; if (ctx.CurrentItem.Status == "Active" ) { ret = "<b>" + ctx.CurrentItem.Status + "</b>"; } else {ret = ctx.CurrentItem.Status;} return ret; //HTML String Structure is a little different in that you’re building out the HTML that is returned – different than the markup. © 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.

Conditional Formatting 4/14/2018 Conditional Formatting Adding conditions, Multiple field overrides, and building output string © 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.

Demo Item Override

4/14/2018 Item Override Requires more work than Field overrides. You’re building out all the data and formatting Field overrides only pick a field or column at a time, and you can do ALL of the colums if you want, but it’s still within the framework of the view Summary view for Announcements is a great existing template example Views don’t have to look like a table with strictly rows and columns. With Item override it’s easier to forget that the view is still in charge – controlling the filtering and sorting © 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.

Item Override (function () { var overrideCtx = {}; 4/14/2018 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); })(); Structure is a little different in that you’re building out the HTML that is returned – different than the markup. © 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.

Item Override function CustomItem(ctx) { 4/14/2018 Item Override function 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; } Structure is a little different in that you’re building out the HTML that is returned – different than the markup. © 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.

Item Override Create a header 4/14/2018 Item Override 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 Please make designs better than mine… © 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.

Demo Hide Form Fields

4/14/2018 Hide 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 Sometimes the user experience demands that you hide some of the fields for simplicity. For example, a request form. I only want my users to fill out the required fields, but I also need to track additional fields to manage the request. This can be done using OOB approaches using Content Type switching and workflows to switch the item content type after the item has been created. © 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.

4/14/2018 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 JS Link and CSR can tweak a field (not showing today), but not make it hidden (or the label for the field) jQuery works just fine with JS Link as another CSR method/approach © 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.

Hide Form Fields function HideFields() { 4/14/2018 Hide Form Fields function HideFields() { $("textarea[title=Comments']").closest("tr").hide(); $("div[title='Assigned To']").closest("tr").hide(); } Need to have jQuery loaded on the page, either through the master page, on the specific page, dynamically loading the library, etc… You need to find the element, with a tag, ID, or something else. © 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.

Hide Form Fields Before: Default After: Hide Fields 4/14/2018 © 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.

Hide Form Fields - Governance 4/14/2018 Hide Form Fields - Governance 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 © 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.

Demo Row Highlighting 4/14/2018 © 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.

Row Highlighting Commonly done in the past with SPD to improve data visualization

Row Highlighting (function () { var overrideCtx = {}; 4/14/2018 Row Highlighting (function () { var overrideCtx = {}; overrideCtx.Templates = {}; overrideCtx.OnPostRender = [ HighlightRowOverride ]; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); })(); Structure is a little different in that you’re building out the HTML that is returned – different than the markup. © 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.

Row Highlighting function HighlightRowOverride(inCtx) { 4/14/2018 Row Highlighting function 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; Structure is a little different in that you’re building out the HTML that is returned – different than the markup. © 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.

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

Demo Build Item-Specific Links 4/14/2018 Demo Build Item-Specific Links © 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.

Build Links Users want to start a workflow more easily:

Build Links Add a text field to the list “Poke” 4/14/2018 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 The text field is where we’ll be rendering the link we’re building. Don’t forget that the column name is displayed… could be useful for users © 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.

Build Links (function () { var overrideCtx = {}; 4/14/2018 Build Links (function () { var overrideCtx = {}; overrideCtx.Templates = {}; overrideCtx.Templates.Fields = { 'Poke': { 'View' : WorkflowField } }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); })(); Same as the simple field override used earlier… © 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.

4/14/2018 Build Links 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 The text field is where we’ll be rendering the link we’re building. Don’t forget that the column name is displayed… could be useful for users © 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.

Build Links function WorkflowField(ctx) { var ret = ""; 4/14/2018 Build Links function 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; } Basically grabbed the URL of the workflow initiation form Note: If the workflow is republished, the new TemplateID needs to be updated in the following line: Set the Source value © 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.

Build Links Could create columns for different actions… 4/14/2018 © 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.

What will you use CSR for?

Notes and Recap

Notes: Minimal Download Strategy (MDS) 4/14/2018 Notes: Minimal Download Strategy (MDS) There can be conflicts between MDS and code injected using JS Link. Make your code MDS-friendly (see blog post) Leaving MDS on can make troubleshooting frustrating. Turn it off or make the code MDS-friendly © 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.

Governance Still need to follow code guidelines 4/14/2018 Governance Still need to follow code guidelines May need to establish some new ones for CSR/JSLink Where are files stored? Best practice for common libraries, locations, etc. Code reviews? Documentation: FAQ, examples, etc… © 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.

My Blog Posts CSR / JS Link Primer – My Blog http://www.idubbs.com/blog/2012/js-link-for-sharepoint-2013-web-partsa-quick-functional-primer/ JS Link – Hello World http://www.idubbs.com/blog/2014/js-link-hello-world/ JS Link – Row Highlighting http://www.idubbs.com/blog/2014/js-link-highlighting-a-row-with-csr/ JS Link - Conditional Formatting http://www.idubbs.com/blog/2014/js-link-csr-view-conditional-formatting/

References – Hide Form Fields 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 file http://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 – Other JS Link and CSR Paul Hunt http://www.slideshare.net/Cimares/spssthlm-using-jslink-and-display-templates-for-itpros Martin Hatch http://www.martinhatch.com/2013/08/jslink-and-display-templates-part-1.html Phil Jirsa – MVC Pattern with CSR http://36mph.com/100#more-100

References Modify Forms Using Content Types – Sarah Haase http://blog.splibrarian.com/2011/03/21/using-content-types-to-modify-the-newform-aspx-and-editform-aspx-pages/ jQuery and JS Link http://prasadpathak.wordpress.com/category/microsoft-sharepoint/ MDS http://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

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

Thank you Try these out Let me know what use-cases you come up with