Changing colors in SharePoint List Rows – Conditional Formatting in SharePoint 2013/Online

Login to your SharePoint online site and make a new “Custom List”. Click the gear on top right corner, click ” Add an app” and then click ” Custom List “, as below:

Making a new Custom list
Making a new Custom list

Give list a name ” Status List”, and click ” Create”.

Adding Custom List
Adding Custom List

Your new Custom List is created, and its name is ” Status List “. Click ” Status List”.

Status List
Status List

After clicking you will be on the list page as below:

Status List Home
Status List Home

Look on the top ribbon,  under ” List” option click ” Settings” and then again click ” List Settings ” as below:

List Settings
List Settings

You will see the Settings page, click ” Create Column ” as below. Click it:

Create Column
Create Column

After clicking you will see settings for creating the column as below. Input the fields, Column name as ” Status “, type of information will be selected as ” Choice” and type the options or choices you want in the list. Please see as below and then press “Ok”.

Creating Column
Creating Column

Now, your new column is created.

New Column - Status
New Column – Status

Click the list,

Click the List
Click the List

Now, open another browser and type the link http://www.jquery.com/download/ . On this page you will see jquery libraries, that you need to download and save in SharePoint Library. You can store this library in Site Assets. We will need this for writing jquery code to do the task. Now follow the snapshots:

Download Library
Download Library

Save it on desktop temporarily, and then from your SharePoint Site Contents go to Site Assets and upload jquery-1.11.2.min in Site Assets as below:

Site Assets
Site Assets

Now go back to your list and go to Edit Page option. Click it:

Edit Page option
Edit Page option

By editing the page, you will see the ” Web Part ” option page, click it as below:

Web Part
Web Part

By clicking Web Part option, you will see a list of web parts that can be used here. Now select ” Media and Content ” and the ” Content Editor ” and click ” Add ” as below

Content Editor Web Part
Content Editor Web Part

Now you need to click inside the ” Content Editor ” so that you can see ” Edit Source ” option on the top ribbon. You need to click this ” Edit Source ” link. Please see as below:

Edit Source Option
Edit Source Option

After clicking it, a new window will open where you can write HTML Source Code, you need to delete what is written there and paste a new code that I will share with you in a while. First delete all the lines.

Clean the HTML Source Page
Clean the HTML Source Page

Now the delicate part comes, you need to paste the below code in this window:

=======START=========== (NOTE: DONT PASTE THIS, START FROM BELOW)

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

$(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(‘Decline’)”);

$Text.parent().css(“background-color”, “#FF0000”);

});

===========THE END========== (NOTE: DONT PASTE THIS, ONLY TILL ABOVE WHERE IT IS WRITTEN AS </script> )

Lines of Code - Please change the path of the jquery library
Lines of Code – Please change the path of the jquery library

You need to change the path in Line 1, where it is written https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”
type=”text/javascript

You need to paste the address of the library where you have kept it, within SharePoint.

After pasting the code, click Add and it will take you back on the list page in Edit Mode as below.

Click Stop Editing.

Stop Editing
Stop Editing

Now everything is done, lets try it. Input one record and put its Status as ” Approved ” and click ” Save “.

Adding a record in Status List
Adding a record in Status List

Voila! you can see the color is Green. For any record whose Status is ” Approved ” will turn green. In this case I have Approved Sherlock Holmes leave request so its coming as green.

Sherlock Holmes on leave
Sherlock Holmes on leave

Lets input few more records and see results.

Adding Records and seeing changing colors
Adding Records and seeing changing colors

In this way you can add colors to your rows, if you want different colors – simply change the hexadecimal code of the color.

Reference: http://www.computerhope.com/htmcolor.htm

try this and do message me if you face any issue.

Best of Luck.

8 thoughts on “Changing colors in SharePoint List Rows – Conditional Formatting in SharePoint 2013/Online

  1. Hi I tried your solution its working and I could able to see the rows with different colors based on a certain column value. But problem is that when I sort the list view by any column or Filter the view, the color is disappearing. DId you face this issue when using the above code? Please let me know any solution for this issue.

    Thanks.

    Like

    1. strange i didnt get this issue. you can try this on a test list and then on production and see if it is still giving you issue plus also try different browsers.

      Like

      1. Hi, this blog was written in 2015 – a lot has been changed after that in SharePoint. I tried with the filter and sorting, it worked fine. If you know Flow or Power Apps, worth trying in that. Or may be you can try googling or post a question in the Microsoft community – as I am not working on SharePoint these days.

        Like

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

This site uses Akismet to reduce spam. Learn how your comment data is processed.