Published: 3 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 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 pie 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 Pie Chart during run time. Initially the SharePoint List will have the Car Sales details of vehicles.
During run time we will use Chart JS and Client Side Rendering to convert the above view to a Pie 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 a couple of arrays that will hold the values from the SharePoint List which will be plotted in the Pie Chart.
The main starting point function of Client Side rendering is discussed below. During runtime, we will override the Header, Footer, and Item properties of the context information object.
The Item override method will 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 Pie chart. The Value attribute will store the SharePoint Values and Color attribute stores the pie chart color to be associated with it. Description will store the legend details that will also act as a hyperlink towards the corresponding list item.
Chart 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 bar colors 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. The other configurable properties can be set to the chart as 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
· Pie.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 changes in the JSLink URL accordingly. Once we save the page after adding the JSLink, the List View will be rendered as a Pie Chart, as shown below.
Thus we saw how to convert a SharePoint List View to Pie chart using Client Side Rendering and ChartJS in SharePoint Server 2016 and SharePoint Online.
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