Friday, March 6, 2015

A better way to implement RSS feeds in SharePoint 2013/Online

image
I’m doing an assessment for migrating a 2010 solution to 2013, and one of the custom solutions installed was an RSS reader web part. We all know the RSS web part which came with 2010 is a bit limited, and it’s still there in 2013. So if you don’t have any requirements to do authentication on the RSS and you’re in love with XSLT, the web part is there for you my friend!

Another options is to use the Content Search Web Part. Yes CSWP indeed! SharePoint 2013/Online supports the creation of Result Sources using the OpenSearch 1.0/1.1 protocol. And the beauty of this protocol is that the response is in Atom or RSS format.
Below is a screenshot of setting up a result source to retrieve the latest news from CNN. I have also removed the query template as I won’t be doing a query – I just want the feed.

image

If you’re in need of authentication, then pick your poison at the bottom and you should be good to go.

The next part is using this in a CSWP.

image

Using the Picture on left, 3 lines on right template gives this view by default, which is not very pretty.

image

The only valuable data directly on the item is the Title property, but inside ctx.CurrentItem.OpenSearchSingleResultXML you will find what you’re looking for.

<item>
  <title>ISIS bulldozes cultural treasures of Nimrud</title>
  <guid>http://edition.cnn.com/2015/03/05/world/iraq-isis-destroys-ancient-city-nimrud/index.html</guid>
  <link>http://edition.cnn.com/2015/03/05/world/iraq-isis-destroys-ancient-city-nimrud/index.html?eref=edition</link>
  <description>Nimrud, the city of the Assyrian kingdom, has been destroyed by ISIS militants, Iraq's state-run media reports. </description>
  <pubDate>Fri, 06 Mar 2015 05:54:39 EST</pubDate>
  <media:thumbnail height="51" width="90" url="http://i2.cdn.turner.com/cnn/dam/assets/141028102122-middle-east-heritage-nimrud-top-tease.jpg" xmlns:media="http://search.yahoo.com/mrss/" />
  <media:content height="51" width="90" medium="image" type="image/jpeg" url="http://i2.cdn.turner.com/cnn/dam/assets/141028102122-middle-east-heritage-nimrud-top-tease.jpg" xmlns:media="http://search.yahoo.com/mrss/" />
</item>


The data might vary depending on your RSS feed, but I’ve created a sample RSS display template available on Github you can use for your modification. It will show the date and descriptions as line 2 and 3, and also pull out a thumbnail image.


image

You might also want to turn on caching on the CSWP – but not sure how it affects OpenSearch result sources.

image

24 comments:

  1. I found it when I was looking for a different sort of information but I am very interested in the article, It is nice to read such kind of good posts.Its a very nice tech blog. I like your work keep it up!

    ReplyDelete
  2. I'm trying to do this from our intranet by pulling in the RSS feed from our public website RSS feed (which is also on SharePoint). I figure this should work since the URL is publicly available. But I can't get this to work.

    Do I need to add anything to a content source? And will this work with typical SharePoint RSS feeds that have query strings in them?

    ReplyDelete
    Replies
    1. I haven't tested against sharepoint, and is it an anonymous endpoint? You could try to increase ULS logging to get more information.

      Delete
  3. Hi Mikael
    I tried following the exact steps that you have and same CNN feeds on a lab environment but I am having an issue. I managed to get all the feeds to display same way as you have and using your display template. However if I click one of the feeds it doesn't work and the link points to a local page and then I get the message " The resource cannot be found".
    Is there a way to fix this?
    many thanks

    ReplyDelete
    Replies
    1. The RSS feed works, but seems my template fails for some reason. If I add a new CSWP and choose the RSS feed as the source I get results - so should be a matter of creating a display template which works on the data.

      Delete
    2. Seems to fail on the image line doc.getElementsByTagName("media:thumbnail") - so I need to fix that somehow.

      Delete
    3. Template has been updated on github.

      Delete
  4. Mikael - Really a good article. Did you figure out if the group Caching works for the opensource result?

    ReplyDelete
  5. Hi great post! But I receive the error message: Cannot read property 'attributes' of undefined (CoreRender: ~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_RSSPicture3Lines.js)

    ReplyDelete
    Replies
    1. 1. You need to upload the display template to the right folder
      2. If you upload the .html version, publishing must be enabled for it to be converted to a .js file

      Delete
    2. Thanks for your fast reply Publishing is enabled
      I uploaded the file in the Display Templates/Content Web Parts. Now still this message

      Cannot read property 'attributes' of undefined (CoreRender: ~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/Item_RSSPicture3Lines.js)

      The files are both there HTML and .js

      Delete
    3. You need to edit: var pictureURL = doc.getElementsByTagName("mediathumbnail")[0].attributes["url"].value;

      and check that it has a mediathubnail - or change to something else.

      Delete
  6. Hello Mikael,

    where do I have to upload the Item_RSSPicture3Lines.html - File?

    Which folder?

    Kind regards,

    Klaus

    PS: Perfect article, thank you for your good work!

    ReplyDelete
    Replies
    1. Hi,
      Somewhere below "Master Page Gallery/Display Templates" is good. Create your own folder for example to store your own files.

      Delete
  7. Hello,

    I have this feed:
    https://fh-joanneum.at/feed/

    But in don't see any description with your "RSS Picture on left, 3 lines on right.html"?

    var line2 = Srch.U.getSingleHHXMLNodeValue(doc,"description");

    What is the problem?

    Kind regards,

    Klaus

    ReplyDelete
    Replies
    1. Not sure. You could set a breakpoint in the display template using browser dev tools, and check what values the xml actually has. Your feed seem to have the "description" field, so should in theory work.

      Delete
  8. Hello,

    is still can´t get the Pictures of the rss feed. I edited "URL" to "img src" but withour any results.

    <img src="http://www.spiegel.de/images/image-1083564-thumbsmall-gftp.jpg"

    How can i fix this issue?

    regards
    Adam

    ReplyDelete
    Replies
    1. Hi,
      You need to look at the RSS data, and adapt the template to make it fit most likely.

      Delete
  9. Hi Mikael,

    I tried this and running into a threshold error:

    Response length exceeded maximum length: [url=https://blogs.msdn.microsoft.com/sqlserverstorageengine/feed/], [MaximumResponseLength=64], [ReceivedResponseLength=69129 bytes]
    Correlation ID: 8201ce9d-10b1-0000-4f58-87124a51aec1

    Any suggestion?

    ReplyDelete
    Replies
    1. This a WCF error and seems the response returned is too large. Can you add a parameter to limit how many posts you are getting back?

      Delete
    2. I dont think RSS urls supports parameters.. :(

      Delete
    3. That's highly dependent on the RSS provider.

      Delete