Open iReport jrxml from ExtJs as pdf

In this post I’ll show you how to create a report using iReport, uploading to your jasperserver running on tomcat and accessing the report from an ExtJS grid. In addition to Apache, MySql and ExtJS libraries (I’m assuming you already have those installed) you will need to get the following installed:

1. iReport (on your laptop/workstation)
2. tomcat (on your server)
3. jasperserver (on your server)


Make sure to download the same version of iReport and jasperserver, if you download a newer version of iReport, you’ll need to change the compatibility settings in iReport so jasperserver won’t have problems opening your report. (I’ll show you how to do that further down in this tutorial)

1. To install iReport, just go to their site, download the latest and source and follow their instructions (they’re way too simple so I’m not going to go into details here).

2. If running ubuntu, install tomcat via apt-get install tomcat6 . If not running ubuntu, just download one of their packages or use your distro’s own repository.

3. Download and install jasperserver. I chose to install using their war package, which can be downloaded here, you’ll need to download the file called jasperreports-server-cp-4.0.0-bin.zip. Once downloaded, unzip the file and follow their instructions found in the install guide (the step by step instructions are found on page 28 of their manual called JasperReports-Server-CP-Install-Guide, which can be found in the folder called docs, after you have unzipped the file you just downloaded at the beginning of step 3). I’ve added new step by step instructions for installing jasperserver post below:

**** STEP BY STEP INSTRUCTIONS FOR COMPILING JASPERSERVER *****

4. Go to your tomcat server and deploy the war file.

Now that you have everything we’ll be using, open iReport and adjust the compatibility setting if needed. Click on Tools->Options go to the General tab and then Compatibility tab and then choose the appropriate version (the same as your jasperserver version). Click OK to save your changes.

Next we need to add the jasperserver repository so we can load the report we’ll be creating shortly. Click on Window->JasperReports Server Repository. This will display the Repository Navigator. Now click the little icon on the top left hand side in the Repository Navigator to add your jasperserver. Fill out the name (this can be anything you’d like to call), and change the server address to match yours (do not change anything else, only the server name), and enter the username and password for your jasperadmin account. Click Save when done.

Now your server is in the repository list, we can start creating a report. We’ll create a report containing a subreport and with parameters. First create a folder on jaspersever to store the report. Right click on the server you just added to the repository and choose Add-> Folder. I named it reports.

Create the report, add the query and add the parameter. After you’ve done all of it, save the report and load it to the repository server by going to the Repository Navigator, right click on the reports folder we created earlier and choose Add-> Jasperserver Report. give the report a name and id and click next, then choose locally defined and click on get source from current opened report and click next again. Choose locally defined and click on edit local datasource, give it a name and id, then click on datasource details, choose JDBC data source and click on import from ireport, choose your datasource from the list and edit the details if needed and click save, then click finish.

** A great tutorial that covers adding a subreport and using parameters can be found here.

A more detailed tutorial and how to create a report from start to finish, with parameters can be found here

In order to disable the prompt for your parameter when you load the report, right click on the report name, go to Properties and click on the tab called Other and uncheck “Always Prompt” and click save. By doing this you will be able to bring up the report by entering the url in the app, instead of having to go through jasperserver on tomcat.

Next we need to add a dynamic input control to the report, once again from the repository navigator, right click on the report (not the jrxml file) and choose add-> input control. The input control needs to have the same name/id as the parameter you have created early on, in my case my parameter is called lapid so I’ve named the name and id of the input control the same. Next go to the input control detail tab and choose the type (this should be the same as your parameter type). Next click on edit local resource, give it whatever name and id you’d like and change datatype the details to match your needs. clicks save and then save again.

A more detailed explanation (in case any of this doesn’t make sense) can be found here.

Now create a user on your jasperserver to access the reports, give the acct read only access (we’ll use this in the managed iframe below to call the report)

Now we’re done with the ireport and jasperserver portion, we move on to creating the form that’ll bring up our report. In my case I’m using a grid, so the pertinent portion of the file looks like so (I’m not going into details on how to create a new ExtJs app or grid at this time, I’ve written a couple of examples here and here):
I’ve created a listener for the column click, but you can add this to any listener, be it for a button or grid, it doesn’t matter, it works the same way. The format to call the report is the url below:


http://localhost:8080/jasperserver/flow.html?_flowId=viewReportFlow&reportUnit=/reports/race&raceid=1&j_username=username&j_password=somepassword&standAlone=true&ParentFolderUri=/reports&decorate=no&output=pdf

notice the j_username=username&j_password=somepassword, these are the parameters for the jasper user you created above, so just replace username and somepassword with the username and password you created. raceid is my parameter/dynamic input control (which we created earlier) and output is the format. And finally, here’s the portion of the ExtJs code to call the report:

 

var framename = new Ext.ux.ManagedIFramePanel ({
		                   border: false,
		                   bodyBorder: false,
		                   defaultSrc : null,
		                   frameCfg   : {id : 'pdfFrame'},
		                   defaultSrc:'http://localhost:8080/jasperserver/flow.html?_flowId=viewReportFlow&reportUnit=/reports/race&raceid=1&j_username=username&j_password=somepassword&standAlone=true&ParentFolderUri=/reports&decorate=no&output=pdf',
		                   listeners:{
		                       domready : function(frame){
		                             var fbody = frame.getBody();
		                             var w = Ext.getCmp('myFrameWin');
		                             if(w && fbody){
		                                  //calc current offsets for Window body border and padding
		                                 var bHeightAdj = w.body.getHeight() - w.body.getHeight(true);
		                                 var bWidthAdj  = w.body.getWidth()  - w.body.getWidth(true);
		                                 //Window is rendered (has size) but invisible
		                                 w.setSize(Math.max(w.minWidth || 0, fbody.scrollWidth  +  w.getFrameWidth() + bWidthAdj) ,
		                                           Math.max(w.minHeight || 0, fbody.scrollHeight +  w.getFrameHeight() + bHeightAdj) );
		                                 //then show it sized to frame document
		                                 w.show();
		                                 
		                                 
		                                 
		                             }
		                       }
		                   }
		               });
       
			       var windowFrame = new Ext.Window({
			                   title: 'Whatever title you like',
			                   width: 100,   
			                   height: 100,
			                   hideMode:'visibility',
			                   id:'myFrameWin',
			                   hidden : true,  
			                   plain: true,
			                   constrainHeader: true,
			                   minimizable: true,
			                   ddScroll: false,
			                   border: false,
			                   bodyBorder: false,
			                   layout: 'fit',
			                   plain:true,
			                   maximizable: true,
			                   buttonAlign:'center',
			                   items:framename
			               });
			       
			       windowFrame.show();
			       

This is it, hopefully you were able to make sense out of all this, it might feel like information overload, but it work at the end and now I can get all my reports without having to go get out of my extjs app. I understand this was a long one, thank you for stopping by and please share with others, after all, code should be free.foscode.com | because code should be free

4 thoughts on “Open iReport jrxml from ExtJs as pdf

  1. Pingback: Create Extjs PDF Report | foscode

  2. Thanks alot for your architecture. URI is encountering an error at the jasperserver . “The server has encountered an error. Please excuse the inconvenience.”
    Error Message “com.jaspersoft.jasperserver.api.JSException: jsexception.could.not.find.resource.with.uri”

  3. I am done with error.. it was a mistake in the reportUnit/reports/main.jrxml…
    how to use the uri without displaying credentials?

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>