Humans are visual by nature so creating a graphic icon for a list of items or tasks can be extremely beneficial when trying to sort through data. Without having to configure SharePoint Designer or writing custom code, you can create a simple color coded icon that will enhance your list tremendously in just a few minutes.
Tip - For a list of available colors, click here
-
Step 1 - Create a “Color” column in your list. This column can either be calculated using other data with in the list or selected manually on creation.
Example:
=IF(OR(Status="Not Started",Status="Deferred"),"Yellow",IF(OR(Status="In Progress",Status="Complete"),"Green",IF(Status="Waiting on Someone Else","Red")))
-
Step 2 - Create a “Status” column that is a calculated value. The output is a single line of text. Copy and paste this into the calculated field:
="<DIV style='font-weight:bold; font-size:24px; color:"&Color&";'>•</DIV>"
- Step 3 - Add the list to your web part or wiki page
- Step 4 - Edit the web part to show the Status column
- Step 5 - Add a Content Editor Web Part directly underneath the List/Task Web Part
- Step 6 - In 2010, you will need to load the below code to a location on your site in a text file and point the content editor to the location. In 2007, you can copy and paste the below code into the content editor settings box itself.
You have now completed you color coded list!
Want more?
Learn how to add a SharePoint Designer custom workflow to your business process: SharePoint Designer Sales Workflow.
Learn about my team's SharePoint dashboard solution that makes SharePoint even more visually appealing for all SharePoint versions including WSS, MOSS, Foundation and 2010: SharePoint Dashboard Solutions.
If you want to learn more about color coding lists and other ways SharePoint can benefit your business, please contact me at Anjali.Bharadwa@dmcinfo.com.
<script type="text/javascript">
//
// Text to HTML
//
var theTDs = document.getElementsByTagName("TD");
var i = 0;
var TDContent = " ";
while (i < theTDs.length) {
try {
TDContent = theTDs[i].innerText || theTDs[i].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTDs[i].innerHTML = TDContent;
}
} catch (err) {}
i = i + 1;
}
//
// ExpGroupRenderData overwrites the default SharePoint function
// This part is needed for collapsed groupings
//
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
var tbody = document.getElementById("tbod" + groupName + "_");
var wrapDiv = document.createElement("DIV");
wrapDiv.innerHTML = "<TABLE><TBODY id=\"tbod" + groupName + "_\" isLoaded=\"" + isLoaded + "\">" + htmlToRender + "</TBODY></TABLE>";
var theTBODYTDs = wrapDiv.getElementsByTagName("TD");
var j = 0;
var TDContent = " ";
while (j < theTBODYTDs.length) {
try {
TDContent = theTBODYTDs[j].innerText || theTBODYTDs[j].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTBODYTDs[j].innerHTML = TDContent;
}
} catch (err) {}
j = j + 1;
}
tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild, tbody);
}
</script>