How to Customize List View in SharePoint Online using JSLink
What is JSLink? JSLink is a new approach combining JavaScript, HTML and CSS elements to customize the look of a SharePoint list views, list forms, and can control the rendering of fields. JSLink was introduced in SharePoint 2013.Why not XSLT? We can use XSLT or JSLink depending on what you want to do with it. The power of using JSLink is that it uses JavaScript and runs in the client and you can use all the powerful JavaScript libraries and for its easy to debug. XSLT however is very hard to learn and to read but for some operations it still rocks. Its fast and not depended on the client on how and when some things are rendered.How to customize list view using JSLink in SharePoint Online? In this example, we are going to customize view of task list. Task list has default column with internal name PercentComplete. This column stores %age task completion, we will add conditional formatting to this column. ![]() Default View:
Step 1: Create a JavaScript code file to override default view Step 1: Create a JavaScript code file to override default view Simple example: (function () { overrideCtx variable holds the current context of the list item.
// Initialize variable that will store overrides objects. overrideCtx.Templates = {}; // Register template overrides. } function getCompletion(progress, duedate) { Step 2: Upload JavaScript file to Master Page Gallery à Display Templates folder Upload JavaScript file CustomizeTaskCompletionView.js created in step 1 to this folder. While uploading JavaScript file choose: Content type –> JavaScript Display Template
If JSLink property is missing, In Office 365, go to your SharePoint Admin Center –> Settings and enable custom script. It may take upto 24 hours before you start seeing JSLink property once you enable it. ~sitecollection/_catalogs/masterpage/Display Templates/CustomizeTaskCompletionView.js
Save changes and add new task to this list. It will look like this: |

Ranjan is a Freelance Instructor (MCT) – Power Platform, Microsoft Azure & Microsoft 365 (SharePoint) having 13 years’ hands-on experience. He has delivered 400+ corporate training & trained 7000+ professionals across the globe with excellent feedback.
Hi Ranjan, thanks for this post!
I can not see the JS Link property, even after the “settings and enable custom scripts” option are enabled (It’s been more than two days)
Could you please give me any other possible setting or action that I’m maybe missing?
I’m working with sharepoint online.
Thanks!
Hi Carlos,
Thanks for getting in touch & sorry for the delayed response.
Are you trying these steps on a classic or modern list?
Thanks,
Ranjan
Hi, thank you for your reply. I already solve the issue!
Warm regards,
Carlos
Hi Ranjan, thanks for this post!
I am using modern site ,i am unable to find the JSLINK in CEWP.Please do needful.
Hi Asma,
Did you ensure that this is configured:
If JSLink property is missing, In Office 365, go to your SharePoint Admin Center –> Settings and enable custom script.
Thanks,
Ranjan