Tutorial 16: Integrating JasperReports into Formspider using htmlRenderer component (Revised 04/13/2012)

This tutorial, explains how to use the htmlRenderer component to display or download reports created by JasperReports.

1- Creating Reports using Jaspersoft iReport Designer

Create a report that shows data from Human Resources (HR) schema tables. Open iReport Designer and create a report named “employeesOfDepartments” using this jrxml file. This report queries “Employees” and “Departments” tables and displays the employees in the specified department.

Parameter initialization:

 <parameter name="dep_id" class="java.lang.String">
    <defaultValueExpression><![CDATA[]]></defaultValueExpression>
 </parameter>

Query string:

select e.employee_id, e.first_name, e.last_name, e.phone_number,
         e.salary, d.department_name, m.first_name as manager_name,
         m.last_name as manager_surname
  from employees e, departments d, employees m
 where e.department_id = d.department_id
   and d.manager_id = m.employee_id
   and d.department_id = to_number($P{dep_id})

Compile the report and produce the jasper file. You can download the compiled file from the link below:

employeesOfDepartments.jasper

Please note that, this file is compiled with iReport Designer 4.6.0 and Formspider installation has suitable 4.6.0 libraries to run report correctly. If you are using different version of iReport Designer, please change libraries under Formspider installation.

Create a “reports” folder under “C:\” and put the jasper files under it. You may change the path of this folder by editing the web.xml file in your Tomcat installation.

2- Setting Oracle Connection Parameters

Formspider has a built-in Jasper reports servlet. You just need to set the Oracle connection parameters and the path of the .jasper files. Open the web.xml file in “\webapps\formspider\WEB-INF” folder inside the Tomcat folder. Edit the following connection parameters.

<context-param>
   <param-name>databaseURL</param-name>
   <param-value>jdbc:oracle:thin:@YOUR_IP:YOUR_PORT:YOUR_SID</param-value>
</context-param>
<context-param>
   <param-name>databaseUsername</param-name>
   <param-value>YOUR_USERNAME</param-value>
</context-param>
<context-param>
   <param-name>databasePassword</param-name>
   <param-value>YOUR_PASSWORD</param-value>
</context-param>
<context-param>
   <param-name>fileDirectory</param-name>
   <param-value>c:\reports\</param-value>
</context-param>

Call the URL “[ApplicationServerURL]/formspider/jasperreportsservlet” from a web browser. The “Welcome.. Please select a report and press run.” message shows up.

See the actual reports by providing parameters to the page, such as:
“?rep_name=employeesOfDepartments&destination=display&dep_id=20″

In this example above, “rep_name” parameter specifies the jasper file/report to be used. The “destionation” parameter specifies whether report file is going to be displayed or downloaded. And the “dep_id” is the parameter that is used in the report.

3- Creating a Formspider application that displays reports inside an htmlRenderer component

This sections explains creating a simple Formspider application to show reports inside an htmlRenderer component.

Open Formspider IDE and create an application named “JasperReports”. Set “HR” as the datasource schema name.

3a- Creating Datasources

Create a new datasource definition. Select “Table” from “Based On” section and “Departments” table from the combobox.

Create another datasource definition which is based on a “Query”. Enter “destination” as a name and select “Query” radio button from the “Based On” section. Select “Query” node from the tree and type the following query;

select 'display' as value_cd from dual
union all
select 'download' as value_cd from dual

3b- Creating the GUI of the application

Expand the “Containers” accordion panel. Expand the “Windows” node and the “Mainframe” node from the navigation tree. Double-click the “mainFrame” node and edit the XML so that it looks like the following:

<mainframe title="Jasper Reports Demo" width="1280" height="800" maximizeOnStartUp="Y">
  <borderLayout>
    <cell docking="Center">
      <include panelName="mainPanel"/>
    </cell>
  </borderLayout>
</mainframe>

Note that we set maximizeOnStartUp attribute as “Y” and title as “Jasper Reports Demo”.

Select the “Panels” node and click the “+” button from the toolbar of the accordion panel to create a new panel. Enter “menuPanel” as panel name and click “OK”. Edit the panel XML so that it looks like the following:

<panel>
  <xyLayout>
    <cell x="5" y="5" width="80">
      <textLabel label="Department:"/>
    </cell>
    <cell x="100" y="5" width="150">
      <comboBox name="dep" displayColumn="DEPARTMENT_NAME" valueColumn="DEPARTMENT_ID" listDataSource="DEPARTMENTS1"/>
    </cell>
    <cell x="260" y="5" width="80">
      <textLabel label="Destination:"/>
    </cell>
    <cell x="355" y="5" width="150">
      <comboBox name="destination" displayColumn="VALUE_CD" valueColumn="VALUE_CD" listDataSource="destination1" value="display"/>
    </cell>
    <cell x="520" y="5" width="120">
      <button name="report" label="Run Report">
      </button>
    </cell>
  </xyLayout>
</panel>

Next, open and edit the XML of the “mainPanel”:

<panel>
 <borderLayout>
    <cell docking="North" height="30">
     <include panelName="menuPanel"/>
    </cell>
    <cell docking="Center">
     <htmlRenderer name="reportRenderer"/>
    </cell>
 </borderLayout>
</panel>

Reports are shown inside the htmlRenderer named “reportRenderer” and cover most of the screen.

3c- Creating the Database Procedures

Create a package named “JASPERREPORTS”:

Package Spec:

package JASPERREPORTS is
 procedure createReport;
end;

Package Body:

package body JASPERREPORTS
is

 procedure createReport  is
    dep_id    number;
    context_tx varchar2(255);
    destination_cd varchar2(255);
 begin
    -- Please, modify this context to point your ReportServlet URL
    context_tx := '[ApplicationServerURL]/formspider/jasperreportsservlet';

    dep_id := api_component.getvaluenr('menuPanel.dep');
    destination_cd := api_component.getvaluetx('menuPanel.destination');
    api_component.setURL('mainPanel.reportRenderer', context_tx || '?rep_name=employeesOfDepartments&destination='||destination_cd||'&dep_id='||dep_id);
 end;
end;

You may need to update “context_tx” variable in this package with appropriate values in your environment.

3d- Creating Actions and attaching to the Components

Create an action named “createReport” with jasperreports.createReport as procedure name and tick “Allow Popups” check box for avoiding any popup window which can be opened during download of report pdf.

Open the XML of the “menuPanel” and add a buttonPress event to the button named “report”:

<button name="report" label="Run Report">
 <events>
    <buttonPress action="createReport"/>
 </events>
</button>

Running reports

Please click on the following image to see the online reports application:

JasperReports successfully integrated into Formspider Application

JasperReports successfully integrated into Formspider Application

  • Tihomir

    I can’t run this application. Exctualy I can run it but when I want to display or download the report I got error in browser: http://formspideronline.com/formspider/jasperreportsservlet?rep_name=employeesOfDepartments&destination=download&dep_id=20

    I’ve placed report under C:. I’m usin online formspider on cloud.

    • http://www.gerger.co Yalim K. Gerger

      Hi Tihomir,

      This tutorial will only work if you install Formspider locally. Even then, the C: folder specified in the tutorial is on the server computer that runs the Formspider middle tier. (If you use the Formsider Installer to install the middle tier, then this is the Tomcat server).

      Formspider Cloud can’t (and shouldn’t) access your local computer’s C:.

      Kind Regards,
      Yalim K. Gerger
      Founder

      • Tihomir

        Thank you for answer.