The Microsoft MVP Award Program Blog

Independent Experts. Real World Answers.

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

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

  • Comments 6

Editor's Note: The following is a guest post by SharePoint Server MVP Randy Drisgill as 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 (http://bit.ly/sp2010-brandingbook). You can find Randy on Twitter as @Drisgill and at his blog (http://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:

http://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.

Leave a Comment
  • Please add 2 and 4 and type the answer here:
  • Post
  • hello Randy,

    Thanks for your useful article,

    but there is a question:

    for doning this,i should make a page for each news?

    i mean that for every single news i should make a News Articl page from my news Articl page layout?

    i'm making a news site ,there are alot of news in every type (politics,economic,etc)

    i used a CQWP and attach  my news list to it,and i wanted when user click on one news topic it goes to a page which shows the news body that is in news list

    can i do this without using article pages?

    please help me

    Ireally appreciate your help...

  • Dear aynaz,

    Yes you should do this for every single News.

    and yes you can do this, you can create a list of News, and when the user clicks on it it goes to a url like this

    www.mysite.com\news.aspx?Id=343

    and there is a control in the page to get the item by Id.

    This approach is easy but it have a big issue, It is not crawlable by sharepoint. search results will not be very good

    So the best approach is what Randy show up

    Best Regards

  • Great article as usually. Thank you Randy. Could you point me to a good resource on how to create categorized news site for a company?

    Also, how would I be able to display an excerpt only, instead of the content?

    Thank you!

  • Great article!

    I'm able to setup the CQWP to show the articles but diffrent sized images kinda ruins it. Is there a way to resize the images automaticly?

  • Great Article Randy.

    I got one question though, as most of my customers want the pictures used in the CQWP news rollup to be at the same size so that the view is clean and neat.

    Is it possible to upload pictures in some way so that the image get resized automatically?

  • Hi Randy,

    I have small question. I  tried to use the news page article and created one custom Item style. Strangely, when I try to view the articles using content query web part on one of the pages , I  couldn't see the description  and title of article page. However, when I try to use the same Item style on the Home  page, I could see the description and content of news. Am I  missing any reference ? Have you encountered this kind of problem before.

Page 1 of 1 (6 items)