What is Client-Side Rendering and Why Would I Use It?

Tim Coalson is a Senior Consultant in the Transformation Practice at ThreeWill. Tim has been developing solutions on the SharePoint platform for over 15 years and has been a developer/consultant for over 30 years. Tim has been involved in migrating SharePoint on-premises farms to the Microsoft Cloud, Power Apps, and Power Automate (aka Flow) which are part of the Microsoft no code/low code solutions.

Sometimes I hear about new features in SharePoint, but it doesn’t immediately occur to me how they would be useful. I’ve heard of Client-Sider Rendering (CSR) for some time, but never really dug in to understand it until I was working on a recent project. Now that I understand it better, I’m sure I will use it much more often. Hopefully this brief explanation can help you better understand the power of Client-Side Rendering so that you can leverage it when it might be the best option.

Why Would I Use Client-Side Rendering?

SharePoint libraries and lists can be a great place to store information, but sometimes the out-of-box presentation of that information is not what is desired. For public facing sites in particular, there is usually a desire to display the content in a more engaging way than the standard interface. Client-Side Rendering is one possible solution to help you customize the display to your liking.

What Is Client-Side Rendering?

Client-Side Rendering (CSR) is javascript code that allows you to override the default SharePoint display by supplying your own html. Through the client-side context that is provided, you can dynamically integrate the data from the SharePoint list or library with your own custom html to manufacture the desired experience. CSR can be applied at several levels. For example, you can choose to override the display of one or two fields and allow the other fields to display as normal. Or maybe you want to change the background color of a numeric field called “Test Score” based upon the value (i.e. greater than 90 is green; between 70 and 80 is Yellow and less than 70 is red). Or maybe you need to customize the display in a more radical way. Maybe you want to display two items per row instead of the default behavior of one item per row. In this case, the default List View Header wouldn’t make sense, so you would likely override the Header. All of this is possible with CSR.

Let’s look at the sample below of default document library content displayed in 2 List View Web Parts. This should look familiar to those of you who have used SharePoint.

After applying Client-Side Rendering, I have transformed these two List Views to look a bit different.

As you can see in the Documents List View Web Part I, have overridden the Header to only display “Documents,” and I have overridden the item display to only display the name of the file (minus the checkbox a,nd icon). What you can’t really see and what is more significant than the UI changes is that I have also overridden the default click event so that this document opens in the SharePoint modal dialog.

So, when the link is clicked, I call a javascript function that formats the options object and then calls the out-of-box SharePoint modal dialog.

Here is the result:

For the Local Videos List View Web Part, I have overridden the header to display “Local Videos,” but I have also changed the display to display items per row instead of 1. I have also displayed a Thumbnail image that is a clickable link which launches the video in the SharePoint Modal dialog window.

As the name Client-Side Rendering implies, this transformation of the display all happens on the client-side. By including a reference to a javascript file in the JS link property of a web part on the page, I can relatively easy transform the display. In this scenario, I used the ~site token to reference the current site and stored my custom javascript file in the SiteAssets folder where it can be easily updated using SharePoint Designer.

Here’s a screen shot of some of the code. Note the references to different javascript functions to implement the html for the Footer, Header and Item.

I hope this has been useful to help you envision the value provided by Client-Side Rendering.

For a more detailed description of the options that are available, I recommend the following 3 blogs by Suhail Jamaldeen. He has provided a lot of useful detail that will be helpful if you determine Client-Side Rendering is a good solution for your problem.

http://jsuhail.blogspot.com/2014/09/client-side-rendering-using-jslink-post.html

http://jsuhail.blogspot.com/2014/09/client-side-rendering-using-jslink-post_11.html

http://jsuhail.blogspot.com/2014/09/client-side-rendering-using-jslink-post_30.html