Home > Posts > HowTo: Group output items using XSL transformation

HowTo: Group output items using XSL transformation

While trying to generate a single HTML page that will list all ClipFlair activities using XSL Transformations (XSLT), I had the need to group items in 2-column rows.

This is my contribution to other solutions suggested at (if you like it you can vote it up there):

http://stackoverflow.com/questions/9908488/xslt-for-each-wrapping-every-nth-item-in-a-div/


Faced by the same problem, that is wanting to output

<div class="container">
  <div class="row">
    <div class="col">...</div>
    <div class="col"/>...</div>
  </div>
  <div class="row">
  ...
  </div>
</div>

from a CXML (Collection XML) file (http://gallery.clipflair.net/collection/activities.cxml – the data behind the PivotViewer display at http://gallery.clipflair.net/activity)

I coined up the following, based on other suggestions here, but using "mode" attribute of "template" and "apply-templates" XSL tags instead which make it cleaner I believe:

<?xml version="1.0" encoding="UTF-8"?>
<?altova_samplexml http://gallery.clipflair.net/collection/activities.cxml?>

<xsl:stylesheet 
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:cxml="http://schemas.microsoft.com/collection/metadata/2009"
  exclude-result-prefixes="cxml"
  >

  <xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>
  <xsl:param name="COLUMNS" select="2"/>

  <!-- ########################### -->

  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>ClipFlair Activities</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
      </head>
      <body>
        <xsl:apply-templates/>
      </body>
    </html>
  </xsl:template>

  <!-- ########################### -->

  <xsl:template match="cxml:Collection">
    <div class="container">
      <xsl:apply-templates/>
    </div>
  </xsl:template>

  <!-- ########################### -->

  <xsl:template match="cxml:Items">
    <xsl:apply-templates 
select="cxml:Item[position() mod $COLUMNS = 1]" mode="row"/> </xsl:template> <!-- ########################### --> <xsl:template match="cxml:Item" mode="row"> <div class="row"> <div>----------</div> <xsl:apply-templates
select=".|following-sibling::cxml:Item[position() &lt; $COLUMNS]" mode="col"/> </div> </xsl:template> <xsl:template match="cxml:Item" mode="col"> <xsl:variable name="URL" select="@Href"/> <xsl:variable name="FILENAME"
select="cxml:Facets/cxml:Facet[@Name='Filename']/cxml:String/@Value"/> <div class="col"> <xsl:value-of select="$FILENAME"/> --- <xsl:value-of select="$URL"/> </div> </xsl:template> <!-- ########################### --> <xsl:template match="*"> <xsl:apply-templates/> </xsl:template> <xsl:template match="text()|@*"> </xsl:template> </xsl:stylesheet>

the output from the above when run in Altova XMLSpy tool (note that it uses altova_samplexml processor instruction to find the XML data) is:


2DaysInParis-OpenActivity-CapRev-FR-EN.clipflair --- http://studio.clipflair.net/?activity=2DaysInParis-OpenActivity-CapRev-FR-EN.clipflair
Abu_Dukhan-CapRev-A1-AR.clipflair --- http://studio.clipflair.net/?activity=Abu_Dukhan-CapRev-A1-AR.clipflair
----------

AFarewellToArms-RevCap-C2-EN.clipflair --- http://studio.clipflair.net/?activity=AFarewellToArms-RevCap-C2-EN.clipflair
agComhaireamhCountingRND.clipflair --- http://studio.clipflair.net/?activity=agComhaireamhCountingRND.clipflair

----------

Al-imtihan-CapRev-B1-AR.clipflair --- http://studio.clipflair.net/?activity=Al-imtihan-CapRev-B1-AR.clipflair
AlBar-Cap-B1-B2-IT.clipflair --- http://studio.clipflair.net/?activity=AlBar-Cap-B1-B2-IT.clipflair

...
Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: