JavaScript in SharePoint 2007 / MOSS Data View XSL

This sound obvious, but looks like lots of people do not know this. YES, you can use JavaScript in XSL. And YES, you can use JavaScript in SharePoint Data View XSL. And it is fairly easy. Here is a small sample.

Let’s say we want to know how old each item we view in Data View is. As the version of XSL used in SharePoint is “1.0”, we don’t really have a wide scope of date functions. Actually we do have only “FormatDate” function, and even this one comes from a special (ddwrt) Microsoft namespace.

Anyhow, instead of working with XSL, trying to create some crazy Template to handle this task, we can simply use JavaScript.

I assume here that you worked with SharePoint Designer 2007 and Data Views before.

You’ll have to add a JavaScript function first. You can add/link it to the page, page layout or master page, does not matter. I will use slightly modified script from “The JavaScript Source”.

<script type="text/javascript">
 var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
 function countup(dat) {
  var dt = new Date(Date.parse(dat));
  var yr =dt.getYear();
  var m =dt.getMonth();
  var d =dt.getDate();
  var today=new Date();
  var todayy=today.getYear();
  if ((navigator.appName=="Microsoft Internet Explorer") && (todayy<2000))
   todayy="19"+todayy;
  if (navigator.appName == "Netscape")
   todayy=1900 + todayy;
  var todaym=today.getMonth();
  var todayd=today.getDate();
  var todaystring=montharray[todaym]+" "+todayd+", "+todayy;
  var paststring=montharray[m]+" "+d+", "+yr;
  var difference=(Math.round((Date.parse(todaystring)-Date.parse(paststring))/(24*60*60*1000))*1);
  document.write(difference + " day(s)");
 }
</script>

Now we need to call this JavaScript function from Data View. Just click into one of the respectful cells in your Data View, and switch to Code View. You’ll see something like this:

<td class="ms-vb">
 <xsl:value-of select="ddwrt:FormatDate(string(@Modified), 1033, 5)" />
</td>

Now we’ll edit it, adding the JavaScript Call:

<td class="ms-vb">
 <script language="javascript">countup("<xsl:value-of select="ddwrt:FormatDate(string(@Modified),1033,1)" />");</script>
</td>

Vuala!

PS: I did not add any screen shots here assuming that it is fairly easy, but if you need some, just leave some comments.