Originally Written by Bill Clark
Fourth in a series.
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:
- 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:
- 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.
- 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.
If your embed code does not work in the Gadget in the Dashboard, try debugging in Chrome.
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