Customizing ListView Webpart in SP Online

Question

Hi, I have a listview webpart on the home page of a sharepoint online site. There is a choice column in the list with options such as "Pending", "Cancelled", "Approved", "Not Taken". I want the background color for the choices to be displayed in different colors on the webpart. How can i achieve this? Can I do it using JSLink in sharepoint online site homepage? Please advice...

Nanddeep Nachan · Answer

Have you selected "Javascript Display Template" as the content type for JS file?

Shail S · Answer

I have created a js file, saved it the SiteAssets Library and linked it with the listview webpart on the homepage by mentioning the path in the jslink property for the webpart. I am using the code below: (function () { var ApprovalFieldContext = {}; ApprovalFieldContext.Templates = {}; ApprovalFieldContext.Templates.Fields = { "ApprovalStatus": { "View": ApprovalFieldTemplate } }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ApprovalFieldContext); })(); function ApprovalFieldTemplate(ctx) { var priority = ctx.CurrentItem.ApprovalStatus; switch (priority) { case "Cancelled": return " " + priority + " "; break; case "Pending": return " " + priority + " "; break; case "Approved": return " " + priority + " "; break; case "Leave Not Taken": return " " + priority + " "; break; default: break; } } But this code isn't working. There are no errors on the page too. Am I missing something?

Nanddeep Nachan · Answer

You may use JSLink or plain JQuery for this