SharePoint RSS Reader

A few weeks ago I entered a competition hosted by End User SharePoint where the challenge was to build an RSS reader on SharePoint 2010 in a week. At the end of the week long coding sprint, the judges provide their critic of the solution, which is then turned over to the public to vote for the best implementation and declare the winner.  You can get to a demo of all the solutions as well as the voting results HERE. It was allot of fun and although my solution was not really liked by the public (I got last place), I figure I would still make it available, case others want to see how I implemented certain features.

The Solution:

Here is a demo of what the solution looks like:

The Features:

My solution was implemented all client side with a little help from jQuery, jQuery UI, SPServices and Google’s Feed API at its core.  The design I went with was one that would focus the entire page primarily on browsing and reading the RSS stories. I implemented it with a two-pane approach, where the left side of the page, the first location where eyes focus on, is the reading area , and I used the right pane for navigation.  Here are the features you will find:

  • Always Accessible Navigation
    The navigation pane contains a scrollable list of all the feeds. Clicking an individual feed will display its stories on the left pane.  It also has a button for displaying all stories from all feeds (sorted by story published date) and a Dashboard area that scrolls through the top headlines.  The cool thing here (in my opinion) is that as the user scrolls down through the list of stories in the feed, this pane will switch to static (or sticky) so that it is always accessible to the reader.
  • Infinite Scroll
    When viewing the stories from each feed (or all feeds), only the headlines are displayed; clicking individual headlines will expand the story and display as much information as provided by the feed.  This area of the page (the left pane, or the reading area) also implements an “infinite scroll” approach so only a few feeds are shown at a time, and as the user scrolls down and starts to reach the end of the page, the next page of stories is  loaded. The user is never aware that additional stories are getting loaded in the background; they can just continue to scroll.
  • Single Page Application
    The entire application works in one page.  The Add, Delete or Edit feeds are all handled without having to refresh the page or load a different page.
  • Dashboard and Favorites
    The focused area, upon accessing the reader, is the Dashboard. This area contains a scroll through the top 40 stories (sorted by date) across all of the user’s feeds. It also display an area called Favorites that scrolls through the top 10 story headlines from individual Feeds that one may follow more closely than others.  It is meant to give you a quick view into what matters most to the individual reader.
  • Support for Multiple Users
    The application can support multiple users. It stores feeds and preferences by user ID, thus one installation can support multiple users through out a team or organization.

The only things I have changed from what was done for the competition is 1) the removal of the Twitter API files (they were dragging down user experience performance), 2) support for an anonymous SharePoint configuration, and 3) the addition of “installation” code, which will create the needed Lists on first time access.

Features that never made it due to time (remember: this was a week long effort):

  1. Keep user settings on what stories have been read and which ones have not. Those that were already read, would be slightly faded out or optionally hidden from view.
  2. Export and Import
  3. Higher use of visuals (Site Icons, Story images, etc)
  4. Preserve Context via URL hash
  5. Bookmark individual stories
  6. Keyboard navigation
  7. Share story via email to other SharePoint Users (Pick user (using this plugin), then have a workflow send them email with the story)
  8. JavaScript Bookmarklet to “Add Site Feed to SharePoint Reader”

As you can see, I had big plans for this application.

Installation:

Like I mentioned earlier, this solution is implemented all client side and can quickly be installed on a site by adding a Content Editor webpart to a page.  As implemented, this is a SharePoint 2010 solution and has been tested with full page configuration only.  The following instruction can also be found in README.txt file found in the zip file:

  1. Extract the zip file to a temporary folder
  2. Copy the ‘src’ folder to a Document Library under the desired Site
    (tip: use Window Explorer to quickly achieve this task.)
    Example: http://mySite.com/MyRssReaderSite/Documents/src/
  3. Using the Browser, navigate to the ‘src’ folder that was copied to SharePoint, right click the file ‘main.html’ and choose (depending on your browser) ‘Copy Link Location’ or ‘Copy Shortcut’. The URL will be needed in step 6a below.
  4. Create a new WebPart Page (example: rssReader.aspx) using the following settings:
    1. Type: Web Part Page
    2. Layout Template: Full Page, Vertical
  5. Access the WebPart Page created in the prior step and add a new Content Editor webpart to it.
  6. Click the ‘Content Editor Web Part Menu’ (down arrow at the top-right hand corner of the webpart area) and select ‘Edit Web Part’. From Right panel displayed, set the following:
    1. Under ‘Content Link’ past the URL to the ‘main.html’ file found under the src folder that was copied to the Document Library
    2. Under ‘Appearance’, set ‘Chrome Type’ to ‘None’
  7. Click OK on the Web Part Editor to save your changes
  8. Stop Editing The Web Part Page

Download:

SharePoint RSS Reader

MD5 SUM: 2eba881f9b9147b467b85f09ac3fd57d

–Enjoy!

Advertisements

19 thoughts on “SharePoint RSS Reader

  1. Hey, just a quick question for ya. Could I use this to store weather data from RSS feeds? I’m really having a hard time figuring out how to do that. I want to store the data of snowfall in an area.

    1. Store, I’m not sure… but display the data from the RSS feed should be possible… This solution used google RSS feed reader, so after entering your RSS feed into the app and it shows the content, then you can change the code to also store the values.

  2. Hello Paul,
    Thanks for sharing this great RSS solution! I know this is a very old post so I may not get a response but figured I would try anyway 🙂

    I noticed that you have the RSS feeds different for each user. I think you are using the ‘userToken’ field in the rssFeeds list to specify which user sees which feeds.

    I was wondering if there is a way to make certain feeds show up for all users. I tried leaving the ‘userToken’ field blank but that didn’t work. Is there a way to setup a list of feeds that all users would see when going to the page?

    I appreciate any help anyone can provide!

    1. Hey Paul,
      Sorry I should have tried myself first 🙂
      I looked around in the appMain.js file and commented out the CAML query conditions where you filtered for the userToken (lines 416-419). This seems to have worked since it now displays all the entered RSS feeds for all users. I don’t need users to be able to enter their own so I think this will work. If there is an easy way to enter something in ‘userToken’ to make it appear for everyone, then let me know but otherwise I think I am good. Thanks again for this cool RSS solution

      1. Kevin,
        Yes, if that is the desire – to just have it a a page that everyone can go and see all the feeds, then yes, what you did will work.. The only other thing you may want to do is find the button I have to define new feeds and hide it… since it sounds as if you will be managing the feeds through the tale directly.

        🙂 You forgot to tell me the version of SharePoint.

    2. Hi Kevin…
      You are correct, in that each user has their own private set of feeds… Yes, that token in the list is actually (I think) the user’s ID… I think what you ask for is possible, but I have to look at the code first (have to find it actually 🙂 )… If you are looking/playing with the code: find the function that retrieves the items from the list, then change it to also pull in the additional feeds that want everyone to see… Example: you could populate the list with your “required” feeds and give it a userToken of “all”… then use that value as an additional condition for querying the table.
      Just curious: what version of SharePoint are you trying this on? and is it working? 🙂

      /Paul

      1. Thanks Paul! I am using this in SharePoint 2010 and it works great. I’ve noticed some odd scroll bar issues occasionally but nothing that breaks the functionality, it can just get a little wonky sometimes. The next customization I am going to look into is to have it default to the ‘All’ view instead of the Dashboard/Spotlight view when first going to the page. Not sure if that will be easy but it isn’t necessary. Thanks again for sharing your work and your willingness to help others, it’s much appreciated 🙂

  3. Dear Paul,

    Great solution 🙂 thank you so much

    but i have one question i implemented to my intranet site but each user has full rights can see the rss solution in the editor but my problems comes on each user has read permission cannot see the data and the page is emply … would you please help me to solve this problem since your solution is terrific and i need to implemented on my site

    regards,

  4. Hi Paul, Your solution looks great, though it doesn’t display on IE7.
    I really like the UI Loading message at the beginning, I’m trying to place this on my page while the content loads in the background, though hard to find tutorials.
    You have opened my eyes to what can be done client-side and I would like to see more SharePoint customization’s based on the User’s choices being saved to a list.
    Many thanks for your efforts.

    1. Thanks Brett… Hope you are find it useful in coming up with your own solutions…
      Regarding IE7: One of the first question I got answered when I entered the competition was to clarify which browsers we should target… The answer was “modern” browsers, thus IE7 (and 8) was left behind and I focused on FF, Chrome and IE9… so I don’t doubt that it may not work in IE7…

      Regarding the UI Loading message… Take a look at the appMain.js file and the pt.runApp() method… That entire UI blocking overlay is initiated there… I also have a generic “doShowBusy()” jquery plugin in there that inserts a busy indicator into any UI element, while your code does work in the background.
      All HTML templates and css is in the zip file, so you should be able to grab a few thing and get it to work on your site.

      Generally, the approach for showing a busy indicator, is as follows (in my opinion):

      – Show a “working” or “busy” animated icon to the user as soon as possible… this improves the UX by telling the user that your application is doing something. In my solution, do this as one of the very first steps, before I start retrieving any data from SharePoint.

      – Hide the element on the page that will receive the updated content. Like this, the user should only see the “I’m busy” icon.

      – When the UI is ready for the user to interact with again, hide the animated busy element and then show the updated UI.

      All of this is made much easier with the use of jQuery and its animation methods (fadeIn/fadeOut/show/hide, etc). One last piece of advise: If you are going to use jQuery in future solutions for UI/UX development, I strongly suggest you taking advantage of jQuery’s Deferred objects… They help tremendously in queuing up actions/effects until Deferred process is “ready”.

      Paul.

      1. Thanks for the info Paul, I copied the code from pt.runApp method and the loader didn’t work. Are you able to provide this as a separate JS file, so I can throw it in a CEWP? I’m not a coder, so I can’t decipher how you got it working.
        I’ll also do some more research ad see what I can dig up on page loaders.

        Thanks

      2. Brett,
        Just do a search on google for jQuery overlay plugin and you will find some good already packaged choices that are most likely better than the single purpose approach I took with this project.

  5. Thanks Paul,
    Paul your solution is terrific. And also you helping to others for understanding the sharepoint (what will be possible in sharpeoint….) by sharing your solution.
    Great work Paul.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s