Color your SharePoint Online list rows with KPI

Tiny nugget of code that goes a lonngggg way. Why? Cause everyone likes pretty colors. What? You don’t? Well, I most definitely, absolutely, positively, entirely do! So I share what I do. Mostly because its easy to look this post up than the 20 site collections I code for.

Just as the script says…its jQuery. It looks for values in columns with words ‘green’, ‘red’,’yellow’. Those are from calculated column by the way. Any row that has the color, is styled with its matching background. I have always found good results when I go for softer colors. As much as I love bright and bold, when it comes to tables/lists, the softer the better. Easy on the eyes. Mostly because it makes those scary reds easier to handle. Yep, you will probably still get in trouble,or not  but at-least your eyes wont be alarmed much!

What are these $ and (document) adn all that good stuff in between script tags? checkout

$(document).ready(function () {
$Text = $(“‘green’)”);
$Text.parent().css(“background-color”, “#CEF6D8”);

$Text = $(“‘red’)”);
$Text.parent().css(“background-color”, “#F8E0E6”);

$Text = $(“‘yellow’)”);
$Text.parent().css(“background-color”, “#FFFFD5”);

$Text = $(“‘gray’)”);
$Text.parent().css(“background-color”, “#d3d3d3”);


Strongly typing this section in the post. This little fix gets rid of those nagging ghost left navigation margin in your Oslo template. What is Oslo template? Meh! Another topic, another post. 🙂

margin-left: 0px;

Color me KPI
Color me KPI

One comment

  1. Hello,
    Could you share exactly where you inserted the jQuery code into SharePoint Online?

    Thank you,

    Connor Singerline


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s