In a blog post by Wes Preston we can see how to implement line coloring for a SharePoint view. In this article, I will show the steps to do, to see the results.

First, I have a simple custom list with just to columns: the Title and a field called “Prio”. Depending on the value of the field “Prio”, the line in the view should be colored in red.

For the line coloring, I use the following script (yes, it’s copied from the post by Wes Preston) and I store the file with the script in a library called “Scripts” in my SharePoint site.

(function () {
	var overrideCtx = {};
	overrideCtx.Templates = {};

	overrideCtx.OnPostRender = [
		HighlightRowOverride
	];

	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function HighlightRowOverride(inCtx) {
	for (var i = 0; i < inCtx.ListData.Row.length; ++i) {
		var listItem = inCtx.ListData.Row[i];

		var iid = GenerateIIDForListItem(inCtx, listItem);
		var row = document.getElementById(iid);

		// in this example, the internal name of the field is "Prio". Change the next
		// line depending on the structure of the list
		if (listItem.Prio == "1") {
			if (row != null) {
				row.style.backgroundColor = "rgba(255, 0, 0, 0.5)"; //red
			}
		}
	}

	inCtx.skipNextAnimation = true;
}

Next, I open the default view in my list. It is important that the field needed for coloring is available in this view (in my case the field “Prio”). When the view is opened, I start editing the page. Open the properties of the webpart and enter the JSLink in the properties pane.

It is important to add the ~site token, when the SharePoint site is hosted in SharePoint Online. Apply the changes to the webpart, end editing the page and reload the page. Depending on the data in the list, we will see some of the lines colored.

That’s all. We can use the same script for several lists or views, we only need to change the line, where the value of the field is checked.

Advertisements