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

2. 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.

3. 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.

4. 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:
@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.

5. 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

6. 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.

7. 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.

8. 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.

9. 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’…

10. 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.

11. 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

12. Making it work

13. 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.

14. 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.

15. 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.

16. JavaScript – Override Opportunities
Fields
Items
Header
Footer
Group

17. 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.

18. 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”…

19. 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

20. 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.

21. Examples

22. Demo Simple and Conditional Field Formatting

23. Simple and Conditional Formatting
Use the Field override

24. 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.

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

26. Conditional Formatting
Add rules to the formatting…

27. 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.

28. 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.

29. 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.

30. Demo Item Override

31. 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.

32. 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.

33. 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.

34. 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.

35. Demo Hide Form Fields

36. 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.

37. 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.

38. 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.

39. 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.

40. 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.

41. 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.

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

43. 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.

44. 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.

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

46. 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.

47. Build Links
Users want to start a workflow more easily:

48. 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.

49. 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.

50. 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.

51. Build Links function WorkflowField(ctx) { var ret = "";
4/14/2018
Build Links
function WorkflowField(ctx) {
var ret = "";
ret = "<a href='
+ "List={84c e8-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.

52. 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.

53. What will you use CSR for?

54. Notes and Recap

55. 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.

56. 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.

57. My Blog Posts
CSR / JS Link Primer – My Blog
JS Link – Hello World
JS Link – Row Highlighting
JS Link - Conditional Formatting

58. References – Hide Form Fields
Mark’s Posts:
How to load jquery in the JSLink file
Hide the <tr> code:

59. References – Other JS Link and CSR
Paul Hunt
Martin Hatch
Phil Jirsa – MVC Pattern with CSR

60. References
Modify Forms Using Content Types – Sarah Haase
jQuery and JS Link
MDS
List Type Reference (MS)

61. Thanks! Raymond Mitchell @iwkid Phil Jirsa @36mph
Mark
Sonya
Jon

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