Videos

SharePoint 2007 and 2010 - Color Coding Custom Lists and Tasks

Anjali Bharadwa: Hi, this is Anjali from DMC, and we are going to try to create a graphic representation of a Task List, using a color coding scheme similar to what you see here on this page. So the first step you're going to make is you're going to create your task lists in one of your SharePoint sites, as I've already done. You obviously have to come up with the color coding scheme. In my color coding scheme, we're going to have “not started” equals yellow, “deferred” yellow, “in-progress” green, “complete” will be green, and “waiting on someone else” will be identified in red.

So the first step that you have to do is you have to create the logic for your color coded field. I've already gone ahead and created this logic. So I'm going ahead and copy . . . Actually I need the whole thing. So I'm going to go ahead and copy this information, go back into my SharePoint list, hit “List,” “List Settings,” and “Create a Column.” We're going to call this column, “Color.” 

Now, this color is going to be a calculated field, based on other data. So I'm going to go ahead and drop my logic into there. It's going to return a single line of text, and hit OK. 

The next thing we need to do is create our graphic field. So, again, I already have the code. So go ahead and copy this code, and we're going to call it “Color Status.” So go back to your list, create another field, call it “Color Status.” And again, this is going to be a calculated field, based on other information. Make sure you use the same field names because it's going to refer to the color field here. So if you do change the name, make sure you change that as well. So it's going to return a single line of text, and again, we hit OK.

So now it has this information in the columns. So we're going to go to the web page where we want to drop this information. So this is just a test page that I've come up with. So first thing you need to do is add your task list to the page. So you're going to go “Page,” “Edit.” Go to the place that you want to add your page, “Insert,” “Web Part,” and my list was called “The Video Blog.” 

So I went ahead and added it to it here. You will have to go and edit the properties of this web part so that you can see the right fields. So here we're going to edit the current view and make sure that we don't have the ones that we aren't interested in. The ones that I am interested in is the color status. So we'll go ahead and hit “OK” there.

So now, you can see the color status is returning that information just like it did in here. So the next thing we need to do is we need to add another part to our page, another web part. So go back into “Page,” “Edit.” Now, in this item, you need to be directly under the video blog or your task list. Otherwise, this step will not work. So we're going to go into “Insert,” “Web Part.” It's going to be “Media and Content,” and you're going to choose “Content Editor.” Go ahead and click “Add.” 

In 2010, your Content Editor is a little bit different than 2007, but it still has the same concept. In 2007, you can add the HTML code right into the Content Dditor, and in 2010, you have to paste it somewhere else within your site, and then point it to the right location. So I am using 2010. So I'm going to go ahead and grab my location of my HTML code and point it to the right place.

So another thing you can do, you can also make this particular Web Part hidden so that nobody can see it. If you don't have the option to make it hidden, you can also do the “Chrome Type,” “None.” That'll hide it from the rest of your users. Hit “OK,” and we're going to go back to our page, “Save,” and “Close.” And now, you have a color coded task list.