Adding Banding in a CQWP

CQWP Banding using XLST

The Content Query Web Part aggregates SharePoint content. Banding can be added by customizing the associated XSLT in a file called ItemStyle.XSL. One can optionally customize the XSL in a copy of this file, and then customize the CQWP to use the customized file. I wanted to customize the list of Blog posts to be condensed, with a truncated preview. Here’s how to do it.

Tuning the CQWP

Use the following settings in the CQWP to create a list of just Blog Post Links:
1. List Type: Posts
2. Content Types: List Content Types
3. Show items: Post
4. Group by: Created By
5. Sort by: Created
6. Limit: 25
7. Group style: Banded
8. Item Style: Title Only: Important, this determines the XSLT template customized and used later
9. Fields to display: Title: Title (only)

Optional:
1. Export Web Part
2. Open in Notepad
3. Edit and change the XSLT file ItemStyle.XSL referenced, to point to a different file
4. Save
5. Import as a web part

Tuning the XSLT

Locate the XSLT template processing the item, and refine it. If a new XSL file is desired, copy ItemStyle.XSL and edit that one. Here’s the customized commented code for the TitleOnly template:

<xsl:template name="TitleOnly" match="Row[@Style='TitleOnly']" mode="itemstyle">
        <xsl:variable name="SafeLinkUrl">
            <xsl:call-template name="OuterTemplate.GetSafeLink">
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="DisplayTitle">
            <xsl:call-template name="OuterTemplate.GetTitle">
                <xsl:with-param name="Title" select="@Title"/>
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>

<!-- Joel's alternating row colorings-->
        
        <xsl:variable name="CurPosition" select="count(./preceding-sibling::*)" />
                
        <xsl:variable name="AlternatingCssClass">
        <xsl:choose>
                <xsl:when  test="($CurPosition mod 2 = 0)">
                   <xsl:value-of select="'#eeeeee'" />
               </xsl:when>                
               <xsl:otherwise>
                  <xsl:value-of select="'white'" />
              </xsl:otherwise>
            </xsl:choose>
           </xsl:variable>

<!-- Joel's table, created for each row, 300 wide seems a good number -->
<!-- Joel's decision to use the existing 'description' class, to get more vertical compression than 'tem'-->
<!-- Joel's create a table, row and cell around each link, to allow banding -->
              <div class="description">    
              <table width="300">
              <tr style="background:{$AlternatingCssClass}">
              <td> 
             
         <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
                     
         <a href="{$SafeLinkUrl}" title="{@LinkToolTip}">
             
          <xsl:if test="$ItemsHaveStreams = 'True'">
            <xsl:attribute name="onclick">
              <xsl:value-of select="@OnClickForWebRendering"/>
            </xsl:attribute>
          </xsl:if>
          <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">
            <xsl:attribute name="onclick">
              <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>
            </xsl:attribute>
          </xsl:if>
          <xsl:value-of select="$DisplayTitle"/>
        </a>
        <!-- Joel's HTML for closing the data cell, row, and table-->
        </td>
        </tr> 
        </table>   
      </div>

    </xsl:template>