Published: 24 October 2017
Essentially CSR with JSLink taps into list view rendering and overrides properties that govern the list view look and feel. Some of the properties that can be over ridden are:
OnPrerender allows us to write some logic even before the list view is rendered while OnPostrender allows us to modify the list view once the view has been rendered.Similarly we can override the Item property if we want some logic to be implemented for each row of the List View and we can over ride the Fields property to update the rendering of the List Column. Header and Footer as the name suggests can be used to add Header and Footer Customization to the List.
In this article we will see CSR in action by creating a business intelligence bar chart from the list view using ChartJS.This has been tested in both SharePoint 2016 as well as SharePoint Online.
In this walk through
we will use Chart JS along with Client Side Rendering (CSR) to convert the
SharePoint List View data into a Bar Chart during run time. Initially the
SharePoint List will have the Quarter Sales details of vehicles.
During run time we will use Chart JS and Client Side Rendering to convert the above view to a Bar Chart as shown below:
3. Get jQuery minified version. Upload it to SharePoint Site Assets.
Once the above prerequisites
are in place let’s go to the implementation logic. At a high level ChartJS
works by placing a div in the page and uses the new command to create a chart
using the available values at that particular div. In order to get started we
will require couples of arrays that will hold the values from the SharePoint
List which will be plotted against the X-Y axis. Q1Values, Q2Values and Q3Values will be used
to hold the Quarter 1, Quarter 2 and Quarter 3 SharePoint List Column values
The main starting point function of Client Side rendering is discussed below. During run time we will override the Header, Footer and Item properties of the context information object.
The Item override method will be run for each SharePoint list item. It will push the SharePoint list item values to the variable arrays which we had declared earlier. These data arrays will be used to plot the chart.
Chat JS requires a div element with an id which will be used while running the new command to create the chart. This div element will be added to the page by overriding the Header property.In the Footer Property override method we will create the chart using the new chart command. The new command takes in parameters like color scheme that will be used for coloring bars and the data parameter which will contain the values that will be used to plot the chart.
The new Chart command will create the bar chart with the provided parameters. We can customize the bar chart by adding legends, responsiveness and other configurable properties can be set to the chart which is described in the official documentation here
The full code used for generating the bar chart is given below:
The above code will be saved as a JS file and can be uploaded to the site assets library of SharePoint. In order to override the specific List View, append “?toolpaneview=2” at the end of the List View URL to go to the edit mode of the page.
Specify the URL of the JS File in the JS Link section as shown above. While specifying the JSLink file URL we have to take a special note that we will be specifying site/site collection relative URL using the below tokens.
We will be adding reference to 3 JS files using the short hand:
The JS files that are referenced as JSLink are:
· jQuery file which we have uploaded to the Site assets library
· Chart.JS file which is uploaded to same Site Assets Library
· Bar.js file which contains our override and chart creation logic which is uploaded to SiteAssets.
We can add it to other locations as well and make the change in the JSLink URL accordingly. Once we save the page after adding the JSLink, the List View will be rendered as a Bar Chart as shown below:
Thus we have seen how to convert a SharePoint List View to Bar Chart using Client Side Rendering and ChartJS. In the upcoming article we will see how to create other chart forms using CSR and ChartJS.
Priyaranjan is a SharePoint Consultant with 7+ years experience in developing and deploying SharePoint Applications.He has worked on various SharePoint iterations starting from MOSS 2007 through SharePoint 2016 and Office 365. He is a frequent contributor at Microsoft TechNet and has won 33 Gold Medals in various TechNet Wiki Guru Monthly Competitions.As a token of appreciation for the TechNet community activities, he was interviewed by Microsoft Program Manager,Ed Price. He has also published 300 Articles and 4 SharePoint Ebooks in different technical communities.You can find his Microsoft TechNet contributions here