Customizing ListView Webpart in SP Online

Shail S

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...

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Nanddeep Nachan8y ago
Accepted answer
Have you selected "Javascript Display Template" as the content type for JS file?
0
Shail S8y ago
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?
0
Nanddeep Nachan8y ago
You may use JSLink or plain JQuery for this
0