A "TimeSpan" Counter

Dec 21, 2011 at 6:52 PM
Edited Dec 23, 2011 at 5:53 PM

I have written some code that uses SPServices to add a "Computed" fields to a list. I use this field to display a Days Open that just shows the number of days since the Created date. I have created a DueDays field as well. I wanted to post a screen shot but... Anyway, I can post the working code if needed. My next version will have KPI functions!


Dec 23, 2011 at 5:57 PM

This is a screenshot of a task list that has two TimeSpan fields. I circled an example of what happened when I changed the DateComplete.

Dec 26, 2011 at 11:20 AM

So it appears that in my zeal of getting this to work, there was a slight oversight for those folks who are fortunate enough to be using SP2010 for most of what they do. The code as written works fine with SP2007, but there is a lot of stuff to do for the same functionality in SP2010. After spending a few hours going over the MSDN documentation and a few bits of logical brainstorming, I have decided that I would like to create this with a user interface with the following features:

  • Ability to select a view to add or update.
  • Ability to create/use a library to add custom xsl rendering templates for the custom fields. (Would be done dynamically).
  • Ability to just update the view XSL if you did not want to use a separate template. (Still done dynamically).
  • Ability to create the fields and define the attributes from the interface.
  • Ability to create a list to store interface attributes.
  • More functions that I have been working on.

I figured that I would implement the main function to create the UI and add a list to store attributes. There would be an option to opt out of creating the list if you did not want it. This will be the next phase. This is all done as a jQuery plugin and requires SPServices to work. I will most likely add this to my blog and you can follow the progress there as well. Any thoughts are appreciated!


Dec 27, 2011 at 3:19 PM


I'd love to understand more about what youre doing here, starting with the "computed column" idea.


Dec 27, 2011 at 4:11 PM
Edited Dec 27, 2011 at 4:13 PM

Okay, first let me clarify what I found out over the last few days. My current code will work great in SP2007 because of how list views and out of the box forms are rendered. However, there are some things in 2010 that make it harder. More on that later! In SP2007 and WSS a "Computed" column uses a DisplayPattern element to determine the HTML to draw on the page. It is also dynamic and does not require being edited to "update" it. It is strictly a display type column and does not store data. The ECB is drawn from Computed columns. It occured to me that it would be neat if I could add a Computed column to a list just like any other column. So I tried it and it worked great. My first test was added to a CEWP and looked something like this:

<script language="javascript" type="text/javascript" src="/SiteCollectionDocuments/jquery.SPServices.min.txt"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    var moveon = true;
        operation: "GetList",
        async: false,
        listName: 'Tasks',
        completefunc: function(xData, Status) {
            var rsponse = new String(xData.responseText);
            if (rsponse.indexOf("HelloWorldColumn") > 1) moveon = false;
    var dfields = "<Fields><Method ID='1'><Field Name='HelloWorldColumn'/></Method></Fields>";
    var nfields = "";
    nfields += "<Fields><Method ID='1'><Field Name='HelloWorldColumn' Type='Computed' Sortable='FALSE' Filterable='FALSE' DisplayName='Hello World' StaticName='HelloWorldColumn'>";
    nfields += "<FieldRefs><FieldRef Name='Created'/><FieldRef Name='ID'/></FieldRefs>";               
    nfields += "<DisplayPattern><HTML><![CDATA[<div id='HelloWorldColumn]]></HTML>";
    nfields += "<Column Name='ID'/>";
    nfields += "<HTML><![CDATA['>Hello World - Created: ]]></HTML>";
    nfields += "<Column Name='Created' StripWS='TRUE'/>";
    nfields += "<HTML><![CDATA[ </div>]]></HTML>";
    nfields += "</DisplayPattern></Field></Method></Fields>";
    if (moveon == true) {
            operation: 'UpdateList',
            async: false,
            listName: 'Tasks',
            newFields: nfields,
            completefunc: function(xData, Status) { alert("Field Added"); }
This will add a column to the Tasks list that just displays the text "Hello World - Created: " Plus the date the item was created.
Once I added this, then I deleted to CEWP. This was just a test.
Dec 28, 2011 at 9:31 PM

Just an update on how this is going. I have figured out how to make my code work in SP2010 as what I like to call the 95% solution. The Computed column works as expected on the out of box forms. In SP2010 the list views are no longer rendered the same way and it now uses XsltListViewWebParts to render your views. If you have access to the server ( In this case I don't), you can add an XSL template to the 14 hive that will render your field wherever you put it. However, all is not lost as you can in SP2010 using a webservice call, update the View properties and pass in your XSL code to render your field. This approach requires you to update the view, but you have to be sure that your XSL template contains the default XSL to render the rest of the view. I will post all of this when I am done. I am currently working on building a UI "wrapper" for some of the SPServices calls I use and may extend this further. Any feedback is appreaciated!

Jan 17, 2012 at 10:48 AM
Edited Jan 17, 2012 at 11:19 AM

I have posted a new plugin on my blog that splits out the Timespan code into its own plugin for now. I am still building the UI, but that will take much longer and I want to get the Timespan code out. The first one will only work for WSS/2007 but I will be updating it to include the 2010 view update in the future. The example above for the Hello World computed column is a good example of what you can do with computed columns. If you read the docs you can also see how to use them for various other tasks. I have uploaded the code here so that you can test it. Let me know on the blog post if you have any questions.