Changing CQWP HTML Output Structure

This post is still about CQWP, continuing our previous posts: Playing Around with Content by Query Web Part (CQWP) and Using Your Own XSLT in Content by Query Web Part (CQWP). Based on the knowledge we obtained from those previous posts, now we should be ready to make some changes in the output structure of CQWP: changing HTML tag UL and LI to DIV and DIV respectively.

By default, CQWP constructs HTML output as UL and LI tags. If we view the source or use Developers Tool to examine HTML tags from CQWP, the we can see the following construct:

<ul class="dfwp-column dfwp-list">
  <li class="dfwp-item"> .. </li>
  <li class="dfwp-item"> .. </li>
  <li class="dfwp-item"> .. </li>
  ..
</ul>

Our objective is to change it to the following HTML construct:

<div class="container">
  <div class="item"> .. </div>
  <div class="item"> .. </div>
  <div class="item"> .. </div>
  ..
</div>

And why would we do that? Well, the answer may vary, but in our case, we are preparing our CQWP to be used by a slider JavaScript library. And the slider requires using DIV instead of UL and LI.

In our previous post, we already explained how to use our own XSL formatter to output custom HTML. So, to achieve our objective changing UL and LI to DIV, we have to find where the occurrence of those tags in our XSLT file and change it there.

Open SliderContentQueryMain.xsl (this is our custom XSLT formatter which was copied from ContentQueryMain.xsl) in a text editor (note that you should check-out the file first before you can edit it), and go to line 84. You should see the following line of codes:

  <xsl:variable name="BeginColumn1" select="string('<ul class="dfwp-column dfwp-list" style="width:')" />
  <xsl:variable name="BeginColumn2" select="string('%" >')" />
  <xsl:variable name="BeginColumn" select="concat($BeginColumn1, $cbq_columnwidth, $BeginColumn2)" />
  <xsl:variable name="EndColumn" select="string('</ul>')" />

Change it to the following construct:

  <xsl:variable name="BeginColumn1" select="string('<div class="container" style="width:')" />
  <xsl:variable name="BeginColumn2" select="string('%" >')" />
  <xsl:variable name="BeginColumn" select="concat($BeginColumn1, $cbq_columnwidth, $BeginColumn2)" />
  <xsl:variable name="EndColumn" select="string('</div>')" />

Go to line 35, you should see the following line of codes:

  <xsl:variable name="BeginListItem" select="string('<li class="dfwp-item">')" />
  <xsl:variable name="EndListItem" select="string('</li>')" />

Change it to the following construct:

  <xsl:variable name="BeginListItem" select="string('<div class="item">')" />
  <xsl:variable name="EndListItem" select="string('</div>')" />

Check-in the file, and refresh our web part. Now, if we see the source of our CQWP web part, UL and LI tags have been replaced by DIV tags.

CQWP Source

Source: Changing CQWP HTML Output Structure

Advertisements

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