On our site we list a road map of features for Cart Viper, this comes straight out of Trac in this post I’m going to explain how we do this.

CropperCapture[475]

On the Trac server we’ve created a custom query for each version Cart Viper we want to publish the road map for.

CropperCapture[476]

The query in affect limits the tickets to a given version of Cart Viper.

CropperCapture[477]

Once you’ve created the feeds you can then access the tickets via the RSS feed for each query.
So over in DotNetNuke simple add the News Feed Module to the page and configure it with the URL for the Trac feed and the correct credentials.

Then using our custom XSLT file and a bit of jQuery we get the finished result. 

   1: <?xml version="1.0"?>
   2: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   3:  <xsl:output method="html" indent="yes"/>
   4:  <xsl:param name="ItemsToShow"/>
   5:  <xsl:param name="ShowItemDetails"/>
   6:  <xsl:param name="ShowItemDate"/>
   7:  <xsl:param name="Locale"/>
   8:  <xsl:template match="rss">
   9:   <xsl:for-each select="channel/item[position()&lt;=$ItemsToShow or $ItemsToShow&lt;1]">
  10:    <div class="cvRoadMapItem Normal">
  11:          <p class="cvRoadMapTitle">
  12:             <a href="#" class="cvRoadMapLink">
  13:              <xsl:value-of select="title"/>
  14:             </a>
  15:          </p>
  16:          <xsl:if test="$ShowItemDate='true'">
  17:             <div class="cvRoadMainDate">
  18:              <xsl:value-of select="pubDate"/>
  19:             </div>
  20:          </xsl:if>
  21:          <xsl:if test="$ShowItemDetails='true'">
  22:             <div class="cvRoadMainDesc" style="display:none;">
  23:              <xsl:value-of select="description" disable-output-escaping="yes"/>
  24:             </div>
  25:    </xsl:if>
  26:    </div>
  27:   </xsl:for-each>
  28:  </xsl:template>
  29: </xsl:stylesheet>

 

   1: jQuery(document).ready(function(){
   2:  
   3:     jQuery(".cvRoadMapLink").toggle(function(){
   4:         jQuery(this).parents().siblings(".cvRoadMainDesc").show('fast');
   5:     }, 
   6:     function(){
   7:         jQuery(this).parents().siblings(".cvRoadMainDesc").hide('fast');
   8:     });
   9:  
  10: });