How to Color Code Your Lists Columns Using Calculated Column

I created a Task List but wanted to color code the Priority column and through much internet searching I found a good article on how to do it: Apply Color Coding to your SharePoint Lists . This article was very good but it confused me a little when I wanted to color code the text so here are my directions.

We are going to use calculated columns to make the color coding work for us. We will :

• - Create the lists first
• - Add HTML styles
• - Add a script to the page that will be displaying the list using a Content Editor Web Part.

The article above shows you how to add traffic light colors using bullets and indicators. But I will walk you through how to color code the text of a column.

Steps:

Creating the List

• Go to the web page where you want to create the list
• Go to View All Site Content
• Click Create (for this example I will create a Custom List)
• Click Custom List under Custom List Column
• Name your list and decide if you want to display it in Quick Launch
• In the newly created list, click Settings
• Lists Settings
• Create Column
• Add a name to the column
• Select Choice
• Add the following choices:
  • Delivery
  • Superseded
  • Validated
  • Partially Superseded
  • Status None
• Click OK
• List is done

Adding the Formatting to the newly created lists using the "e" letter trick

• - As you can see there an e in every word but the position of the first "e" are different:
  • Delivery = 2
  • Superseded = 4
  • Validated =8
  • Partially Superseded = 14
  • Status None = 11
• - The formula will be ( I got this formula from http://pathtosharepoint.wordpress.com/2008/12/09/color-coding-more-examples/ )

=CHOOSE(FIND("e",Status,1),,"#ffcc00",,"#cc99ff",,,,"#66ffff",,,"grey",,,"#ff9900")

So what this formula means is Find the first "e" in the Status Column list and display the colors. Each comma (,) is a space. Since Delivery's first "e" is in the second space that are two commas after the first closing parentheses.

Created Calculated Column

• Go back to the page where we created the Lists in the above step
• Go to View All Site Content
• Select the lists
• In the list, click Settings
• Lists Settings
• Create Column
• Name this Column Status Formula
• Select Calculated for the column type
• In the Formula box paste the formula you generated in the above step
• Click OK

Making the Text Color Formula HTML

• Create a new column
• Title this column Status HTML
• Select Calculated for the type again
• Paste the following formula ( I got this formula from http://pathtosharepoint.wordpress.com/2008/12/09/color-coding-more-examples/ )
• o ="<DIV style='font-weight:bold; font-size:12px; color:"&[Status Formula]&";'>"&Status&"</DIV>"

This formula will add the font style. So the text will be bold and 12px. It will select the colors from the Status Formula depending what's selected in the Status column.

If you look at the list view nothing will change

• Lets add the list to a page

Create a New Page

• Go to Site Actions ( if you have the publishing feature turned on)
• Select Create Page
• Add Name
• Select Default Web Part Page
• Click Create
• Add a Web Part
• Select the list you just created (the main list)
• Download the javascript CEWP from http://www.pathtosharepoint.com/HTMLcc/default.aspx Download Tab - Right Click on TextToHTML and click Save Target As
• Once you saved the CEWP Import it to your new page. Make sure it's on the BOTTOM of the page
• And you are done! Enjoy

Here are some images

Columns

The form

List displayed with all the columns

List displayed only with the formatted column

| Reddit, googlereader, stumbleupon