Modify SharePoint 2016 List View using Client Side Rendering



Published: 8 August 2017

Client Side Rendering is a powerful option to modify the list views and list forms. It simply means that the data is transformed and displayed using Client side technologies like HTML and JavaScript. Prior to SharePoint 2013 in case of any requirements to modify the list views we had to use SharePoint Designer and XSLT formatting. However with SharePoint 2013 Client Side rendering has been made available. It comes in two flavors

  1. Display Templates – Used to modify the rendering of the Search Results display
  2. JSLink – Used to modify List Views and List Forms like NewForm.aspx

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
  • OnPostRender
  • View
  • Body
  • Item
  • Fields
  • Header
  • Footer

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.

We will explore about each properties in the upcoming articles. In this article we will see CSR in action by modifying a list view.

What are we going to do ?

During the run time, we will try to Read Column values in SharePoint List View and convert it from Row-Column view to a detailed sentence view. 

The column-row relation will be changed to a sentence type data display using Client Side Rendering as shown below:

How to do it ?

We will see how to do it using client side rendering in this section. Since we have to override the rendering of each list item, we will have to get hold of the “Item” Property. The main entry point of  tapping into the rendering process is done by calling “SPClientTemplates.TemplateManager.RegisterTemplateOverrides”. We will be passing the context object along with the view to which override logic has to apply.Here we are applying CSR to Custom List, hence the List Template ID used is '100'.You can get the SharePoint List template IDs from here.

The logic to implement while the Item Property is over ridden is specified in the function “ModifiedListViewItem”. It will be set as:

             overrideCurrentContext.Templates.Item = ModifiedListViewItem;

Within the function we will get hold of the column values for Product Name, Sales Target and Total Sales using ctx.CurrentItem.ColumnInternalName. The return value will be assigned as the new list item to be rendered during run time. We will make use of the column values and create the HTML return string as:

This way each List Item row will be rendered as a new HTML element.

JSLink Full Code

The complete code used for the demo is given below :

Apply the JSLink to SharePoint

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.

  • ~site - Used to link to the JS file in the current web
  • ~sitecollection - Used to link to the JS file in the current site collection
  • ~layouts - Used to link to the JS file that has been deployed to the layouts folder

Click on Apply to apply the client side rendering JS File to the list view. Heading back to the list we can see that the Row-Column rendering has been changed to detailed view.

Summary

Thus we saw how to apply Client Side Rendering and JSLink in SharePoint to change the look and feel of SharePoint List View data display. We will see more of CSR in action in the coming articles.  



Join 7,000 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers


About Author

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