RSS Feed Reader

[graham_c]

Hi,

We have a requirement to display an external RSS feed (BBC News) as a scrollable area on a homepage in ServiceNow and we are having some difficulty trying to implement it.

We've tried following the wiki page (RSS Feed Reader - ServiceNow Wiki) detailing how to do this but one of the steps requires us to acquire a Google API key by visiting this site (Sign Up for the Google Maps API     |     Google Maps APIs     |     Google Developers) but this is no longer available.

I've reached out to HI for them to update the wiki and see if they can now provide us the updated way of doing this, but I was wondering if anyone on here has been able to implement this without a Google API Key?

Any help with this would be fantastic!

Thanks

[ChrisBurks · Accepted solution]

The link provided in the wiki article is pointing to the Google Maps API which is what you need the API key.

You can still use the Google Feed API even though it's deprecated and no longer supported. Google Feed API Developer's Guide     |     Google Feed API     |     Google Developers

I have provided a couple of examples using the Google Feed API and one example that uses just jquery. You can place these scripts in a UI page in the HTML/XML section. And then just follow the rest of the wiki to create the UI widget if desired. Or modify the code to meet your needs.

Two of the scripts I marked up the html with some classes that work with Bootstrap. So depending upon your version of ServiceNow it might need some more loving as far as styling.

Also note that I use the jQuery that is provided OOB ServiceNow (notice the use of $j in the scripts). If you use this you may want to pull in your own jQuery files.

I hope this gives you at least a starting point.

Feed Option 1 - Using Google Feed API in combination with jQuery:

<!-- Depending on ServiceNow version the below might be needed -->

<!--g:requires name="scripts/lib/jquery_includes.js" /-->

<style>

  #rssfeed {

    padding: 10px 20px 10px 20px;

  }

</style>

<g2:scrollable_area height="300px">  

<div id="rssfeed">

</div>

</g2:scrollable_area>

<script>

$j.ajax({

  url     : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0${AMP}num=10${AMP}callback=?${AMP}q=' + encodeURIComponent(FEED_URL),

  dataType   : 'json',

  success     : function(data){

    if (data.responseData.feed ${AMP}${AMP} data.responseData.feed.entries){

      $j.each(data.responseData.feed.entries, function(i, e){

      //available data: link, title, publishedDate, contentSnippet, content, and categories

      feedList.innerHTML += '<div class="panel panel-default"><div class="panel panel-heading"><h3 class="panel-title"><a href="'+ e.link + '" target="_blank">' + e.title + '</a></h3></div><div class="panel-body"><p> ' + e.publishedDate + '</p>' + e.contentSnippet + '</div></div>';

      });

    }

  }

});

</script>

Feed Option 2 - Using Angularjs with specific version of Google Feed API:

<!-- Use below line if on Fuji. Otherwise you would need to bring in your angularjs script -->

<g:requires name="scripts/angular/angular.min.js" />

<!-- Specific Google Feed API -->

<script> src="//www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22feeds%22%2C%22version%22%3A%2..."></script>

<!-- Angularjs Feed plugin: http://siddii.github.io/angular-feeds/app -->

<!-- You may opt to pull this file into ServiceNow as well as modify it to your needs -->

<script> src="//siddii.github.io/angular-feeds/app/angular-feeds/angular-feeds.js" ></script>

<div ng-app="sncFeedApp">

  <g2:scrollable_area>

<!-- If summary:true   may take off images and extra stuff if it exists. Count can be adjust for the max amount of items -->

<feed summary="true" url="http://stackoverflow.com/feeds/tag?tagnames=angularjs${AMP}sort=newest" count="5"/>

  </g2:scrollable_area>

  </div>

  <script>

    var app = angular.module('sncFeedApp', ['feeds']);

  </script>

Feed Option 3 - Just using jQuery:

<!-- Disadvantage for this option is that you'll run into problems if the RSS feed doesn't support https -->

<!-- Depending on ServiceNow version the below might be needed -->

<!--g:requires name="scripts/lib/jquery_includes.js" /→

<style>

  #rssfeed {

    padding: 10px 20px 10px 20px;

  }

</style>

<g2:scrollable_area height="300px">  

<div id="rssfeed">

</div>

</g2:scrollable_area>

<script>

    //var FEED_URL = "/incident_list.do?RSS${AMP}sysparm_query=active=true";

  var FEED_URL = "http://feeds.bbci.co.uk/news/rss.xml?edition=us";

  var feedList = document.getElementById('rssfeed');

  $j.get(FEED_URL, function (data) {

        $j(data).find("item").each(function () { // or "item" or whatever suits your feed

          var el = $j(this);

          feedList.innerHTML += '<div class="panel panel-default"><div class="panel panel-heading"><h3 class="panel-title">' + el.find("title").text() + '</h3></div><div class="panel-body"><p>author         : ' + el.find("author").text() + '</p><p>description: ' + el.find("description").text() + '</p></div></div>';

        });

      });

</script>

[graham_c]

Hi Chris,

This is exactly what we needed! I've gone for Option 2 which works really well on our instance!

Thanks for the help, made my day!

[davidself3]

Thank you for sharing Chris!

[ChrisBurks]

Glad I could help.