EPiServer Loves UK Top 40 (Or Yet Another Article About Page Providers)

No alarms and no surprises. We’re at EPiServer are big fans of the The UK Top 40 Singles Chart. Every Friday morning there is magic in the air when the Top 10 is about to be revealed. How many spots have Boyzone climbed since last week? Have Oasis finally entered the charts? Is Pink still Number One?

Luckily for us we now have the UK Top 40 chart on our Intranet thanks to the new page provider technology in EPiServer CMS R2. This makes it possible for us to work with each entry in the chart just like any other EPiServer CMS page. We also have access to the YouTube video and comments and the latest tweets from Twitter about the artists. Last but not least, we can comment on the YouTube video using the one and only EPiServer CMS edit interface.

Enough talk already..... this is what it looks like from three different perspectives. 

How Does it Work?

After seeing the screenshots I guess you just fired up Visual Studio and have written the first buggy lines of code in your own page provider. But please don't get carried away! Slow down and continue reading to get some useful instructions. The current UK Top 40 chart is available as an Xml file at http://server-2.webcoding.co.uk/top40.xml and is structured like this:

- <top-forty>
- <chart position="1">
  <lastweek />
  <weeks />
  <image>http://www.bbc.co.uk/radio1/media/images/artists  /takethat/081128_cd_greatestday_70.jpg</image>
  <artist>Take That</artist>
  <album>Greatest Day</album>
  <uri>http://www.takethat.com/</uri>
  </chart>
- <chart position="2">
  <lastweek />
  <weeks />
  <image>http://www.bbc.co.uk/radio1/media/images/artists  /beyonce/081107_cd_ifiwere_70.jpg</image>
  <artist>Beyonce</artist>
  <album>If I Were A Boy</album>
  <uri>http://www.beyonceonline.com</uri>
  </chart>
- <chart position="3">
  <lastweek />
  <weeks />

The page provider is actually very basic and uses Linq to Xml to make parsing of Xml a breeze.  If you have been working with page providers before, you know that you will have to implement at least four methods from the PageProviderBase base class to get it to work. I have listed them below with a few short comments on what we do in each of these methods. 

GetChildrenReferences

This is where we should return each chart entry and tell EPiServer CMS that they exist as page references. When EPiServer CMS asks for the children to the entry point, we fetch the top40 Xml and create a top40 item object for each entry in the list. The top40 item class consists of the following properties:

• ID - The position of the entry is used as page ID
• Artist
• Album

Wasn't that easy using Linq? When this list has been constructed, the fun begins. By searching for the artist and album using the YouTube web service, we get some additional information about each entry:

• Url to YouTube video
• YouTube Comments

Lastly we make a query to Twitter to get the latest tweets containing the artist name. Twitter returns Atom data in Xml which is easily parsed using, once again, Linq.
The constructed top40 list is stored in a property inside the page provider instance for later retrieval by the GetLocalPageData method. We finally return a collection of page references back to EPiServer CMS. These page references are constructed using the ID field from each item in the top40 list. Easy peasy!

GetLocalPageData

Remember the collection of page references we gave EPiServer CMS in GetChildrenReferences? EPiServer CMS will call the GetLocalPageData method for every reference in this collection. What we have to do now is pretty much:

• Oh, you are asking for the page representing position 1.
• Find Oasis (or whatever artist that is #1) in our top40 list we constructed earlier.
• Create a new page object and tie this to the top40 page type.
• Set all the EPiServer properties on this page type:
  - PageName  => Artist + Album
  - MainBody => YouTube Comments
  - Etc
• Set the page status to Published.

And repeat for every page EPiServer CMS is asking for. Yes, there should be 40 of them. 

ResolveLocalPage x 2

EPiServer uses Guids to make sure all pages it references are unique. This is a good thing, but it also means that we will need to make sure our page provider talks the Guid language:

"8E880832-6461-11DD-95DF-4DD156D89593"

As you can see it is not as simple as Chinese. Our page provider needs to be able to create a Guid for each top40 item as well as create a top40 item from a given Guid. It must also be able to tell if a given Guid is referring to a top40 item within this provider. In this example we are using the same technique as Allan Thræn in his Northwind Product Page Provider. That is:

• Create a base Guid.
• When creating a Guid for a top40 item, use the base Guid, but replace the first four bytes with the ID of the top40 item.
• When generating a top40 item from a Guid, convert the first four bytes to the ID.
• When checking if a Guid belong to the top40 list, compare all bytes except the first four against the base Guid.

Beware that a Guid usually is generated from a date, computer identifier, etc. This means that replacing some of the bytes in a Guid can turn it to a NsuGuid (Not So Unique…).

Save

But, did I not just say that there were only four methods in the base class that needed to be implemented? Well, that is if you want the simplest kind of page provider. We want more advanced stuff. That is why we have also implemented the Save method to be able to do cool things like saving comments to YouTube.

In the Save method, just check if the submitted page data has the Comments property set. If so, the YouTube web service is used to post the comment to the video on YouTube. When the page is saved, the cache will be cleared which in turn trigger EPiServer CMS to once again call GetChildrenReferences and GetLocalPageData. We are back in the loop (and it is time to move on).

Page Provider Created. Now What?

Sit back, relax and dig out your soul. Just make sure you have:

• Registered UKTop40 in web.config.
  - Tell EPiServer CMS the root page for the top40 chart (entry point attribute). This must be a page without subpages.
• Create the template (aspx file) that should render the contents of your top40 page type.

Also try copying the top40 page container to another page in Edit mode. This will copy all top40 pages to the ordinary EPiServer CMS database. You can then remove and edit any content on these pages since all data now resides in the EPiServer CMS database instead. You can also rearrange the list if you do not agree with the Beckhams & co.

So what is the next step concerning the page provider? The next step is to extend it to keep all top40 lists ever released using EPiServer CMS versioning and have the Swedish language version reflect Trackslistan. Good times indeed!

By the way, did you know you also can control the way caching is handled by your provider? See the Read More section below for more information.

Download the example code used in the article.

The code consists of

A page provider to EPiServer CMS which fetch the uk top 40 list from an Xml and then finds information regarding each entry from youtube and twitter. When editing and saving the page, only the "comment" property is saved as a comment on YouTube.

Instructions

1. UKTop40PageProvider.zip
2. Include the provider folder in your project.
3. Include the templates folder in your project.
4. Add references to the YouTube dll:s in the bin folder.
5. Make sure you're targeting .Net 3.5 (project properties) since the page provider uses Linq.
6. Ctrl + Shift + B.
7. Add <asp:ContentPlaceHolder runat="server" ID="HeaderRegion"> inside the header tag in the masterpage.
8. For configuration, see config/web.config.
9. Import the page type file in pagetypes folder into EPiServer CMS.
10. Have fun.

Known problems

For demo only, rather slow on first hit and no error handling whatsoever.

Read More

Allan Thræn’s Northwind Product Page Provider:
http://labs.episerver.com/en/Blogs/Allan/Dates/112230/8/Building-your-own-Page-Provider-Northwind/
The excellent blog The Old New Thing has written about Guids:
http://blogs.msdn.com/oldnewthing/archive/2008/06/27/8659071.aspx
Johan Björnfots blog post about caching in Page Providers:
http://labs.episerver.com/en/Blogs/Johan-Bjornfot/Dates/2008/10/PageProvider---Control-the-page-cache/
Paul West´s article about page provider:
http://world.episerver.com/en/Articles/Items/Introducing-Page-Providers/

Comments