Monday, April 13, 2009

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.

10 comments:

  1. Hello,

    I'm working on a project where I want to randomly select and display an image on a sharepoint site (I'm using SharePoint Designer 2007). I've created an XML document to hold all the addresses, and I wanted to use JavaScript to generate the random number and then pull an image url.

    When I preview the page, none of my JavaScript seems to be running. Is there any Form or control I need to add in the top of the .aspx file to get JS to run?

    Thanks so much!

    ReplyDelete
  2. What are you using for the preview? it should run in IE, but will not run in SharePoint Designer, so you have to open it up in Iternet Explorer. If it is not working anyway, check the html source in IE and double check if you put everything right.

    ReplyDelete
  3. Hello Paul,

    I'm using IE to preview it. Here is a breakdown of the Javascript code I'm using to connect to the XML file. I have to change <> to [] to post the comment.

    ----------------------------------------
    [script type="text/javascript"]

    //Loads the XML file
    if (window.XMLHttpRequest)
    {
    xhttp=new XMLHttpRequest();
    }
    else // for older IE 5/6
    {
    xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhttp.open("GET","QuoteRotator.xml",false);
    xhttp.send("");
    xmlDoc=xhttp.responseXML;
    --------------------------------------------

    After that I have tried the following code to produce an output:

    var x=xmlDoc.getElementsByTagName("Ad");
    document.write(x[0].getElementsByTagName("ImageUrl")[0].childNodes[0].nodeValue);

    The XML file breaks down as follows:
    [QuoteRotator]
    [Ad]
    [ImageUrl> XXXX [/ImageUrl]
    [/Ad]
    [/QuoteRotator]

    Is there a problem with the actual JS code?

    Thanks again!

    ReplyDelete
  4. It looks fine at a first glance.

    Try putting it to html page and testing it without SharePoint. If it works - add it to SharePoint page using Content Editor WebPart

    ReplyDelete
  5. Hi Paul,

    Thanks for an excellent post! I was able to get your example going, but am wondering if there is some way to get the result returned to XSL?

    i.e.

    I'm trying to raise x to the y power...

    Placed below PlaceHolderMain in a custom DispForm:

    function x2yPowerLocal(x,y)
    {
    var Result = Math.pow(x,y);
    document.write(Result + " The Result from the function");
    return Result;
    }

    Later on in the body of the custom DispForm.aspx


    td class="ms-vb">

    script language="javascript">
    x2yPowerLocal(2,2);
    document.write("Here 2x2");
    /script>
    /td>
    td class="ms-vb">


    script language="javascript">
    x2yPowerLocal(3,3);
    document.write("Here 3x3");
    /script>


    /td>

    (Note, stripped some "<"'s to post the above...)

    Thanks again!

    Steve

    ReplyDelete
  6. Remember - first xsl is rendered, than javascript starts working. Basically you can't use the results of Javascript procedure in XSLT as a parameter. Only as an output.

    ReplyDelete
  7. see here
    http://java.pakcarid.com/default.aspx?sub=25&Sls=25

    ReplyDelete
  8. Not sure if anyone is still watching this, but execution of the javascript happen on the server or on the client?

    ReplyDelete
  9. Kiran Kumar ReddyJuly 7, 2011 at 8:31 AM

    Hi
    I have done the same as you said. It worked for few days. Suddenly it ia not showing any value in the newly created column. JS is not triggering. Does this not work when in the list view, there are more than certain number of list items?

    ReplyDelete
  10. This is because all browsers have accepted all browsers have accepted JavaScript as a scripting language for them and provides integrated support for it. All you need to do is to handle some of the tasks that are dependent on DOM of different browser properly.
    best web design tutorials

    ReplyDelete