Wednesday, July 10, 2013

Developing a Custom Content Search Web Part, Part 1: Requirements and Architecture

The Content Search Web Part does a pretty decent job out of the box as a news rotator. It can slide (cue the oohs and aahs), display data from anywhere in SharePoint, and IMO is easier for non-developer/power users to configure than a Content Query Web Part. But sometimes you need that little extra oomph; something that goes to the next level and sets your web part apart from the out of the box web parts. In this series of posts I'm going to give you a walkthrough to develop a custom Content Search Web Part (CSWP) that will be used as a news rotator on our SharePoint site. These posts are not a definitive guide, but are written with the intent of piquing your interest so you'll go crack open a CSWP and try it yourself.

In theis series of posts I'll walk through the requirements and site architecture, building the query, and creating a display template.


Before we get into this we need to figure out what we want to display in our news rotator. We need to develop a web part that will:

  1. Display two news article content types (defined in the Architecture section)
  2. Display articles when Start Date <= Today AND End Date >= Today
  3. Articles with a higher weight should be displayed first in my search results
  4. Articles with an image should display the title, body text, and image in the web part
  5. Articles without an image should display the title and body text
  6. Articles with a link to a video stored on SharePoint will play the video in the web part
  7. Articles that redirect to other pages will display the title of the article

That's right. We'll have embedded video. We'll get to that part in about two posts.

So what web part will help me achieve these requirements? Content Query could work, but it'd be super customized and the development time spent stretching a CQWP to its mercy would just not be too beneficial. A custom web part would work, but what if I'm not a hardcore SharePoint developer? Looks like it'll have to be the CSWP; it provides the power and easy configuration of a CQWP with the extra razzle dazzle of a custom web part.


In this scenario we'll be creating two site columns and three content types. We don't need to create a lot of columns as the out of the box article page gives us most of the columns we need.

Site Columns

We need a column to give weight to the articles, as well as a column that the web part will use to pull in video URLs. Create the following columns.

  • Sort Order
    • Column Type: Number
    • Column Settings: Required
  • Video URL
    • Column Type: Hyperlink or Picture
      • Not Hyperlink with formatting and constraints for publishing
    • Column Settings: Not Required
    • Format URL as: Hyperlink

Site Content Types

Create the following content types

  • My News
    • Inherits from Article Page. This will not be displayed in the news rotator but will serve as a parent content type for our two news article content types.
  • News Article
    • Inherits from My News
  • Redirect News Article
    • Inherits from My News

On the My News article content type add the Sort Order column. On the News Article content type add the Video URL column. For the Redirect News Article add the existing site column Redirect URL.

Since we'll be using videos stored on SharePoint, create an Asset Library called Videos. Upload a video to the library and copy the video's URL. We'll use this URL for setting the video URL field two steps from now.

At this point, add the content types News Article and Redirect News Article to a Pages library. In the Pages library enable content approval (Library Settings>Versioning Settings). Then enable Item Scheduling (Library Settings>Manage Item Scheduling). Why are we doing this? We need to filter by the OOB Start Date and End Date fields and this is how we expose those fields. For more about this why we're doing this read my previous post about working with the CSWP.

Now that we have our foundation in place, create a few articles of each content type and publish the pages. Try to create one article of each requirement (see Requirements 4 - 7). By doing this we can validate everything is working later on. Be sure you have data in the fields we'll be refining on. In particular:

  • Scheduling Start Date
  • Scheduling End Date
  • Page Content
  • Page Image
  • Sort Order
  • Video URL
  • Redirect URL

It's to your benefit to create custom page layouts and associate those with the content types, but there are plenty of resources out there to assist with that. I'm assuming you're trying to just get through this blog and check out what the CSWP can do. If that's the case then you'll have to do with just editing the item's properties. If that's the case, be sure when you're editing the item for the first time that you set the content type to be the correct type or else you won't see all the cool fields we're editing for our web part. That can be found on the top of the edit form.

At this point you have should four pages with data in the fields the match each one of our requirements. Your Pages library should look something like this.