SharePoint: Past Due / Late Tasks in a Task List

 

Update: If you have users who display dates in formats other than MM/DD/YYYY you will find that the following will not work consistently. Here’s is some background on the date problem in SharePoint and JavaScript and how to fix it: http://techtrainingnotes.blogspot.com/2011/03/sharepoint-javascript-and-dates.html (includes replacement code for this article)

 

The code below and in the above link works with both SharePoint 2007 and 2010.

 

Here’s another JavaScript trick to deal with a common request, highlighting past due tasks in a SharePoint Task List.

Here’s a few non-JavaScript ways that this has been done:

• Create a custom workflow (too much work and not portable, but it can also send reminder emails!)
• Use a trick to add a calculated field using [Today] (only works when the trick is reapplied every day or each task is manually edited)

This example uses a bit of copy-and-paste JavaScript and requires the following:

• A Content Editor Web Part to hold the JavaScript
• Some JavaScript you can copy from below
• An extra column to hold the past due message (optional)

The goal:

 

To add the extra column:

If you would like to display a message such as “Past Due” or display an image then you will need an extra column, preferably one your users cannot edit. A calculated column that displays a blank will do this.

• Add a new column to your list (Settings, New Column)
• Give it a title (any will do) such as “Past Due”
• Make the column a Calculated column and set the formula to ="" (and equal sign followed by two quotes)

To add the Content Editor web part and JavaScript:

• Display the task list view to color code (each view will need its own web part and JavaScript)
  
• Add a Content Editor web part
  
  • Site Actions, Edit Page
  • Add a Content Editor web part and move it below the calendar web part
  • In the web part, click Edit, Modify Shared Web Part, and in the Appearance section change "Chrome" to "None".
    
• Add the JavaScript
  
  • Click the Source Editor button
  • Type or paste the JavaScript (examples below)
  • Count the columns displayed in your task list to find the “Due Date” and “Past Due” columns. The Attachments column is column zero and the Due Date is typically column five (0,1,2,3,4,5).
  • Edit the JavaScript to set these two numbers:
    var colDueDate = 5;
    var colPastDue = 7; // set to -1 to ignore
  • Click Save, OK and Exit Edit Mode to see the results
    
  • If you would like to display an image in place of the text change this line:
    
    x[i].parentNode.childNodes[colPastDue].innerHTML='Past due!'
    
    to:
    
    x[i].parentNode.childNodes[colPastDue].innerHTML='<img src="/_layouts/images/ERRLG.GIF" />'
    
    and set your SRC to an image in your library or in the SharePoint install folder (“images”).

Making this work in views other than “All Tasks”

You probably will first test this in the “All Tasks” view and then switch to one of the other task views and mumble something about Mike’s hacks don’t work everywhere!

Well… each view page is, well… it’s own page. Check the URLs.

All Tasks: http://…../AllItems.aspx
Active Tasks: http://…../active.aspx
My Tasks: http://……/MyItems.aspx

Each page will need it’s own Content Editor Web Part with the JavaScript, the extra column will need to be displayed and the column numbers in the JavaScript adjusted.

As an example, here are the steps for the “Active Tasks” view:

• Modify the view to display the “Past Due” column
• Check your column numbers for the “Due Date” and “Past Due” columns
• Add the Content Editor Web Part and the JavaScript as described above, adjusting the column numbers as needed.

Bugs? Issues?

• You cannot sort the “Past Due” column as this data is not in SharePoint. It has only been added in the user’s browser. (Another plus for a workflow solution?)
• Each new view created will need the CEWP and the JavaScript added.
• Changing or reordering the columns in a view will require an update to the column numbers in the JavaScript.
• As the CEWP is not visible, you will probably forget that it is there, and then wonder why the color highlighting no longer works after you modify the view!
• As the CEWP is not visible, the next person to inherit your SharePoint site will have no idea how this works. (You do document everything you do in your site, right?)

The JavaScript:

<script type="text/javascript" language="javascript">

  // Stolen from techtrainingnotes.blogspot.com !

  // this routine needs to know:
  // column with the Due Date (attachment column is #0)
  //      (in the default task list Due Date is #5)
  // optional column to display the "past due" message
  //      (can be any "single line of text" column)
  var colDueDate = 5;
  var colPastDue = 7; // set to -1 to ignore

  var i=0;
  d=new Date() //current date/time

  var x = document.getElementsByTagName("TD") // find all of the TDs
  for (i=0;i<x.length;i++)
  {
    if (x[i].className=="ms-vb2") //find the TDs styled for lists
    {
      //find a row with a key phrase
      if (x[i].innerHTML=="Not Started"
           | x[i].innerHTML=="In Progress"
           | x[i].innerHTML=="Waiting on someone else" )
      {
        if (d.getTime() >= Date.parse(x[i].parentNode.childNodes[colDueDate].childNodes[0].innerHTML) )
        {
        x[i].parentNode.style.backgroundColor='red'; // set the color
        if (colPastDue > -1)
        x[i].parentNode.childNodes[colPastDue].innerHTML='Past due!' 
        }

      }

    }

  }
</script>