Introduction

Pre-SharePoint Designer 2013 if you wanted to use Conditional Formatting to colour code SharePoint List rows based on values, you could simply use Conditional Formatting in a similar way to Excel.

However, from SharePoint Designer 2013 onwards the Design View has been removed which means that using this tool as a simple WYSIWYG type editor isn’t possible.

The method described below explains how to use jquery and some short code placed in a Content Web Part to format rows based on specified text being present.

The method was provided by Arild Aarnes on SharePoint247 blog

Add code to SharePoint page

  • Go to your List SharePoint page, select Edit page and from the Media and Content category, add a new Content Editor web part – it doesn’t matter where on the page you place it as it will be invisible
  • Click anywhere in the Content editor web part and then click Edit Source on the ribbon
  • Paste in code as shown below then click OK
  • From the ribbon select Page and Stop Editing to save

Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script><script>
$(document).ready(function(){
$Text = $("td .ms-vb2:contains('Approved')").filter(function() {
return $(this).text() == "Approved";})
$Text.parent().css("background-color", "#00FF66");
$Text = $("td .ms-vb2:contains('Approved under revision')");
$Text.parent().css("background-color", "#FFFF66");
}); </script>

This example is based on using a status column with entries including Approved and Approved under revision, though note that the text can appear in any column.

Where this text if found in the row, the formatting rule will apply so that Approved items are coloured green and Approved under revision are coloured yellow

Notes

  • filter(function)) is used for Approved to ensure an exact match avoiding matching with Approved under revision
  • Bear in mind this is case sensitive, so text must match exactly what is used in the web part code. Using a ‘Status’ column with fixed choice would be the best approach to ensure consistency
  • The first line of the code defines the path to the jquery library stored online. You’d probably want to add the jquery code to the SharePoint Site Assets library on your site and reference it there instead. Download jquery from here, copy to your sites Asset Library and replace the URL in the code with equivalent path to jquery-3.1.0.min.js on your site.

Also see