Lists can often look a little bland, and attempting to impatiently skim read them can often lead to missing important information. This is why a bit of well-placed color can really help users with their day-to-day work.

In my last post How to create a progress bar in SharePoint I covered the various methods of displaying a progress bar on your SharePoint list view. For this article I’m going to do the same for row and cell highlighting, as I’ve spent a rather considerable time wrestling with this particular feature in SharePoint Highlighter:

Client based

• JavaScript: Put some JavaScript code into a Content Editor Web Part
• Designer: Use SharePoint Designer to set up Conditional Formatting

Custom Field Type

• Code it yourself: Make your own custom field type from scratch
• Buy: Purchase a pre-made solution

JavaScript

If you need a free solution that doesn’t require farm administrator permissions, then using JavaScript in a Content Editor Web Part may be the solution for you. As always with this method, Christophe at Path to SharePoint has a great example.

Alternatively, there’s a slightly off-topic walkthrough by Boris Gomiunik which avoids having to use an HTML calculated column. It has a great deal of useful information, and would only require minor tweaking to do cell or row coloring instead of text.

The JavaScript and CEWP method should avoid having to trouble your IT department to make the change, which I’m almost certain you’ll both be happy about.

Although you’ll have to implement the CEWP on every page you want the highlighting to display (which may cause your view drop-down to disappear), you may not have to copy the full JavaScript into every CEWP, as discussed in my previous article’s comments.

Designer

If you’re lucky enough to have a generous (or inattentive) IT department, you may be able to use SharePoint Designer; a free tool from Microsoft. SharePoint Designer allows you to add Conditional Formatting to your list views in a manner very similar to Excel. This has to be added to each of the views you want to see the highlighting on.

You’ll need a little time to become familiar with Designer, and to set it up for your needs, but once you have done so it can be a powerful tool. Unfortunately it is often regarded by administrators as a dangerous tool for this very reason.

There’s a useful step-by-step guide to setting up conditional formatting in SPD 2010 by Frederique Harmsze at Macaw, and a more straight-laced 2007 version on the Microsoft Office site.

Code

Creating a custom field type to perform highlighting on a list view is in many ways like trying to type on a keyboard on the other side of a crowded the room with a pole (which sometimes gets stolen by the janitor if you leave it out overnight). That might be a slight exaggeration, but it is very awkward.

This is mostly because there is no way to programmatically interact with the row and cell color from server-side code (the distance across the room in my analogy). So you’ll need to get JavaScript onto the page in order to do the highlighting (the metaphorical pole).

The crowd represents SharePoint’s own JavaScript (all 0.5MB of it), which may interfere with yours; an example of this would be the use of AJAX to render Group By views.

Finally, SharePoint seems to passive-aggressively object to script elements, and silently removes them from HTML text stored in the database; the metaphorical janitor. This can be worked around by rendering using XSL (in 2010) or CAML (in 2007).

Buy

If you want to avoid the unpredictable cost of time spent creating a solution, then you’re better off paying the money up front for a pre-made solution. As a bonus it won’t be you that has to test it to death or maintain and support it.

By some enormous coincidence, we happen to have recently released a product called SharePoint Highlighter that can do this kind of highlighting very easily. Of course, there are other similar products on the market, which we’ve listed on this handy comparison matrix.

Tags: Cell Highlighting, Highlighter, Highlighting, Row Highlighting, SharePoint, SharePoint Development, SharePoint Highlighter