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

Standard

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.

Advertisements

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

  1. aaa

    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

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 )

Google+ photo

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

Connecting to %s