Improving the CQWP Markup with SuppressWebPartChrome

Several SharePoint web parts, the ContentByQueryWebPart being one of those, expose a property named SuppressWebPartChrome.

When set to true, the web part code strips out the surrounding layout that constitutes the “chrome” of the web part itself.

An example will explain this much better.

Consider the following HTML markup, generated with the SuppressWebPartChrome property set to false (its default):

<table class=”s4-wpTopTable” border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%”>

     <tr>

          <td valign=”top”><div WebPartID=”00000000-0000-0000-0000-000000000000″ HasPers=”true” id=”WebPartWPQ3″ width=”100%” class=”ms-WPBody noindex” OnlyForMePart=”true” allowDelete=”false” style=”” ><div id=”cbqwpctl00_News_g_ded0dcdb_9aaf_44c3_98b5_6af1963c4f3b” class=”cbq-layout-main”><ul class=”dfwp-column dfwp-list”><li class=”dfwp-item”><div class=”item link-item”><a href=”http://erickson.sharepointjukebox.vmw/News/Pages/Test.aspx” title=””>Test</a></div></li></ul></div></div></td>

     </tr>

</table>

And compare it with the following markup, where the SuppressWebPartChrome property has been set to true:

<div id=”cbqwpctl00_News_g_ded0dcdb_9aaf_44c3_98b5_6af1963c4f3b” class=”cbq-layout-main”><ul class=”dfwp-column dfwp-list”><li class=”dfwp-item”><div class=”item link-item”><a href=”http://erickson.sharepointjukebox.vmw/News/Pages/Test.aspx” title=””>Test</a></div></li></ul></div

In the first snippet I have higlighted the HTML portion that gets stripped out.

This is a huge improvement, especialloy because:

  • The resulting markup is smaller, with a lower network bandwidth consumption as the first consequence
  • You get rid of a surrounding table, which makes your markup more compliant to accessibility requirements (and, more generally, it just makes your markup better from a semantic perspective)

Needless to say, I suggest you to “think in advance” and apply this very early during the development lifecycle, since you may need to adjust your CSS or JS libraries accordingly!