MVPs for SharePoint 2010: Rolling up News Articles in SharePoint Server 2010 with the Content Query Web Part

  • Article

Editor's Note: The following is a guest post by SharePoint Server MVP Randy Drisgillas part of the MVP Award Program Blog's "MVPs for SharePoint" series. Randy is the Branding and Design Lead for SharePoint911. He has more than ten years of experience developing, designing, and implementing Internet based software for clients ranging from small business to Fortune 500 companies. Randy has been working with SharePoint since the beta of SharePoint 2007 and has worked on many large-scale internal and public facing SharePoint branding projects. In 2009, Randy was recognized by Microsoft as an authority on SharePoint branding and design by being awarded MVP status for SharePoint Server. Randy has worked on several SharePoint articles, books, and white papers as well as having co-authored Professional SharePoint 2010 Branding & User Interface Design for Wrox Press (https://bit.ly/sp2010-brandingbook). You can find Randy on Twitter as @Drisgill and at his blog (https://blog.drisgill.com).

The Content Query Web Part (CQWP) was introduced in SharePoint 2007 and is focused on rolling up information from sites in the current site collection by querying, filtering, and sorting the content. You can use this web part in any SharePoint Server site that has the publishing features enabled. Because of its hooks into SharePoint Server publishing, the CQWP can not only roll up information from lists, but it can also roll up information from publishing pages. In this blog post I will show you how to create a CQWP that rolls up news articles from a sub site, as well as how to take advantage of some of the new CQWP features in SharePoint 2010.

Creating the News Articles and Adding the CQWP

Be sure to start with a SharePoint Server publishing site (either create a new one by selecting one of the publishing site templates or by activating the publishing features on an existing site).

1. From your parent publishing site, create a new sub-site using the Publishing Site template and call it News,

2. In the News site, create a few new pages (at least two), each using the Article Page Image on Left page layout. Be sure you enter content and images for the Byline and Rollup Image fields. To do this, click Site Actions > New Page. Then when the page is created, switch the layout by editing the page, then from the ribbon click Page > Page Layout > Article Page > Image on Left. Add some fake content to each page including the Byline and Rollup Image and then save and publish / approve the pages. (Note: if you can’t find the Image on Left page layout you may need to activate it from Site Actions > Site Settings > Page layouts and site templates

3. Now, navigate back to the top level site, edit the page, and add a Content Query Web Part.

4. When the page refreshes, click the link to open the tool pane for the CQWP. Then expand the Query section and select Show Items from the following site and all subsites then click Browse. From the Select Site dialog click on your newly created News site and then click OK.

5. From this web part menu you could filter, group, and sort the items however you would like. Click OK to see the results.

Right now the results aren’t great; they basically show the title and some rollup images. To show the page content we will need to change some settings.

Working with Fields to Display

If you are familiar with how the XSLT styles worked with the CQWP in 2007, you might remember having to export CQWP’s, edit CommonViewFields, and reimport them. In SharePoint 2010 you can now handle this directly in the Web UI with the new Fields to display option.

1. Edit the CQWP again and expand the Presentation tab, you can select group and item styles here, both correspond to XSL files that are in the site collection’s Style Library under XSL Style Sheets. For this demo we will leave them set to Default and Image on left.

2. The next setting is Fields to display, change Description from the default “Comments” to “Page Content” and click OK.

This setting basically shows slots for all the displayed values from the selected itemstyle XSL. You can set whatever field you want to show for those display values. In this case we set the Description value to the Page Content field. With it set properly, the CQWP now shows the page contents as well as the other information. If you wanted to, you could enhance the layout and styles even more by editing the itemstyle XSL file.

Note that any HTML source is currently escaped and displayed as text in the CQWP. To have the actual HTML rendered you would need to edit the itemstyle XSL. This is outside of the scope of this article, but if you are familiar with editing itemstyles, you need to add disable-output-escaping="yes" to <xsl:value-of select="@Description"/>

Working with the new CQWP Filters

SharePoint 2007 included the ability to filter CQWP’s by specific field content, but in SharePoint 2010 there are a couple new filtering options. Rather than just check that a field has a specific string, you can filter that field by either PageFieldValue (which matches the value of another field on the page) or PageQueryString (which matches the value of a URL variable that is passed to the page). In this example we will filter the CQWP by a URL value.

1. Edit the CQWP again and expand the Query tab

2. Under Additional Filters select Byline, contains, and enter “[PageQueryString: MyFilter]” then click OK.

This will tell the CQWP to filter based on the text of the byline of the news article pages to see if it contains the value of the variable MyFilter that will be passed over the URL. To test it, save the page, then change the URL in your browser to include the current page URL and a MyFilter variable. Be sure to pick a value that matches something you entered in one of the bylines of the news article pages. It should look like this:

https://YOURSERVER/Pages/NEWSPAGENAME.aspx?MyFilter=Randy

This would cause the CQWP to only show items that have “Randy” in the byline. This can be a very useful feature; you could create a page of links that sends over various categories in URL variables and filter the CQWP on the news page based on those values. By doing something like this you can reuse the same CQWP page to show many different types of filtered content in the rollup.