Be Aware!!

• Summer 2017 Microsoft discontinued their own CSR technology in SharePoint Online "Modern Experiences"
• Below CSR code does work in SPOnline "Classic Experiences"

icsr.js = Core + Templates (Priority, PercentComplete, Status, Date)

The minified version icsr.min.js is under 10 KB

Prerequisites

• Basic understanding of JavaScript
• Basic understanding of SharePoint CSR (Client Side Rendering)
• Watch the slidedeck: This is iCSR

Getting started

• Use the ViewMaster365.com Bookmarklet to apply iCSR to an existing Tasklist in 10 seconds

Developing with iCSR and creating your own CSR code

• Manage iCSR and CSR files with the LinkManager Bookmarklet
• for Live in-Browser editting of CSR files use the Cisar Chrome Browser extension (by Andrei Markeev)

JavaScript framework for writing less Client Side Rendering code

Customized Views like:

Can be created with one iCSR.Me statement:

            iCSR.Me({
                Fields: {
                  "Priority":{
                    View : iCSR.Priority
           }});

or customized further with:

            iCSR.Me({
                Fields: {
                  "Priority":{
                    View : iCSR.Priority({
                            colors: ['red','yellow','green'],
                            output : '<span>[svgcircle(20)]</span>'
                        })
           }}});

Default iCSR templates 'DueDate' , 'PercentComplete' , 'Priority' & 'Status'

can customize the whole View

oh.. and one more thing.. ehm.. line of code..

    iCSR.edit = true; // which is the default setting

Makes fields fully interactive in Views... who needs Forms?

Installation & Usage

1. Install and learn to use the Cisar Chrome extension (developed by Andrei Markeev)

2. Use the default iCSR Templates (included in icsr.js)

3. Or create your own Template:

The new Office365 Microsoft Planner breaks Tasks in 4 States:

0. Not Started (yellow)
1. Late (red)
2. In progress (blue)
3. Completed (green)

To add an iCSR Template with the same Planner colorscheme for a standard SharePoint Tasks list:

        "DueDate" : {
                      View: iCSR.Planner
                    }

The ONLY code required is:

	iCSR.Template('Planner', function (ctx) {
                                    this.color = '[msBlue]';
                                    if (this.days < 0) this.color = '[msRed]';
                                    if (this.Item.Status === 'Not Started') this.color = '[msYellow]';
                                    if (this.Item.Status === 'Completed') this.color = '[msGreen]';
                                },
                                    {
                                        colortag:'TR'
                                    }
	);

Notes:

• JavaScript not optimized and kept as short as possible for example purpose

• the Office365 Microsoft Planner colors are predefined by iCSR.js as iCSR Tokens

• iCSR [tokens] available for Templates can be viewed by typing ic in the F12 Dev console

• iCSR corrects the contrast textcolor for background colors (beige on msRed)

• iCSR does all pre-configuration and execution for you:

  • so 'this' refers to one ListItem Due Date
  • contains all the information about that Item ( this.Item )
  • and Today calculations you (may) want to use ( this.days )
  • just like regular SharePoint CSR code you get the ```ctx`` object as parameter
  • this.output ,

  not needed in this code, because it uses the default setting:

    "<div class='[Class]' style='background:[color];color:[textcolor]'>[value]</div>"
  

  • is parsed by iCSR to create valid HTML; which is then displayed by SharePoint

Tracing what iCSR does

iCSR source-code is broken up in generic descriptive functions to be used in your custom fields.

Making learning JavaScript hopefully a bit easier.

iCSR has multiple (configurable) levels of console.log traces that can be activated with:

    iCSR.traceon( 3 , true ); // tracelevel:0-5 , clear console

License

iCSR.js by 365CSI is licensed under a Creative Commons Attribution 4.0 International License.
Based on a work at http://iCSR.github.io.

In normal words:

• CC: You are allowed to use this library for all (including commercial) purposes
• BY: You may not remove the attribution from the source-code
• That's it

Version History

• 1.0 - public release february 1st 2016
• 1.1 - not made public
• 1.2 - friday february 5th
  • simplified iCSR.Me usage (javascript .bind notation is no longer needed)
  • enhanced [token] replace functionality
  • Progressbar now has a reset to 0 on mouseover
• 1.3 / 1.4 - had so much fun with new functionality I never pushed them
• 1.5 - february 10th
  • major color enhancements
  • added rowcolor and cellcolor options
  • with automatic calculation of contrasting text-colors
  • added more inspectors (type ic in developer-console)
• 1.9 - march 4th
  • Planner Template matching the new Microsoft Planner
  • bugfixes
  • under the hood optimizations
  • added JSLinkManager as seperate Bookmarklet
  • icColors inspector in console
• 1.9.9 - march 18th
  • Performance enhancments
  • Xhr module
  • 2.0 preparation
• 2.0 - april 10th - complete rewrite
  • token separators are now || instead of []
  • split into Core and Templates files
  • the minified Core is 3 KB
• 2.1 - april 15th
  • internal code changes to deal with Microsofts New Library View in the future

---

Amsterdam, february 2016

📧 Danny Engelman

More CSR / JSLink blogs

• (dec 2015) - Pitfalls using CSR/JSLink

• (aug 2014) - Client Side Rendering: List Views - Andrei Markeev

• (aug 2014) - Client Side Rendering: List Forms - Andrei Markeev

• (jan 2016) - CSR overrides in detail - José Quinto

• (aug 2013) - JSLink and Display Templates -Martin Hatch

• (dec 2012) - SP 2013: Using the JSLink property to change the way your field or views are rendered in SharePoint 2013 - Tobias Zimmergren

• (dec 2012) - SP 2013: Measuring performance on the JSLink property in SharePoint 2013 - Tobias Zimmergren

• (jul 2013) - 5 facts about JSLink you might not know - Anton Vishnyakov

• (may 2015) - CSS registration & ScriptLink done the right way - Max Yokavenko

More Display Templates blogs

• (jan 2015) - 10 Display Templates Tricks - Elio Struyjf

Microsoft documentation

• MSDN - Design Manager & Display Templates
• https://technet.microsoft.com/en-us/library/jj944947.aspx

SOD - Script On Demand

• (feb 2013) - SP-SOD How to use correctly - Hugh Wood

MDS - Minimal Download Strategy

• (dec 2015) - CSR and MDS: 4 Steps to get the Best from both Worldshttps://mariagraziamerlo.com/tag/client-side-rendering/)
• (sep 2013) - Minimal Download Strategy overview - MSDN
• (apr 2015) - Using MDS with SP2013 Apps Scot Hillier
• (oct 2013) - The correct way to execute JavaScript - Wictor Wilén
• (aug 2012) - Introduction to MDS - Wictor Wilén

REST - JSON, PnP, Search API, Office Graph

• (oct 2013) - MSDN - Get to know the SharePoint 2013 REST service
• (sep 2015) - MSDN - SharePoint Search REST API overview
• (apr 2016) - MSDN - OData query operations in SharePoint REST requests
• (may 2016) - Making your REST calls simplete (verbose,nometadata) - Marc Anderson

JavaScript, HTML, CSS

• (mar 2016) - You don't know JS about SharePoint mastering JS Performance - Hugh Wood
• (dec 2009) - Rendering: repaint, reflow/relayout, restyle
• (jun 2013) - Is it time to drop jQuery? Essentials to learning JavaScript from a jQuery background
• () - CSS Selectors

JavaScript Developer tools

• Meet the Microsoft F12 Developer tools

Support Tools

• BookMarklet iCSR Link Manager update JSLink settings on WebParts & Views, deploy JS files to Style Library

• (Chrome Browser Extension) Cisar Edit CSR files with Live Updating

• (Chrome Browser Extension) Chrome SP Editor Edit SharePoint files, add ScriptLinks to SiteCollection/Webs, manage Web Property Bag

• ASPX Page UserCustomActions

Environment changes for working with CSR & Display Templates

• Change Style Library to list recent files first, list all files, (optional): show all items without folders to show recent files at the top