Expanding support for Jasper Reports

We’ve just released jsreports version 1.4.11 with support for additional Jasper Reports features (hurray, barcodes!).  If you’re already using Jasper Reports in your application, you can use jsreports in a couple of ways:

  1. Edit existing Jasper Reports in the web browser using the jsreports designer
  2. Create brand new Jasper Reports in the browser

Here’s an actual Jasper report being edited in the jsreports HTML5 report designer component:

jasper-report-in-jsreports-designer

Providing the ability to modify Jasper reports in the browser gives your customers a seamless experience – no need to deal with a separate desktop application and its dependencies and no files to transfer around.  In addition, the jsreports designer is made to be simple and intuitive, providing the most-needed features front and center so non-experts can be productive with it.

Here’s more detail on how to achieve the two use cases mentioned above.

1. Editing existing Jasper Reports in the web browser using the jsreports designer

First, get jsreports included in your webpage following the instructions at http://jsreports.com/docs/getting-started/#installation.

Now, you’ll need to get the existing report’s .jrxml to the browser somehow.  How you do it will depend on your tech stack.  For now, we’ll imagine you have some static reports stored under the /reports path on your server, and we’ll just use jQuery to pull in the file.

$.get("/reports/my-report.jrxml", function(jrxml) { 
    //...

Once the file is available at the client, you only need a line of code that calls the fromJRXML method on the jsreports.integrations.jasper.JasperReportDef class, which we’ve aliased here for brevity.

var JasperReportDef = jsreports.integrations.jasper.JasperReportDef; 
var reportDef = JasperReportDef.fromJRXML(jrxml);

That gives you a report definition object you can pass to the designer.  Here it is all together:

// Alias JasperReportDef for brevity 
var JasperReportDef = jsreports.integrations.jasper.JasperReportDef; 
// Fetch .jrxml file
$.get("/reports/my-report.jrxml", function(jrxml) {
    // Convert to jsreports format
    var reportDef = JasperReportDef.fromJRXML(jrxml);
    // Create designer and pass it the report definition
    var designer = new jsreports.Designer({
        data_sources: [], // Will use the embedded data source information
        report: reportDef
    });
});

2. Creating brand new Jasper Reports in the browser

As before, make sure you’ve got the jsreports designer included on your page.  This time, instead of pulling in a .jrxml file, we’ll just create a blank report.

// Alias JasperReportDef for brevity 
var JasperReportDef = jsreports.integrations.jasper.JasperReportDef;
// Create a new, blank Jasper report
var reportDef = new JasperReportDef();

The rest of the code is the same – instantiate a Designer and pass this reportDef to it, then when the designer is saved, you’ll get the resulting .jrxml as before and can save the new report to the server for rendering with Jasper.

It’s that easy!  If you have questions, get in touch with support@jsreports.com.

For more details, see our documentation on using the jsreports report designer with Jasper Reports.

JavaScript enthusiast at jsreports – building a better reporting solution for modern web applications