Share via

  • Article

Rendering Search Results with XSL

Topic Last Modified: 2006-06-12

You can use the XSL capabilities of the Microsoft XML (MSXML) 2.0 Component Object Model (COM) component to render the results of a PROPFIND Method.

The following example uses a simple XSL style sheet to transform the XML body returned by the PROPFIND Method into HTML for display in a browser.

JScript

Example

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Demo DAV Request</title>
<meta name="Microsoft Theme" content="none, default">
</head>

<xml id=calxsl>
<xsl:template   xmlns:xsl="uri:xsl" xmlns:d="DAV:">
<table
      id="thetable"
      onclick="clickrow();"
      border="4"
      width="100%"
      style="border-style: groove"
      cellspacing="0" bordercolor="#808080" bordercolorlight="#808080" bordercolordark="#000080">
  <tr>
    <td width="25%" onclick="resort(0, 'd:displayname');" bgcolor="silver"><font face="Tahoma" size="1"><b>Name</b></font></td>
    <td width="25%" onclick="resort(1, 'd:propstat/d:prop/d:creationdate');" bgcolor="silver"><font face="Tahoma" size="1"><b>Creation Date</b></font></td>
    <td width="25%" onclick="resort(2, 'd:propstat/d:prop/d:getlastmodified');" bgcolor="silver"><font face="Tahoma" size="1"><b>Last Modified</b></font></td>
  </tr>
  <xsl:for-each select="d:multistatus/d:response" order-by="d:href">
  <tr>
     <td><xsl:value-of select="d:href" /></td>
     <td><xsl:for-each select="d:propstat/d:prop/d:creationdate">
                 <xsl:eval>this.nodeTypedValue</xsl:eval></xsl:for-each></td>
     <td><xsl:value-of select="d:propstat/d:prop/d:getlastmodified" /></td>
  </tr>
  </xsl:for-each>

</table>
</xsl:template>
</xml>

<body>
<h1>Simple DAV request</h1>

<p>URL: <INPUT type="text" id=urlid name=urlid value="http://myServer1/" size=128></p>
<p>Depth: <SELECT id=depthid name=depthid>
<OPTION value="0">0</OPTION>
<OPTION value="1" SELECTED>1</OPTION>
<OPTION value="1,noroot">1,noroot</OPTION>
<OPTION value="infinity">infinity</OPTION>
</SELECT><INPUT type="button" value="Go" id=button1 name=button1 onclick="update()"></p>

<div id=xsldest>
</div>

<script>

function clickrow()
{
   src = event.srcElement;
   while(src.tagName != "TR")
      src = src.parentElement;
   if(src == thetable.rows[0])
      return;
   for(i=0; i < thetable.rows.length; i++)
   {
      onerow = thetable.rows[i];
      for(j = 0; j < onerow.cells.length; j++)
      {
         onecell = onerow.cells[j];
         onecell.style.backgroundColor = "white";
         onecell.style.color = "black";
      }
   }
   for(j = 0; j < src.cells.length; j++)
   {
      onecell = src.cells[j];
      onecell.style.backgroundColor = "black";
      onecell.style.color = "white";
   }
}

function resort(col, sortby)
{
   thenode = calxsl.selectSingleNode("xsl:template/table/xsl:for-each");
   thenode.setAttribute("order-by", sortby);
   xsldest.innerHTML = thexml.transformNode(calxsl.documentElement);
   therow = thetable.rows[0];
   therow.cells[col].style.backgroundColor = "gray";
}

</script>

<script>

var request;
var thexml;

function dostatechange()
{
   if(request == null || request.readystate != 4)
      return;
   if(request.status != 207)
   {
      xsldest.innerText = "Error, status = " + request.status + " " + request.statusText;
   }
   else
   {
      thexml = request.responseXML;
      xsldest.innerHTML = thexml.transformNode(calxsl.documentElement);
   }
   request = null;
}

function update()
{
   request = new ActiveXObject("microsoft.xmlhttp");
   request.open("PROPFIND", urlid.value, true);
   request.setRequestHeader("depth", depthid.value   );
   request.onreadystatechange = dostatechange;
   xsldest.innerHTML = "<h4>loading...</h4>";
   request.send("");
}

update();

</script>

</body>

</html>