Repository files navigation

The minified versionicsr.min.js is under 10 KB

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

• Use theViewMaster365.com Bookmarklet to apply iCSR to an existing Tasklist in10 seconds

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

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

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

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

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

2. Use theLinkManager Bookmarklet to addiCSR.js to your Site Collection Style Library

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

5. Or create your own Template:

The newOffice365 Microsoft Planner breaks Tasks in 4 States:

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

        "DueDate" : {                      View: iCSR.Planner                    }

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

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

• iCSR[tokens] available for Templates can be viewed by typingic 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

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

iCSR.js by365CSI is licensed under aCreative Commons Attribution 4.0 International License.
Based on a work athttp://iCSR.github.io.

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

• 1.0 - public release february 1st 2016
• 1.1 - not made public
• 1.2 - friday february 5th
  • simplifiediCSR.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
  • addedrowcolor andcellcolor options
  • with automatic calculation of contrasting text-colors
  • added more inspectors (typeic in developer-console)
• 1.9 - march 4th
  • Planner Template matching the new Microsoft Planner
  • bugfixes
  • under the hood optimizations
  • addedJSLinkManager 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

• (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

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

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

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

• (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

• (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

• (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

• Meet the Microsoft F12 Developer tools

• BookMarkletiCSR Link Managerupdate JSLink settings on WebParts & Views, deploy JS files to Style Library

• (Chrome Browser Extension)CisarEdit CSR files with Live Updating

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

• ASPX PageUserCustomActions

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