|Number of votes:||2|
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.
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:
- <chart position="1">
- <chart position="2">
<album>If I Were A Boy</album>
- <chart position="3">
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.
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:
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:
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!
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:
And repeat for every page EPiServer CMS is asking for. Yes, there should be 40 of them.
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:
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:
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…).
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).
Sit back, relax and dig out your soul. Just make sure you have:
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.
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.
For demo only, rather slow on first hit and no error handling whatsoever.
Allan Thræn’s Northwind Product Page Provider:
The excellent blog The Old New Thing has written about Guids:
Johan Björnfots blog post about caching in Page Providers:
Paul West´s article about page provider: