I'm working on setting up a project dashboard using a custom list. It's all in-browser and I believe it's 2007, but I don't know how to tell for sure. One of the columns is the "Project Stoplight". The field is a hyperlink and in the description is the link to either green, yellow, or red circle images to signify the status of the project. When creating a new item, the user copies and pastes the corresponding hyperlink into the hyperlink field to signify which image is shown. I need a way to sort via the stoplight (all green, yellow, and red projects grouped together). Anyone have any ideas on how I might accomplish this?
0
votes
2 Answers
0
votes
I finally figured out how to do it. Essentially, I created two columns: Project Status (I) and Project Status (S) (the first stands for image, the second for string). The Project Status (I) column displays images based on what the user selects in the Project Status (S) category when creating a new item. This is accomplished using a calculated column (Project Status (I)) and the following code formula:
=IF([Project Status (String)]="Green","<DIV><img src='/Site%20Pictures/grn.jpg'/></DIV>",IF([Project Status (String)]="Yellow","<DIV><img src='/Site%20Pictures/yel.jpg'/></DIV>",IF([Project Status (String)]="Red","<DIV><img src='/red.jpg'/></DIV>","Error")))
Essentially, this is HTML script that pulls an image from the internet if the correct conditions are met (i.e. if Project Status (S) = Green, etc). However, SharePoint does not render HTML script in a calculated column. You'll notice if you create a new view that the code is displayed, not a picture. In order to get a picture, a JavaScript HAS to be embedded in the web page. This was accomplished by created a Content Editor Web Part, editing the source, and pasting the following code:
<script type="text/javascript">
//
// Text to HTML
// Feedback and questions: [email protected]
//
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>
This code was copied from the internet. I did not write it myself. From reviewing it, it seems to be considerably more complicated than it needs to be, but it does work so long as your HTML is surrounded with , it will convert the HTML into what it should look like.
