SharePoint Tips…How to apply colour formatting to a List row based on value in cell – 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

 

9 Comments

  1. Nick Hutnick

    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

  2. Ron Johnson

    I used this code above and it works but, only seems to work on one of the statuses?

    • Jason

      As long as you match the text exactly it should work ok

  3. Dave Rouse

    Thank You, Very useful… I would just add some other samples

    // heading across the whole row
    $Text.parent().css(“background-color”, “SkyBlue”);

    // red font in Status column
    $Text.css(“color”, “Red”);

    // just cell highlight in Status column
    $Text.css(“background-color”, “Yellow”);

    // strikethrough across the whole row
    $Text.parent().css(“text-decoration”, “line-through”);

  4. Josh

    Hi Jason, I’m using your example on a custom list for a client and it works great. However, when we sort by a field, the color coding disappears. Is there a way to maintain the color coding even if the user sorts by a particular field?

    • Jason

      Filtering the table shouldn’t make any difference as the colour coding is looking for the specific text anywhere in the contents of the row – as long as the row contains the column with the value you’re looking for it should work ok.
      In the example shown, filtering the ‘Status’ column to only show ‘Approved’ would return only Approved rows, all of which would be green.
      Double check that results from the filter is leaving the lookup value you’re expecting to see. If it’s there I would expect the colour formating to apply ok

  5. Wendy

    Hi Jason. Your automatic formatting code works beautifully in my document library, however my library contains a lot of documents and information so it covers multiple pages of 99 documents per page. For some reason the formatting is only working on page 1, but the moment a user moves to the next page everything is just plain again. Is there any additional code that one needs to add please?
    Thank you in advance.

    • Jason

      It’s a long time since I used this method!
      The code is hidden on the page so my guess would be that when you browse to another page in your list you’re losing the page that had the Java script embedded.
      I would try messing around with views to try and find a way of allowing you to browse the pages of the list while also keeping the embedded code on the page. Maybe try a code web part instead of content editor?

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2020 tecivo BLOG

Theme by Anders NorénUp ↑