Playing Around with Content by Query Web Part (CQWP)

One of our favorite features in SharePoint is Content by Query Web Part, or CQWP. It is available in publishing sites or any site that activates publishing feature. In this post we will play around with CQWP to understand a little bit about how to use it, and modify its appearance.

We can use CQWP as is, add it to any SharePoint page and configure its properties. For example, we use CQWP to display images that we’ve already uploaded into Picture Library before.

CQWP of Pictures

Using out of the box CQWP web part, we just need to specify the source library (in this case Pictures):

Source Library of CQWP

Then, we need to adjust its presentation. We use Default for Group style, and Image on Left for Item style. We also use default fields to display on the CQWP:

Styles and Fields

If we view the source of CQWP web part using Firebug in Mozilla Firefox, we can see that it consists of HTML tag <ul> and <li>.

Source of CQWP

From HTML source, we can identify the CSS class of each HTML elements rendering the CQWP web part. If we want to change the appearance of CQWP content, we can add several CSS definition inside the page containing the CQWP web part. For example, to achieve the following appearance:

CSS Effect on CQWP Web Part

We add the following CSS definition on Home.aspx (the containing page):

&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;
	margin: 0;
	padding: 0;	
	display: inline;
  li.dfwp-item div.item 
	display: inline-block;
	width: 200px;
  li.dfwp-item div.item 
	display: inline-block;
	width: 160px;
	text-align: center;

It’s easy, isn’t? But how can we entirely change the HTML structure of CQWP content? for example if we want to change the <div> tag with <span> tag. It’s also easy. The template that renders CQWP web part is located inside the site containing the web part. What we need is SharePoint Designer and a little knowledge about XSLT.

Open the site using SharePoint Designer, then on Navigation Pane, expand All Files node. Navigate to Style Library > XSL Style Sheets. We should see several XSLT files there. Open ItemSyle.xsl in editor window. Here we can see several XSL templates to render various Style that we can choose when configuring CQWP web part. We use Image on left style that corresponds to Default XSL template. Find the Default template, and we should see various elements constructing the HTML result of CQWP web part.

In the following image, we change HTML tag that corresponds to an item from <div> to <span>:

Editing XSLT File of CQWP Web Part Using SharePoint Designer

As a result of changing the <div> tag to <span> tag, the HTML output of CQWP web part is also changed:

Change HTML Tags of CQWP Web Part

So, we already saw that we can do pretty much anything with CQWP in terms of appearance. We can edit its appearance by overriding or adding its CSS, or we can change its HTML structure entirely by editing its XSL templates.
Source: Playing Around with Content by Query Web Part (CQWP)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s