Monday, August 17, 2009

Visualizing Task Status

For most of us our day and work is broken into activities that have Start, End and Due Dates. Those might be unrelated tasks, like working with the HelpDesk system or heavily related ones when working on a project with several milestones and a complicated task dependency schema. As a nature of our work, our performance is often measured by our ability to complete those assignments on time, within the budget, and under predefined quality conditions. We will leave budget and quality out of equation today and see what we can do better to assure the timeliness of our actions which can be particularly challenging when working with large teams, large projects or just simply with a large number of tasks. The last one is particularly challenging as in most business environments the unfortunate reality is that the priority of those tasks is sometimes blurry and undefined or everything is classified as “High Priority”.
So let us look at a simple common scenario. You have a project with a series of tasks that are of different with the only common denominator being your desire to meet the schedule. And let’s assume another set of business rules you would like to adhere to:

1. Tasks that are past due should be visually demanding your attention so that you can take appropriate action.
2. Everybody is responsible for their own tasks but the Team Leader or Project Manager should see and be able to act on any tasks assigned to the members of the team.
3. Tasks identified as “Critical” should stand out.
4. You would like to live to the Schedule Baseline and drive forecasting to perfection so all tasks that are falling out of the originally defined schedule should be clearly visually indicated.
We usually use relatively complex Project Management tools like MS Project, and Primavera. Those tools, while providing significant value added to the organization, are not really there yet from visualization stand point and require significant training as well as work involved in surfacing up all the project key performance indicators. Sometimes it is easier from user acceptance and visibility stand points to use simpler and more available tools. SharePoint smoothly fills in the gap. I won’t go too deep into the Pro’s and Con’s of using SharePoint to manage projects; instead I will be showcasing some simple techniques to accomplish the objectives we have outlined above.
Let’s assume you have a site with a simple list you are currently using to track your activities around two different projects.
Here is an example of what this might look like:












So I would like to do the following to comply with my objectives:
1. Flag tasks being on schedule, due today and being past due using relevant icons
2. Make tasks of critical nature bold and red, which in our case means Category=”Critical”
3. Highlight tasks that have slide off the originally planned schedule
This will result in a page that looks more like this:












Task #1 – Flagging
The ‘flagging’ process is how we visually represent overdue tasks to the user. In our example when the current date or date of ‘today’ is greater than the due date and the task is still incomplete we know the task should be flagged as ‘overdue’.
The most challenging part is to compare the Due Date to the current date. SharePoint doesn’t allow you to work with Today() function in the Calculated column. Another challenge here is the fact that Calculated Column by its nature is being updated when the record is being updated. That means there is no assurance that it updates regularly. It also means it does not update on its own (without action being taken).
There are several workarounds with adding 'Today’ and a temporary column. Which we would then use in the calculations and further remove it from the list; or creating code that periodically runs and recalculates the value of the Calculated column.
These approaches have lots of disadvantages and some will stop working after a certain period of time. Instead the solution proposed in this document is to use HTML in conjunction with JavaScript embedded within a hidden Content Editor webpart.
Here is an outline of how to execute the solution using the example scenario described above:
· Add a Calculated column to the list with the logic generating HTML script on the page
































- Add a Content Editor Webpart (has to be below the List on the page) with the java script (jquery component) that would process tagged HTML and generate appropriate icon based on the Due Date and Today driven logic:






































· Hide the Content Editor WebPart that contains the JavaScript you just completed. (Go to webpart properties and under layout set Hidden to true (check the box).)
So now the script is analyzing the content of the page and puts a relevant icon while processing the HTML content of the column. This means that when todays date is greater than the due date the task item will be ‘flagged’.

Task #2 – Marking Critical tasks with bold and red font
It gets really easy from this point on. We are just going to add additional java script into the already existing Content Editor Webpart that you added in Task 1.










The page should now look similar to this:











Task #3 – Highlighting Tasks slipping of the baseline We will use the same approach we used in the previous tasks where we update the Content Editor Webpart’s script.











So finally our Tasks page looks as we wanted it to be.

At this point you should now have the task list showing the way you want it. Make certain to adjust the views and relevant site links or roll ups of the list so that you consistently use these visual indicators and good luck.

Special thank you goes to great solution architect and developer Riyaz Patel who helped me with the java script part