SharePoint Tips…How to apply colour formatting to a List row based on value in cell – tecivo BLOG

tecivo BLOG

My IT notes, 'How To...' guides, Microsoft, SharePoint, Citrix, AppSense, Apple, technology & gadgets and more!

SharePoint Tips…How to apply colour formatting to a List row based on value in cell

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

 

2 Comments

  1. Hi Jason…
    After looking thru many of these yours is the only one that works after I put it in the script editor. We just upgraded to SP 2103 and I don’t know java. I used the Conditional program in SPD 2010 and now it’s gone. I have two libraries with two columns in each that I would like to highlight the word in the Column and not the entire line. For instance if priority is “high” I just want to change the color of “high”. I don’t need much as I use just these two libraries across many sites. Therefore I would just repeat this script. Do you have any scripts that can do these. This would be one script that would change two columns.
    Let me know
    thank you

Leave a Reply

Your email address will not be published.

*

© 2018 tecivo BLOG

Theme by Anders NorenUp ↑

%d bloggers like this: