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

  • Article

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.

Prerequisites

Before completing the tasks presented in this walkthrough, complete the tasks presented in the Walkthrough for SharePoint Server 2010 (ECM): Creating a Video Site, Walkthrough for SharePoint Server 2010 (ECM): Customizing the Video Upload Experience for a Video Sharing Site, and Walkthrough for SharePoint Server 2010 (ECM): Creating a Customized Home Page and Content By Query Web Part XSL for a Video Sharing Site topics.

Mapping Videos to Channels

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.

Exposing RSS Feeds for Channels

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.

Portable Music URL Formats

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.

ECMAScript Function Reference

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>

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

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

    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

    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

    Setting

    Value

    Notes

    Query

    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.

    Presentation

    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

    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.

See Also

Tasks

How to: Configure the MediaWebPart Object Using JavaScript (ECM)

Concepts

Walkthroughs for SharePoint Server 2010 (ECM): Creating and Customizing a Video Sharing Site

Introducing Media Content Types in SharePoint Server 2010 (ECM)

Rich Media Programming Model in SharePoint Server 2010 (ECM)