Published an article about color coding for SharePoint lists three months ago, and its sibling for calendar views last month. Both rely on the same client side method, the “HTML calculated column“.

Color coding involves 3 steps:

1/ Select the color

2/ Apply the formatting: traffic light, font color, background color, etc.

3/ Include the magic script that renders the formatting (SharePoint OOTB would just display text)

People are usually comfortable with step 3, which is just a copy/paste of a generic script. But some users are struggling with the first two steps, because they are not so familiar with SharePoint calculated columns.

So I have decided to publish a list of examples based on the default SharePoint lists. They can be used as is and should cover a wide range of use cases. For each example, you can grab the formula by clicking on “copy to clipboard”.

If you are a seasoned list designer, skip this post…but forward the link to your friends!

1/ Color selection

In HTML, you can identify a color by its name or its code. Here we’ll stick to the friendly color names. A good reference is W3schools.

Let’s call [Color] the column that will store the value. You can choose among the following column types:
- Text
- Choice
- Calculated column

The latter will be the most useful, as the color usually depends on another factor. For example, we’ll pick red for issues that are tagged as “Critical”.

If you are not familiar with calculated columns, you can start by reading this introduction.

--------------------------------------------

Formula Generator. Fill out the form with your choice list and the associated colors, select one pattern (Background/Font color/Traffic light), and the Formula Generator will build the formula for you. Hopefully this will allow more users to benefit from the HTML Calculated Column.

I plan to build other formula generators in the future to accomodate other needs (progress bars, etc.). Spread the word!