Skip to content
SharePoint - CSR Client Side Rendering framework and support library (IKEA style)
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
icsr_documentation Updated iCSR documentation Jul 26, 2016
icsr.js iCSR 2.1 Apr 15, 2016
icsr.min.js iCSR 2.1 Apr 15, 2016
icsr_core.js
icsr_core.min.js iCSR 2.1 Apr 15, 2016
icsr_core_templates.js iCSR 2.1 Apr 15, 2016
icsr_core_templates.min.js iCSR 2.1 Apr 15, 2016
readme.md added notice: CSR technology no longer works in SPO Modern Experience Jan 30, 2018

readme.md

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

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

Creative Commons 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

More Display Templates blogs

Microsoft documentation
SOD - Script On Demand
MDS - Minimal Download Strategy
REST - JSON, PnP, Search API, Office Graph
JavaScript, HTML, CSS
JavaScript 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
You can’t perform that action at this time.