This blog posting applies to Microsoft Office SharePoint Server 2007.

This topic describes a way to configure SharePoint elements for displaying headlines and abstracts from news articles, aggregated across many sites.  Also a description of customizing the page layout of the news article is given.

 

Displaying the news headlines:

 

 

When clicking on the headline in the web part, the user is taken to see a typical news article:

 

Elements of this Approach

  1. Custom Content Type to provide aggregation target.
  2. Custom Page Layouts to provide controls for aggregation plus custom look and feel.
  3. Custom Web Part (Content By Query) to display desired news in desired format/behavior.

Prerequisites

Site where news pages are created must have Publishing feature activated.

Site Settings à Site features à Office SharePoint Server Publishing [Activate]

1. Custom Content Type

Create a new Site Content type on the top-level site (corporate intranet site)

Call it Adatum News Article, make its parent type an Article Page (from the Page Layout Content Types), and put it in the Adatum Content group.  If this is the first member of the group, then you will have to make a New group with this name as shown in this sample:

 

 

 

2. Custom Page Layouts

Using SharePoint Designer, open the top-level site, and open the MasterPageGallery (in the _catalogs folder).  Copy several layout files and rename the copies such as in the following sample:

 

Existing layout file

Copied layout file

ArticleLeft.aspx

AdatumArticleLeft.aspx

ArticleLinks.aspx

AdatumArticleLinks.aspx

ArticleRight.aspx

AdatumArticleRight.aspx

Associate with Custom Content Type

After copying the custom layouts, associate the custom content type with each one.  Using the SharePoint Site Settings, click Master Page and Page Layout Galleries, and you should see the new custom layouts that you added.  Edit the properties of each one to set the associated content type; select the custom type that you created, such as shown in the following sample:

 

 

The Title property is the string that will appear on the page layout when a user edits the page to create or modify news.

 

The Description property is the string that appears when people are choosing the format for their news article.

 

The Preview Image property allows you to specify an image that is shown when people are choosing the format for their news article.  End users really like thumbnails, so it will help to finish customizing the custom layout page and then create a sample article that you can take a screen shot of and turn into a thumbnail.  This preview image is rather large (220x140) and can be a jpg or gif, so you can get some detail to show.

 

The Associated Content Type property should be set to the custom content type that you created.  This will allow the news aggregator to find this article quickly.

Customize the Page Layout

At this point, you don’t have to do any further customization in order for the news aggregation scenario to work.  But

Add a Description Control

The Content By Query web part that we’ll use for our news aggregator has several different viewing formats available.  Several of these show the Description property of the news article page.  Unfortunately, there is not a control to enter the description on the page layout; to modify this out-of-box you have to edit the properties from the page library view.  But we can easily add a control to the page layout to provide an input field for the description property, and this makes it much more useful for people writing news articles to show an abstract for the article.

 

Check out and edit each of the copied layout files to add two items: a NoteField control for the Description field, and an EditModePanel to show instructions for the Description field.  Put these controls into a new row in the table containing the date and byline, as shown below.

 

 

The following sample shows a new page that has been created with the customized page layout.  You can see the additional Description field

 

 

At this point, you are ready to create new pages with this layout.

Create a new page with this layout

This step is an example, it is not necessary to create the masters.  Go to a site in the hierarchy of the portal that has the Publishing feature activated.  By default, the Corporate Intranet Site and the Team Publishing Site have this feature, but it is easy to activate for other sites as well.

 

Under Site Actions, click Create Page, and select the new custom layout, as shown below.

 

 

3. Custom Web Part – the Aggregator

Add a Content Query web part to the page, and set it to Show items from all sites in this site collection.  Then set the List Type to Pages Library, and the Content type to Adatum News Article in the Adatum Content type group, as shown below.

 

 

Other configurations include Filtering, Sorting and Styles under the Presentation header.  Choose what is suitable; the examples here sort by Article Date descending, set the Group style to “small text”  and the Item style to “Image on right” which tends to look better when there is no rollup image for the article.  A generic Adatum news logo was created for people to use when they don’t have a rollup image, or they could leave that blank.

 

Once the look and feel is acceptable, export the web part so you can use it in other places.

Further Customizing the Look and Feel

XSLT can be used to make additional customizations to the views available to the Content Query web part.  This can be used for several other techniques:

  • Show the first X characters of the news item as the abstract instead of using the Description field
  • Open news items in a new window.
  • Show other metadata from the news item.

I was all set to show a simple example that you could extend, but then found Steven Van de Craen's  excellent, detailed instructions for doing this.  See his blog entry at SharePoint 2007 Beta 2: Customizing the Content Query Web Part XSL.

Behavior

Another challenge for most approaches is allowing the user to read the news without taking their browser to the site where the news is published, since some people claim this causes confusion.  Further, it will be desirable to have a link to allow the person to visit the site where the news is published if that’s what they want.  Both of these can be accomplished using the XSLT techniques referenced above.