Conditional formatting in SharePoint 2013 and Office 365

Sometimes the requirement comes up to make conditional formatting in a SharePoint list or document library. There are several ways of achieving this, you can buy a solution, the are several solutions out there providing conditional formatting. Or you can use SharePoint designer etc.

I will describe a simple method using jQuery that will work both on SharePoint 2013 on-premises and on SharePoint online in Office 365.

In this example I created a custom list with a set of columns. One of the columns, “Approve” is a Choice column with a couple of choices , “None”, “Approved” and “Approved under revision”.

2014-09-18_09h49_33

These are the choices we will use for our conditional formatting, We will make items tagged with “Approved under revision” a yellow background and items tagged with “Approved” a green background.

Navigate to your list or document library and select Edit Page from the settings menu.

2014-09-18_12h07_34Then click Add a Web Part and add a Content editor webpart to this page. We will use this Content editor webpart to add our jQueryscript.

Click anywhere in the Content editor webpart and then click Edit Source on the ribbon.

2014-09-18_12h09_58

Add the following JavaScript to the HTML Source dialog.

2014-09-18_12h12_09

01 /code
02
03  
04
05     $(document).ready(function(){
06
07         $Text = $("td .ms-vb2:contains('Approved')").filter(function() {
08   return $(this).text() == "Approved";})
09         $Text.parent().css("background-color", "#00FF66");
10         
11         $Text = $("td .ms-vb2:contains('Approved under revision')");
12         $Text.parent().css("background-color", "#FFFF66");
13
14         
15     });

Line 1 of the script points in this example to the jQuery library online. In your environment you could just as easily download the jQuery  library form here and put in in a library on your SharePoint or Office 365 site. I usually put it in the Site Assets library and update the URL in line 1 accordingly.

Line 7 searches for a table cell with the word “Approved” in it and uses the filter function to make sure it matches the word exactly since the next item we are looking for “Approved under revision” alos includes the word approved. Once it find a table cell with the word “Approved” it sets the background color for the parent to green. The parent in this case will be the table row so the hole row gets a nice green background color.

Line 11 and 12 does the same thing, without the filter function since we are searching for a match to “Approved under revision”, and sets the background color of the parent to yellow.

Click Ok and the Stop Editing in the ribbon when you have pasted in the script.

The result will look like the screenshot below.

2014-09-16_10h10_17

So that was my description of an easy way to get conditional formatting for a list or document library. Works great both in SharePoint 2013 on-premises and in Office 365.

Advertisements

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