|
I had a client who wanted to display and indicator showing the task list status as of today, for example: if there is more than 15 days for the task due date display a green light image, less than 15 days display yellow light image, the task is already late display a red light image.
Simple, however, this client is hosting the SharePoint out of site and we can not deploy custom code at all. I can use an calculate field to select the image to display however that image would not get updated unless a user updates the task, I can write a timer that would run daily and update the filed but that is not possible as I can not deploy custom code, or I can write a custom code that runs a client machine using SharePoint APIs iterates through the task list and updates the items causing all calculated fields to be re-evaluated. The problem with this solution is that it is kind of dependent on having a client machine that would run this code periodically and frankly kind of a messy solution. After researching many of the info on the internet, and a friend’s brains, we devised the following solution.
The calculated field would contain a simplified date and a javascript would run in the browser updating the field with HTML with the proper image info and executing that HTML.
<script type="text/javascript">
//<!-- This script searches for calculated fields that are "marked" vith "Due:" and -->
//<!-- Create a calculated field in the list with the following formula: -->
//<!-- =IF(DueDate="","N/A","Due: "&MONTH(DueDate)&"/"&DAY(DueDate)&"/"&YEAR(DueDate)) -->
//<!-- The data type returned from this formula is: Date and Time -->
// call script
findDatefields();
function findDatefields() {
var d = new Date();
var today = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
var arr = document.getElementsByTagName('td');
for (var i = 0; i < arr.length; i++) {
// Check if it is "our field"
if ((arr[i].className == "ms-vb2") && (arr[i].innerHTML.indexOf("Due:") == 0)) {
var sepDate = arr[i].innerHTML.substring(5).split("/", 3);
var m = sepDate[0];
var d = sepDate[1];
var y = sepDate[2];
// build the datestring
var fieldDate = new Date(y, m - 1, d, 00, 00, 00).getTime();
if (fieldDate > today) {
arr[i].innerHTML = "<IMG src='_layouts/images/KPIDefault-0.gif' Title='On track' />";
}
else if (fieldDate == today) {
arr[i].innerHTML = "<IMG src='_layouts/images/KPIDefault-1.gif' Title='Due today' />";
}
else {
arr[i].innerHTML = "<IMG src='_layouts/images/KPIDefault-2.gif' Title='Overdue' />";
}
}
}
}
// For it to work in collapsed views
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>";
tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild, tbody);
findDatefields();
}
</script>
You can check the following links for information on this subject
|