Integrating Atlassian Confluence with WebSphere Portal v8


This article describe an easy way to integrate Atlassian Confluence RSS feed into WebSphere Portal v8

In our website there is a section called Knowledge Base Wiki that shows the most resent entries of our public Knowledge Wiki, a space were we share the best practices and lessons-learned about methods and the technology platforms we use.

The challenge is that our website is build using IBM Websphere Portal and WCM v8 and our Wiki is build with Atlassian Confluence, so in order to show the most recent entries this is what we did:

  • Find a way to get the feed of the most recent post from our Wiki

Helpfully in Confluence is possible to generate a query string to get a RSS feed Using the RSS Feed Builder, as example:

After generate the feed we discover that the list of result included special content that we don't wanted to show, like pages called About the Author, the same that is displayed at the end of this article.

  • Find a way to discriminate the results, to only show entries related to articles/post/etc

The best solution was to only search post with the label "featured" so we added that parameter to our query string:

  • Find a way to not hit Confluence every time the feed needs to be consulted

Now that we where sure that we have the correct feed our teammate Xavier Muniz suggested that we shouldn't hit the server for each petition, instead, he configured a scheduled task that executes periodically that query and generate a XML file, then our code reads that XML file instead to performance a direct petition to Confluence.


XML Example
<feed xmlns="" xmlns:dc="">
<title>Base22 wiki</title>
<link rel="alternate" href=""/>
<subtitle>Confluence Syndication Feed</subtitle>
Web Browsers Support. What browser should I choose for using HTML5?
<link rel="alternate" href=""/>
<category term="featured"/>
<name>Alexzander Arriaga</name>
<summary type="html">
<div class="feed"> <p> Page <b>edited</b> by <a href=" ">Alexzander Arriaga</a> </p> <div style="border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 10px;"> <div class="aui-message hint shadowed information-macro"> <span class="aui-icon icon-hint"></span> <div class="message-content"> <p>This page contains a list of resources and suggestions that could help you to decide which versions of web browsers your project should support if you want to use the amazing features of HTML5.</p> </div> </div> <h2 id="WebBrowsersSupport.WhatbrowsershouldIchooseforusingHTML5?-Whatwehavelearnt">What we have learnt</h2><p>After studying compatibility among most popular browsers and HTML5 + CSS3, I consider when you need to support semantic elements like: section, header, footer, aside, etc. your target should be:</p><ul><li>Internet Explorer 8+ (with some trick to &quot;correct it&quot;)</li><li>Firefox 19.0+</li><li>Chrome 25.0+</li><li>Safari 5.1+</li><li>Opera 12.1+</li><li>iOS Safari 4.0+</li><li>Opera Mini 7.0+</li><li>Android Browser 2.2+</li><li>Blackberry Browser 7.0+</li></ul><p>With this list of browsers we can support almost all new semantic elements HTML5. The next figure show a list of web browsers with full-support for HTML5 semantic elements (you can see the full list in: <a href="" class="external-link" rel="nofollow"></a>). It is true that Internet Explorer 7 and 8 doesn't support semantic elements but there is a list of &quot;tricks&quot; that we could use in order to create a good solution for that (<a href="" class="external-link" rel="nofollow">Mondernizr</a> and <a href="" class="external-link" rel="nofollow">Polyfills</a>).</p><p> </p><p><img class="confluence-embedded-image image-center" src=";modificationDate=1371222491910&amp;api=v2" data-image-src=";modificationDate=1371222491910&amp;api=v2"></p><p style="text-align: center;">Figure 1. HTML5 semantic elements browsers support.</p><h2 id="WebBrowsersSupport.WhatbrowsershouldIchooseforusingHTML5?-RelatedResources">Related Resources</h2><p>Below is a list of websites where more information about this topic can be found.</p><ul><li><a href="" class="external-link" rel="nofollow">Details about HTML5 and CSS support in different web browsers</a> <a href="" class="external-link" rel="nofollow">(</a></li><li><a href="" class="external-link" rel="nofollow">CSS3 Support </a><a href="" class="external-link" rel="nofollow">(</a></li><li><a href="" class="external-link" rel="nofollow">Several useful scripts to support new features</a> <a href="" class="external-link" rel="nofollow">(</a></li><li><a href="" class="external-link" rel="nofollow">HTML5 in mobile browsers</a> <a href="" class="external-link" rel="nofollow">(</a></li><li><a href="" class="external-link" rel="nofollow">HTML5 and CSS3 readiness</a> <a href="" class="external-link" rel="nofollow">(</a></li></ul> </div> <div style="padding: 10px 0;"> <a href="">View Online</a> &middot; <a href="">View Changes Online</a> </div> </div>
<dc:creator>Alexzander Arriaga</dc:creator>
  • Show feed's results

Once we have the correct RSS feed results, and now that is under a XML file, the next step was to show the results in a pretty way, for that we used our river of news, that one of our awesome xWidgets, you can see how it looks on the Knowledge Base Wiki.

In resume the technical steps were:

    • Parse XML data to JSON
      We use the JavaScript library xml2json to convert the XML data into JSON and then we manipulate that JSON data four our purpose

      var jsonData = { item: []};
          url: xml_file_path,
          dataType: "xml",
          async: false,
          success: function(xml) {
              json = $j.xml2json(xml, true);
                  $j.each(json.entry, function(i, item) {
                      //custom code here
    • Render JSON data using river of news xWidget
      Base22 xWidget is set of beautiful, flexible, and easy to use templates for formatting the dynamic content that comes out of portal platforms and content management systems, so once we have the
      JSON data as we needed, we send that JSON data to our template and render it.

      var tplText; // of the river of news
      //Call the template file
      tplText = $j.ajax({
          url: url_of_the_template,
          async: false,
          error: function(res, error) {
      var result = tplText.process(jsonData);

Continuing our philosophy that WCM is not just for content but for everything (including image assets). The JavaScript plugin can be easily integrated in a site based on WCM and Portal.

Hope you find this information useful!!

About the author

Enterprise Web Developer
Joaquin is an Enterprise Web Developer at Base22 with over seven years of experience designing and developing web solutions for enterprise clients. He is a well rounded web developer with skills building interfaces in IBM WebSphere Portal and WCM, IBM Connections, and many others. He is an Oracle Certified Java Developer and a Microsoft Certified Visual Studio Developer. He blogs at