Modify SharePoint List View Using Client Side Rendering And JSLink

Client-side rendering was introduced in SharePoint 2013. The primary purpose of CSR is to provide the conditional formatting of the data present within the List Views. Prior to SharePoint 2013, XSLT formatting was the way to implement the conditional formatting of List Views. XSLT formatting required in depth knowledge of working with XSL and debugging was also cumbersome. However with CSR, we can tap in to the rendering process and override some of the default properties of the List View, using JavaScript. Some of the properties that can be overridden are given below.

• 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 each of the properties can be over ridden during run time to accomplish different List View modifications and at different List View locations.

Let’s implement a practical scenario, using CSR.

Requirement

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 and override it, using “SPClientTemplates.TemplateManager.RegisterTemplateOverrides”.The logic to implement while the item property is over ridden is specified in the function “ModifiedListViewItem”. It will be set, as given below.

Templates.Item = ModifiedListViewItem;

Within the function, we will get hold of the column values for the product name, sales target and total sales. 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 HTML return string, as given below.

function ModifiedListViewItem(ctx) {
    return "Product Name : " + ctx.CurrentItem.Product_x0020_Name + " . The sales target for " + ctx.CurrentItem.Product_x0020_Name + " is " + ctx.CurrentItem.Sales_x0020_Target + " . The Current Sales Count is " + ctx.CurrentItem.Total_x0020_Sales + " units . </br></br>";
}

Full code

(function() {
    var overrideCurrentContext = {};
    Templates = {};
    Templates.Item = ModifiedListViewItem;
    BaseViewID = 1;
    ListTemplateType = 100;
    TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);
})();

function ModifiedListViewItem(ctx) {
    return "Product Name : " + ctx.CurrentItem.Product_x0020_Name + " . The sales target for " + ctx.CurrentItem.Product_x0020_Name + " is " + ctx.CurrentItem.Sales_x0020_Target + " . The Current Sales Count is " + ctx.CurrentItem.Total_x0020_Sales + " units . </br></br>";
}

Apply the JSLink to SharePoint

The code given above will be saved as a JS file and will be saved in 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 JS file in JS Link section, as shown above. Click 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 the 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.