25 June 2011

Getting child pages in Umbraco and showing them in a table (matrix-like) structure

Table structure for child pages preview in Umbraco

One of the common tasks in web development is creating the preview of multiple objects. These objects might be a real-world objects or just a containers of a certain information. Obvious example is the upper-level preview page and a number of child pages. In Umbraco child pages as a separate page type may hold all sorts of information.

In my recent case I had an Umbraco document type that holds information about YouTube clip, like URL, description, performer, publication date and so forth. I needed to show a preview of all those clips stored as a child pages on the parent page in a table structure show on the picture. 

child_pages_matrix

This can be done with a .NET code, but with XSLT it's much more interesting. Due to the language limitations it is not possible to use conventional loops, like in C#, but a recursion does the trick. Here's how to do it:

<xsl:variable  name="counter"  select="0"/>
<xsl:variable  name="NumberOfPages"  select="count($currentPage/* [@isDoc and string(umbracoNaviHide) != '1'])"/>


<xsl:template  match="/">
    
<!-- start writing XSLT -->
   <div>
<table  border="0"  cellpadding="2"  cellspacing="2">
<xsl:call-template  name="loop">
   <xsl:with-param  name="i">
      <xsl:value-of  select="0"/>
   </xsl:with-param
</xsl:call-template>
</table>
     </div>
</xsl:template>
    
   <xsl:template  name="loop">
     <xsl:param  name="i"  />    
     <xsl:if  test="$i &lt;= $NumberOfPages">
       <xsl:if  test="(($i -1) mod 3) = 0">
         <xsl:call-template  name="row">
           <xsl:with-param  name="i">
             <xsl:value-of  select="$i"/>
           </xsl:with-param>
         </xsl:call-template>
       </xsl:if>
       <xsl:call-template  name="loop">
         <xsl:with-param  name="i">
           <xsl:value-of  select="$i + 1"/>
         </xsl:with-param>
       </xsl:call-template>
     </xsl:if>
   </xsl:template>
  
   <xsl:template  name="row">
     <xsl:param  name="i"  />
     <tr  height="100">
     <xsl:for-each  select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']">
       <xsl:sort  select="rV_NewsItemPubDate"  order="descending"/> 
       <xsl:if  test="position() &gt;= $i and position() &lt; ($i + 3)">
         <xsl:variable  name="PreviewImg"  select="./* [name() = 'rV_videoItemPreview']"/>       
         <xsl:if  test="$PreviewImg != ''">
           <td  valign="top">          
     ....

           </td>      
         </xsl:if>
       </xsl:if>      
     </xsl:for-each>  
     </tr>    
   </xsl:template>

 

Recursively working loop (template name="loop") calls the template 'row' passing the values with increment of 3 (1,4,7,10 and so forth). The for-each statement takes a sorted set of child pages and takes only three in relevant row. Then it renders whatever is needed in a table structure (<td>...</td). 

If we need the number of columns other than 3, then we need just to change this: 

<xsl:if   test="(($i -1) mod 3) = 0">

to find every forth or every second or third item in a sequence. 


Post a comment


RECENT BLOG ENTRIES
30 November 2013
Bigcommerce template editing
How to change content in BigCommerce.com templates: guide for a complete newbie.
Read full story
09 October 2013
What if Fancybox does not work at all
If Fancybox library does not work, this might be due to the conflicts with other JS libraries and not the syntax error.
Read full story
14 October 2012
Fancybox with ASP.NET form on Umbraco
Using ASP.NET form on Fancybox popup to make login window
Read full story

Blog archive

The author of this web-site supports WWF . Please do your part in saving our planet!

Alex’s expertise in developing and maintaining web applications has been invaluable to the College – J. Wittersheim, Director of Information Management and Funding, Bury College