Walkthrough for SharePoint Server 2010 (ECM): Creating and Customizing a Channel Page for a Video Sharing Site

SharePoint 2010

Last modified: April 19, 2010

Applies to: SharePoint Server 2010

In this article
Mapping Videos to Channels
Exposing RSS Feeds for Channels
Portable Music URL Formats
ECMAScript Function Reference

This topic is part five of a five-part series of walkthroughs that teach you how to create and customize a video sharing site.

One reason for creating a social media site is to share aggregated content that is grouped into channels—related items that users can browse and subscribe to as a unit. Given the content structure that you created in Walkthrough for SharePoint Server 2010 (ECM): Creating a Video Site, you have already set up Microsoft SharePoint Server 2010 with the pieces required for channels: a Page that can be created by any user, the Channel lookup column that you created when you added the video content type, and videos associated with the channel by way of the Channel lookup column.

To create a channel:

  1. Create a Page on the site that uses a layout that you will create, called a Channel Page layout.

  2. Create a page layout for the channel page, and use it as the default page for channels.

  3. Assign a video to the channel by updating its properties.

The new page layout defines field controls and Web part customizations that enable three properties of a channel page: its title, information about the channel, and a customized ContentByQueryWebPart object that displays the videos that were added most recently.

The part of the query that displays the latest videos uses the Content By Query Web Part (CQWP) to ensure that it displays only the latest videos from the selected channel. The CQWP replaces the [PageFieldValue:Title] token with the actual value of the Title field for the page (which is what the Channel field looks up to). All the other settings for the Latest Videos CQWP should match the settings of the CQWP on the channel page.

Adding the CQWP to the page layout ensures that no individual user can edit their content query, but CQWPs that are added to page layouts outside of Web part zones cannot expose RSS feeds. You can create a new page that exposes RSS feeds for each channel: users do not have edit rights to the new page, but they can view it.

After you create the channel page, add the CQWP to its Web part zone (which exposes its own RSS feed), and configure the Web Part to target specific query strings, the CQWP is set up to use the parameters of the URL of each RSS feed to access the channel page. By adding ECMAScript (JavaScript, JScript) links to the channel page, you create RSS "buttons" that, when clicked, construct a URL that links to a second CQWP. The second CQWP shows the same videos on the channel page. By creating and configuring two CQWPs, you enable users to get what appear to be RSS feeds delivered directly to their channel page.

Because you can replace the Channel parameter with the Title of the current channel page, you can add JavaScript functions to a target page. This enables you to target a Web page with query strings.

You can customize the URL format so that SharePoint Server 2010 starts the iTunes application or the Zune application. When you launch a channel page for a portable music service, the page is added to the music service as a podcast for the user.

The JavaScript functions that are shown as examples here construct the relevant iTunes or Zune URL and navigate the user to its portable music service.

<a onclick="javascript:navigateToiTunesFeed(); return false;">
<img width="32" height="32" src="../../ContosoImages/iTunesPodcast.jpg" style="vertical-align: middle"/>

<a onclick="javascript:navigateToZuneFeed(); return false;">
<img width="32" height="32" src="../../ContosoImages/zunePodcast.jpg" style="vertical-align: middle"/>

Create a New Page Layout for Channel Pages

  1. Start SharePoint Designer 2010.

  2. In the Site Objects list, click Page Layouts, and then click New Page Layout.

  3. In a Web browser, navigate to your SharePoint site, and then click Page Layout and Site Templates.

  4. Configure the New Page Default Settings to specify your new page layout as the default.

    Note Note

    Setting the new page layout as the default enables users to create channel pages by using the New Page command on the Site Actions menu.

  5. Add a Page Title field control and a Channel Information field control to the page layout.

  6. Modify a CQWP so that it displays only videos that are tagged with the appropriate channel setting.

To add a hidden Content By Query Web Part to a new page for RSS feeds

  1. Navigate to the All Site Content page for your site, click Create, and then click Web Part Page to create a page in the site.

    Tip Tip

    You can use any name, layout template, and location on this new page. The page is used for a hidden CQWP operation; no user will see it directly.

  2. Add to the page a CQWP (with the settings listed in Table 1) that targets the Videos library.

    Table 1. Settings for the hidden CQWP

    Web Part Section





    Additional Filters

    "Channels" contains [PageQueryString:Channel]

    The value of the PageQueryString property must be the exact name of the URL parameter that you set in the Test and Record the RSS URL of the Second Content By Query Web Part section of this topic.


    Enable feed for this Web part

    Enabling the feed ensures that the CQWP displays RSS feeds.

Test and Record the RSS URL of the CQWP

  1. Manually add to the URL for the current page a parameter for a channel page that you know contains one or more videos. For example, if the current page URL is http://contoso/Video/ChannelRSSPage.aspx, and the name of the channel that you want to add is Contoso Test Channel, create the following URL: http://contoso/Video/ChannelRSSPage.aspx?Channel=ContosoTestChannel.

  2. After the Web Part is showing expected results, click the RSS icon on the lower-right corner of the Web Part to navigate to the URL of the RSS feed for the Web Part.

    Tip Tip

    For example, using the Contoso Test Channel, the URL looks something like: http://contoso/_layouts/feed.aspx?xsl=1&web=%2F&page=7481c1f3-3e96-4dd7-8a41-744e82871d63&wp=b21f4d9a-c70f-49dc-9699-b5a134b839xa&pageurl=Documents%2FChannelRSSPage%2Easpx&Channel=ContosoTestChannel .

  3. Because your page includes the JavaScript functions, you can add a button that links to Zune or iTunes by using the markup language snippets in the ECMAScript Function Reference section.