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?
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.
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.
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.
Nice example of using CSR!