Highlight Row, Change Font Color and Highlight One Cell Based on Status or Column Value using JQuery in SharePoint

Friday, July 18, 2014

Colors are good indicator and can tell you something. Using colors on a list can help you identify or at least help you make a quick conclusion about an item. Also, plain texts can be boring and bland.

In this post, I will cover 3 scripts that will apply color to your list based on the status or a column value. This script is working on both SharePoint 2010 and SharePoint 2013...


HIGHLIGHT SINGLE CELL

Highlight Single Cell JQuery SharePoint 2013

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$Text = $("td.ms-cellstyle.ms-vb2:contains('In Progress')");
$Text.css("background-color", "#95e6f2");
$Text = $("td.ms-cellstyle.ms-vb2:contains('Completed')");
$Text.css("background-color", "#70e120");
$Text = $("td.ms-cellstyle.ms-vb2:contains('Canceled')")
$Text.css("background-color", "#e18620");
});
</script> 

HIGHLIGHT ROW

Highlight Row JQuery SharePoint 2013

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$Text = $("td.ms-cellstyle.ms-vb2:contains('In Progress')");
$Text.parent().css("background-color", "#95e6f2");
$Text = $("td.ms-cellstyle.ms-vb2:contains('Completed')");
$Text.parent().css("background-color", "#70e120");
$Text = $("td.ms-cellstyle.ms-vb2:contains('Canceled')")
$Text.parent().css("background-color", "#e18620");
});
</script>

CHANGE FONT COLOR

Change Font Color JQuery SharePoint 2013

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$Text = $("td.ms-cellstyle.ms-vb2:contains('In Progress')");
$Text.css("color", "#0076e5");
$Text = $("td.ms-cellstyle.ms-vb2:contains('Completed')");
$Text.css("color", "#70e120");
$Text = $("td.ms-cellstyle.ms-vb2:contains('Canceled')")
$Text.css("color", "#ff0000");
});
</script>

If you want, you can also combine the highlight row and change font colors.
21 Comments
Disqus
Fb Comments
Comments :

21 comments:

  1. Do you know a way of changing the font color of the entire row, not just a single cell? Again, not highlighting the background, but the font color for the entire row.

    ReplyDelete
  2. Is there a way to change the background color of the entire column? Example: My list has 31 columns. Each column represents a day. The first item in the list represents the weekdays of the month. So if a user specifies the column 3 with Sunday, the entire column 3 should be highlighted.

    ReplyDelete
  3. Nice code! one question, is doesn't work on views...any tips?

    ReplyDelete
    Replies
    1. Hi, What do you mean by not working on views? On every views? Try deploying the code on every views that you have :)

      Delete
    2. Script is working fine. Here is the issue, I have multiple columns in the list, other columns are also using same word which I am using in the script column(Which is status column), So, Color is highlighting not only with the status column also it highlighting color based on different column. I need to highlight color only based on status column, not all other column.

      Delete
  4. This works, but the color disappears when the page refreshes. Any ideas?

    ReplyDelete
  5. This is a great code! How do you make this work if we just want this to apply to a specific column only? For instance, we have a "Status" column that includes words such as "Completed" "In Progress", etc., but we also have a "Notes" column where we right down descriptions that may or may not include "completed" or "in progress." When I apply the codes on to the list view, it applies to all columns that have these words in them....

    ReplyDelete
  6. I asked this question already, but haven't seen a reply. This code works, but when my list auto refreshes (AJAX asynchronous refresh), the colors disappear. Then, when the whole page refreshes, the colors come back. Do you know a way to prevent the colors from disappearing when the web part refreshes?

    ReplyDelete
    Replies
    1. i hope this helps:

      http://www.a2zmenu.com/blogs/ajax/call-javascript-method-after-ajax-call-complete.aspx

      Delete
  7. This is great and solved a massive headache for me. The one remaining issue I have is that the highlight doesn't change automatically if I change the list values, only if I manually reload the page. Have tried embedding before and after the list WP but no joy :(

    Any ideas?

    ReplyDelete
  8. Hello MEK, Could you please post the code that display images? I mean the status color or traffic color instead of text color. Thanks.

    ReplyDelete
  9. Hi, code works well thankyou.

    I had a small issue where I needed to base it off dates so I created a calculated field that output values, upon which the colour coding works well.

    Note that the script searches all fields for the text so you can come a little unstuck if you use the exact status description in another field. e.g. "work was In Progress" will product light blue on that field"

    ReplyDelete
  10. Hello, it does not work on paging, when you change of page lost format, any suggestion?

    ReplyDelete
  11. Nice code! You can help? I need to highlight the line with the email address that matches the email address of the current user?
    Thanks!!!

    ReplyDelete
    Replies
    1. try running GetUserProfileByName webservice to get the users email and then match it on the list.

      Delete
  12. Very useful code! However, I need to lookup for "Completed" on a specific column and not the entire table (similar request that TINA had previously). Can you help me on this?

    ReplyDelete
    Replies
    1. Please post if you find any solution for the issue which you have. I do have same issue. Thanks

      Delete
  13. Very useful code! However, I need to lookup for "Completed" on a specific column not on the entire table (similar request performed by TINA on previous post). Can you help us with this?

    ReplyDelete
  14. Thanks ! But the script change “Shadow View” on “Default View” How I may back “Shadow View”?

    ReplyDelete
  15. Nice code. It works for a portion of what I'm doing, but not the columns that I need to change to a specific color based on a number value. Example: I need anything that is greater than a value of ZERO to turn the background of that cell RED. Value options are 1-99 for the number of errors an inspector finds on a rack of equipment. There are 24 columns of racks and 20 rows of different buildings locations. Any help would be great.

    ReplyDelete