XForms/Sorting using XSLT

Motivation

One problem that keeps popping up when creating forms with XForms is the lack of sorting. This is an example for how it is possible to sort an instance using a XSLT stylesheet in Firefox.

Firefox XForms Example

The following model contains two instances. The first instance is the one we will sort and the second instance contains the XSLT stylesheet we will use to perform the sort.

<xf:model>
  <xf:instance id="default-instance">
    <data xmlns="">
      <item>
        <name>B-item</name>
        <date>2001-05-03</date>
      </item>
      <item>
        <name>A-item</name>
        <date>2005-05-03</date>
      </item>
      <item>
        <name>Z-item</name>
        <date>2003-05-03</date>
      </item>
      <item>
        <name>D-item</name>
        <date>2002-05-03</date>
      </item>
    </data>
  </xf:instance>

  <xf:instance id="stylesheet">
    <xsl:stylesheet
      xmlns="" 
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
      version="1.0">
      <xsl:template match="/">
        <data>
          <xsl:apply-templates select="data/item">
            <xsl:sort type="string" select="name"/>
          </xsl:apply-templates>
        </data>
      </xsl:template>
      <xsl:template match="*|@*|text()">
        <xsl:copy>
          <xsl:apply-templates select="*|text()|@*"/>
        </xsl:copy>
      </xsl:template>
    </xsl:stylesheet>
  </xf:instance>
</xf:model>

To perform the sort we will use the following JavaScript which will load the second instance into the Firefox stylesheet engine, then take the first instance make the transformation which will produce the sorted instance. Then the transformed instance is inserted into the model and a rebuild, recalculate, revalidate and refresh is performed.

function sort_instance(id) {
  // We get the instance element
  var instanceElement = document.getElementById(id);
  if (instanceElement!=null) {

   // XForms exposes the retrival of the instance document from the model element which *should*
   // be the parent for the instance element.
   var instance = instanceElement.parentNode.getInstanceDocument(id);

   if (instance!=null) {
      // Now creating the stylesheet, for this example the stylesheet document is also an instance
      // but it can be loaded from many difference sources
      var xslDom = instanceElement.parentNode.getInstanceDocument('stylesheet');

      // create an XSLTProcessor and attach the stylesheet
      var processor = new XSLTProcessor()
      processor.importStylesheet(xslDom);

      // now we do the sorting transformation
      var resultDom = processor.transformToDocument(instance, instance);

      // we then move the result info the instance dom
      instance.removeChild(instance.documentElement);
      instance.appendChild(resultDom.documentElement);

      // and performs the updates for XForms
      instanceElement.parentNode.rebuild();
      instanceElement.parentNode.recalculate();
      instanceElement.parentNode.revalidate();
      instanceElement.parentNode.refresh();
    }
  }
}

Discussion

The idea of having the stylesheet in an instance makes it possible to change the behavior of the sorting by binding controls to it and change stuff like XPath expressions and other XSLT syntax.

References

This example is based upon the sample on [[1]http://landwehr.dk/blog/]