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 LinkManager Bookmarklet to add iCSR.js to your Site Collection Style Library

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

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