Language
Creating BI-Centric Mash Ups Tutorial
Introduction
When you introduce dynamic web-based content to your Dashboard, you can create what is commonly called “mash-ups.”
This tutorial shows how to combine reports with web content in JasperServer dashboards, thus creating a BI-centric “mash up.”
Product Versions
This tutorial works with version 3.1 and later.
User
Developer
Objectives
This guide will enable you to:
- Add a report to a dashboard
- Add a logo to a dashboard
- Add an RSS feed to a dashboard
- Understand how to map report parameters to Custom URLs to change the web content
Pre-Requisites
- Some familiarity with JasperServer
- A basic understanding of URL syntax and parameters is helpful for dynamically updating Custom URLs
Adding a Report to a Dashboard
A BI-centric dashboard will generally have at least one report displayed on it. The steps below cover how to add a pre-built demo report to a dashboard.
| Step | Action |
| 1 |
Log in to JasperServer. You can log in as any user. Example: To follow the example, log in as demo/demo. This tutorial covers how to create a variation on this dashboard. |
| 2 | Go to Create > Dashboard to open the Dashboard Designer. |
| 3 |
From the Available Content panel on the left side, click the [+] symbol next to Organization. At the bottom of the list, click the [+] symbols to expand SuperMart Demo, then Sales By Month. Click the blue arrow to the left of Sales By Month Report. The report will appear on the dashboard. |
| 4 |
Click the report on the Dashboard canvas. From the context menu, click Size to Content (in FireFox). If using Microsoft Internet Explorer, manually resize the report. Click the image again and click Hide Scroll Bars. Click Preview and/or Save if you like; you have your first dashboard! |
Adding a Logo to a Dashboard
Adding graphic images such as logos is a common customization.
| Step | Action |
| 1 |
Navigate to a web site that has a logo you want to include. Example: To follow this example, navigate to http://www.jaspersoft.com/style-guide.
|
| 2 | Notice the Jaspersoft logo with a white background below the Jaspersoft Logo Style Guide heading.
Right-click the logo. From the context menu, select Copy Image Location .
|
| 3 | Return to the JasperServer Dashboard designer. From the Available Content panel on the left side, click the [+] symbol to expand Special Content.
|
| 4 | Click the blue arrow to the left of Custom URL, then paste [CTRL-V] (on Windows) the URL you copied from Step 1, above. |
| 5 | The logo now appears. Since this is external content, JasperServer does not know how large it is. Resize it manually and place it in the upper right corner of the dashboard. |
Adding an RSS Feed to a Dashboard
Follow these steps to use a free utility that configures the display of an RSS feed to add to your dashboard.
| Step | Action |
| 1 | To follow the example, go to http://rss-info.com/en_rssinclude-simple.html. Scroll to the bottom of the page and review the form. |
| 2 |
In the form enter the following:
Click Create HTML. |
| 3 | Scroll down to the To integrate this feed . . . box, then select and copy the HTML code displayed to the clipboard. On Windows, you can use: [CTRL-A], then [CTRL-C]. |
| 4 | Open Notepad or another text editor and paste the HTML code that was generated by RSSinclude. |
| 5 |
As you only need the URL, and not the full HTML code that was generated, copy the URL, which appears after src= and between quotes as shown below.
|
| 6 | Return to the JasperServer Dashboard Designer. From the Available Content panel on the left side, click the [+] sign symbol to expand Special Content. |
| 7 | Click the blue arrow to the left of Custom URL, then paste [CTRL-V on Windows] the URL you copied from Step 5, above. |
| 8 |
The RSS feed now appears. Since this is external content, JasperServer does not know how large it is. Resize it manually.
|
Mapping Report Parameters to Web Content
JasperServer “reads” reports when you add them from the JasperServer repository into the Dashboard Designer.
Resources such as input controls (parameter input controls) are automatically detected, which makes it very easy for users to interact with reports. The value of these parameters can also be passed to multiple reports, and even custom URLs.
The example covered in the steps below is admittedly not business-related, but it is functional and one of the easiest examples to reproduce using the demonstration data.
The RSSinfo URL you added to the dashboard above receives several parameters that change the appearance or function of the feed.
“&number=” specifies the number of entries to display from the RSS feed.
In the steps below cover how to map the Start Month value to this parameter.
Important: This technique is only successful if the target URL accepts parameters in the form of ?param=value (and ¶m=value).
Many sites do not accommodate this. Some web applications, such as the Google Maps embed/link to function, allow this syntax, but encrypt/restrict the URL so that it purposely does not allow subsequent updates. For sites that do allow parameter passing, this is a wonderfully simple way to create dynamic, BI-centric mash-ups.
| Step | Action |
| 1 | From the Available Content panel on the left side, click the [+] symbol to expand Special Content, then Single Report Controls. |
| 2 | Click the blue arrow to the left of Start Month. The input control appears at the top of the page. |
| 3 |
|
| 4 | On the Dashboard Designer, click Preview. You may need to switch browser tabs to view the preview. |
| 5 |
Results:
|
What's Next?
You can also explore the following:
- Enter any value from January through December to display from 1 to 12 entries in the RSS feed.
- Try different RSS feeds, You Tube videos, and so on.
- Create an ad hoc query with a filter, create a report, and save it to the repository. Refer to this report in your dashboard, noticing that its filter shows up in the Input Controls.
Written by
This tutorial was written by Kerstin Klein, Professional Services Consultant; and Mary Flynn, Sales Engineer Manager, June 2009.
