Note: this was first posted at www.endusersharepoint.com here: http://www.endusersharepoint.com/2009/11/02/comparing-dates-in-a-data-view-web-part-to-build-a-wss-kpi-in-sharepoint/.

This is yet another blog post on comparing dates in XSL in a data view web part in SharePoint.

This is my scenario:

• I have a custom list.
• The business purpose of the list is to support the idea of a new employee and his/her tasks to be completed within 7 days of starting the job.
• They are in a “warning zone” after 4 days if they have not completed these tasks.
• I want to create a simple dashboard that shows green when they have either completed the task or if they have more than 4 days to complete it.
• I want the dashboard to show yellow if they are in the warning zone.
• I want to to show red if they have not completed the task after the due date.

I borrowed from this article at Marc Anderson’s blog (http://mdasblog.wordpress.com/2008/02/19/comparing-dates-in-sharepoint-using-xsl/) to get the comparison logic and this article at www.endusersharepoint.com for the basic ideas behind the dashboard (http://www.endusersharepoint.com/2008/12/09/visual-indicators-for-the-masses-kpis-in-wss/) written by Toni Frankola.

You should read the supporting blogs, but the implementation goes like this:

1. Create a content type (columns + CT)
2. Create a custom list and associate it with the content type.
3. Create a web part page.
4. Add the custom list to the web part page.
5. Open up the page in SPD.
6. Convert the list to a DVWP.
7. Modify the XSL to generate the dashboard bits.

I have two dates: a warning date and a due date.  To compare the dates, my xsl does the following:

 <xsl:choose>

 <!-- When both handbook and policy are signed, we are green regardless of dates. -->

 <xsl:when test="@Employee_x0020_Handbook_x003F_ = 1 and @Security_x0020_Policies = 1">

 <img src="/_layouts/images/KPIDefault-0.GIF" alt="No problems"/>

 <a href="/HumanResources/Lists/New Employee Checklist/EditForm.aspx?ID={@ID}&amp;Source=/HumanResources/Shared Documents/New Hire Dashboard.aspx"> [Edit]</a>

 </xsl:when>

 <!-- Show amber indicator if we're past the warning date. -->

 <xsl:when test="ddwrt:FormatDateTime(string(ddwrt:Today()), 1033, 'yyyyMMdd') &gt;= ddwrt:FormatDateTime(string(@TaskDueDate), 1033, 'yyyyMMdd')">

 <img src="/_layouts/images/KPIDefault-2.GIF" alt="Overdue"/>

 <a style="border: 0px" href="/HumanResources/Lists/New Employee Checklist/EditForm.aspx?ID={@ID}&amp;Source=/HumanResources/Shared Documents/New Hire Dashboard.aspx"> [Edit]</a>

 </xsl:when>

 <!-- Show red indicator if we're passed the due date. -->

 <xsl:when test="ddwrt:FormatDateTime(string(ddwrt:Today()), 1033, 'yyyyMMdd') &gt;= ddwrt:FormatDateTime(string(@Warning_x0020_Date), 1033, 'yyyyMMdd')">

 <img src="/_layouts/images/KPIDefault-1.GIF" alt="Warning"/> 

 <a href="/HumanResources/Lists/New Employee Checklist/EditForm.aspx?ID={@ID}&amp;Source=/HumanResources/Shared Documents/New Hire Dashboard.aspx"> [Edit]</a>

 </xsl:when>

 <!-- If we get here, we're earlier than the warning date, so we're green. -->

 <xsl:otherwise>

 <img src="/_layouts/images/KPIDefault-0.GIF" alt="No problems"/>

 <a href="/HumanResources/Lists/New Employee Checklist/EditForm.aspx?ID={@ID}&amp;Source=/HumanResources/Shared Documents/New Hire Dashboard.aspx"> [Edit]</a>

 </xsl:otherwise>

 </xsl:choose>

A few key points from above:

• I tried to compare dates without using the ddwrt functionality and got nowhere.  I still don’t understand that.  They dates displayed correctly, but both “>” and “<” comparisons always failed.  In the end, ddwrt came to my rescue (thanks, again, Marc).
• I’m also displaying an [Edit] link to the item.  I mainly did this so that I could easily test this out.  The link itself may be useful to someone trying to figure it out.
• This is implemented in SharePoint online and works nicely.
• The images I reference in the _layouts directory (/_layouts/images/KPI…) are available out of the box in my environment so they are probably available for you as well.

Here’s a screen shot of what it looks like for me:

</end>

Subscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin

There is a wealth of great information on the WSS 3.0 Data View Web Part (DVWP) on the web from several sources.  However, I found it to be surprisingly difficult to find information on this first very basic step.  Here is another article in the "quick and easy" series to address it.

Follow these steps to create a data view web part (DVWP).  They are based on an "Announcements" web part, but apply to most lists.

1. Create an Announcements web part and add it to a site.
2. Open the site in SharePoint Designer.
3. Open the site’s default.aspx.
4. Select the Announcements web part and right-click. 
5. From the context menu, select "Convert to XSLT Data View".

SharePoint Designer notifies you that this site is now customized from its site definition. That’s not necessarily bad, but there are important implications (performance, upgrade, others) which are beyond the scope of this little "Quick and Easy" entry.  To get more information on this subject, I recommend both books here as well as your favorite Internet search.

Confirm that you did it correctly:

1. Close and re-open the web browser (to avoid accidentally re-posting the original "add a new web part").
2. Select the web part’s arrow drop-down and choose "Modify Shared Web Part" from the menu.
3. The tool panel opens to the right.
4. The panel has changed from its usual set options to this: