Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Extend BIRT Dashboards with Disqus Discussion Boards [Code]

DZone's Guide to

Extend BIRT Dashboards with Disqus Discussion Boards [Code]

· Java Zone
Free Resource

Just released, a free O’Reilly book on Reactive Microsystems: The Evolution of Microservices at Scale. Brought to you in partnership with Lightbend.

Originally Written by Bill Clark

Fourth in a series.

DisqusHTMLGadget

Do you want to enable your users to add comments and annotations to a BIRT Dashboard, but don’t want to code a discussion board from scratch yourself?  This post will walk you through how to embed a Disqus discussion board – a popular, familiar format your users see every day on the web – in a BIRT Dashboard, as shown above.

This post is also a case study for how to embed a web service into a dashboard.  You can use this technique to embed virtually anything, even a Jaspersoft or Tableau report!

The steps for creating a Disqus BIRT Gadget are:

  • Create an account at disqus.com and add your website using the “Add Disqus to Your Site” button.
  • We will install the Disqus “Universal Code”.  Read the directions on the Disqus website for details.
  • Make your BIRT iHub installation a “trusted site” for Disqus. If you do not make iHub a trusted site, Disqus will return an error message.
  • Click on the setup instructions for the Universal Code platform on the Disqus web site. Copy the HTML code to your clipboard.
  • Create a new file and paste the HTML code into the new file. We recommend giving your file a *.html or *.htm extension and leaving it in the Dashboards folder of your BIRT application.
  • Above the line that creates the disqus_shortname variable, create a variable named disqus_url and set its value to the URL of your iHub website. We recommend using a custom name that is linked to the dashboard name so you know where the discussion board is embedded when you view logs on the Disqus admin site.  The finished embed code should look like this:
<div id="disqus_thread"></div>

<script type="text/javascript">

/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */

var disqus_url = 'http:// <changeme>/iportal/gadgetTest';

var disqus_shortname = '<changeme>'; // required: replace example with your forum shortname

 

/* * * DON'T EDIT BELOW THIS LINE * * */

(function() {

var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;

dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);

})();

</script>

<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  • Edit a BIRT Dashboard from BIRT Designer Pro or BIRT iHub.
  • Insert a HTML Gadget into the dashboard. The menu path is Insert/Extra…/HTML.
  • Decide whether you want to want to embed the code via URL or HTML. The Gadget works the same regardless of how you decide to embed the code, so the option  that you chose is really personal preference. This screenshot shows the URL option:

DisqusURLGadgetSettings

  • To use a URL, save the Disqus code in an HTML document, upload the HTML document to your BIRT iHub server, and click on the HTML file. (The Disqus board should appear as in the screenshot below.) Copy and paste the URL into the URL box, as seen above. It will appear as shown below.

DisqusURLAddressSettings


DisqusHTMLGadgetSettings

  • To use HTML, copy and paste the code into the HTML box as shown in the screenshot immediately above.
  • Click OK after editing the items in the General tab. The General tab is also where you set things like the Gadget title and text alignment.
  • The Disqus discussion board should appear in the Gadget. You are done!
  • There are other Disqus settings that you can choose from. Read about them on the Disqus website.

Please visit the following BIRT Developer Forum thread at http://developer.actuate.com/be/documentation/ihub3-dev/adg/adg22/index.html#page/ADG/DisplayingFiles.1.6.html#ww142250 for more information about displaying files on a BIRT Dashboard.

Troubleshooting

If your embed code does not work in the Gadget in the Dashboard, try debugging in Chrome.

The default encoded URL in the HTML Gadget is can be really long and may break your web service.  BIRT iHub also returns a long, convoluted URL to web services, so you may have to set the URL manually as we did for Disqus in the Javascript disqus_URL variable.

Conclusion

On a high level, this blog post shows how to extend BIRT by embedding a web service in an HTML Gadget, either using a URL or by pasting code directly into the HTML pane.  There are existing third-party web services for virtually any type of functionality that you would want to add to a BIRT Dashboard, and any of them can be added just as easily as Disqus.  The HTML Gadget capability in BIRT iHub renders any valid HTML5 code, including the standard code for embedding SaaS applications.  As we noted earlier, this means that you can embed virtually anything as a web service in a BIRT Dashboard – including a Jaspersoft or Tableau report!

The next Extension blog entry will demonstrate how to use JSAPI to search multiple columns in a table at the same time. Please Subscribe (at left) to be notified when it is posted, and let us know in the comments what other extensions and functionality you’d like to see.

Previous Entries in the BIRT Extension Series

Extend BIRT with Font Symbols

Extend BIRT Interactive Viewer with a Pop-up Dialog Box

Extend BIRT Interactive Viewer with Row Highlighting

Strategies and techniques for building scalable and resilient microservices to refactor a monolithic application step-by-step, a free O'Reilly book. Brought to you in partnership with Lightbend.

Topics:

Published at DZone with permission of Michael Singer, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}