rowsToday, I am going to describe a way to color rows in a SharePoint list. We’ll cover two cases:
- highlight rows on mouse over
- apply color coding to rows (cf. picture)

The implementation will be done through the standard SharePoint UI (no SharePoint Designer, no server access).

In this post, I assume that you are familiar with the “HTML calculated column“. If not, be prepared to read several other references to catch up!

The method

In both cases, we’ll use the method I described in my previous post. It is an extension of the HTML calculated column, applied to scripts.

In all my examples so far, the HTML calculated column was applying formatting to itself. This time, we are asking for a little bit more: the formatting should apply to the other columns as well. To achieve this, the formula will include a script.

In both examples below, the HTML calculated column works as usual: enter the formula in a calculated column, and add the “text to HTML” script in a CEWP below the list.

Preliminary step: choose your color!

You first need to decide which color to apply to each row.

The first possibility is to enter the color name directly in the formula – yellow for example. The second option, if you need conditional formatting, is to pull the color name from another column. You’ll find several examples in this post.

Example 1: highlight rows on mouse over

The formula (assuming we have chosen yellow to highlight the rows):

="<DIV><IMG onload='GetSelectedElement(this,""TR"").onmouseover=function(){this.style.backgroundColor=""yellow"";}; GetSelectedElement(this,""TR"").onmouseout=function(){this.style.backgroundColor="""";}' src='/_layouts/images/blank.gif' ></IMG></DIV>"

How it works, in a nutshell:
- blank.gif is a dummy image, its only role is to trigger the script
- the script has two parts: onmouseover adds the background color, onmouseout removes it
- GetSelectedElement is a SharePoint function that allows me to identify the current row (“TR” tag)

 Looking for a live demo? I have implemented this in my list of SharePoint blogs.

Example 2: color coding list rows

Color coding is not new to us, we have already done it many times for a cell. Assuming that the selected color is in a column called “Color”, here is a formula that will apply the color to the whole row:

="<DIV><IMG onload='GetSelectedElement(this,""TR"").style.backgroundColor="""&Color&"""' src='/_layouts/images/blank.gif' ></IMG></DIV>"

See the result on the above screenshot.

Update [04/17/2009]: combine the two

Several readers have asked about combining both effects, so here is a sample formula to handle this:

="<DIV><IMG onload='GetSelectedElement(this,""TR"").style.backgroundColor="""&Color&""";GetSelectedElement(this,""TR"").onmouseover=function(){this.style.backgroundColor=""yellow"";}; GetSelectedElement(this,""TR"").onmouseout=function(){this.style.backgroundColor="""&Color&""";}' src='/_layouts/images/blank.gif' ></IMG></DIV>"

Footnote: if you use a dedicated calculated column for these formulas, the column is somehow wasted, as it doesn’t contain any information in itself. So in practice you may want to merge it with another calculated column.

Advertisement