Introduction 

In SharePoint 2013, a new feature has been introduced by Microsoft called JSLink. This new property is really helpful in scenarios where there is a requirement for custom rendering of a field in SharePoint views and forms.

This new property loads off the burden of generating XSLT views and allows only the knowledge of simple javascript and HTML to render custom UI for a field in list views and forms.

Requirement/ Scenario

We have a SharePoint list with a column “Request Status” and for the end user, there is a requirement to display the “Request Status” with some KPI indicators in SharePoint Views.  The requirement is to transform SharePoint OOTB ListView (Fig-1) into a view which displays status with some indicators (Fig-2)

Default view provided by SharePoint
Fig-1: SharePoint OOTB ListView


View displaying indicators after implementation of JSLink property
Fig-2: SharePoint OOTB ListView

Implementation Steps

  1. Create a new status.js file and copy paste the below code into this file


2. Upload status.js file in “Style Library” library on your site.

3. 
Set the JSLink property on a list view web part. 

a. Go to list view and select “Edit Properties”.
b. In the “Miscellaneous” section of web part property, configure JSLink property as shown below:




Fig-3 JSLink in Edit WebPart Properties 

Conclusion

With just a simple JavaScript file we have changed how the list view is rendering data and provided altogether an interactive UI experience for end users. We can make further advanced transformations in list view and forms in SharePoint 2013/ SharePoint Online be making use of JS Link property. 

References

To understand further how the advanced branding customizations can be made using JS Link property, please refer to the below link: 
https://dev.office.com/patterns-and-practices-detail/1851