Using jsreports as a designer for Jasper Reports

If you're already using Jasper Reports on the server, you can use the jsreports designer to edit them in the web browser. You do this by converting between jsreports report definitions and Jasper's .jrxml file format.

Note that jsreports does not fill or render Jasper Reports - you must still use Jasper Reports itself to generate the final reports.

Loading a Jasper report definition

For this example, assume you have a Jasper .jrxml report file located on your server. We will fetch that file using jQuery, convert it to a jsreports definition, and then open the report in the jsreports designer.

// 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
    var designer = new jsreports.Designer({
        container: $(".designer"),
        data_sources: [],   // Will use the embedded data source information
        report: reportDef
    });
});

In the code above, the jsreports designer is instantiated in the normal way, except that it receives a report definition converted from JRXML instead of a standard jsreports report definition, and no data sources are provided. The designer will use the embedded data sources in the JRXML report definition.

Saving a modified Jasper report

After the report has been edited in the designer, you can convert back to JRXML to send to the server and run through Jasper Reports. Do that by listening for the designer's "save" event and then using the .getJasperReport() and .toJRXML() methods:

// Listen for save event
var JasperReportDef = jsreports.integrations.jasper.JasperReportDef;
// This code would come immediately after instantiating a jsreports.Designer
$(designer).on("save", function(evt, def) {
    var jrxml = designer.getJasperReport().toJRXML();
    // ... send JRXML to server
});

Setting the data fields for the report

You can specify the data source schema for the report by calling setSchema on the JasperReportDef object, like this:

var def = new jsreports.integrations.jasper.JasperReportDef();
def.setSchema({
    fields: [{
      name: 'OrderNumber',
      type: 'number'
    },{
      name: 'Date',
      type: 'date'
    },{
      name: 'Value',
      type: 'number'
    },{
      name: 'Product',
      type: 'text'
    }]
});

If you do this before opening the designer, the designer will have access to these fields for use in the report.

When you use fromJRXML to read an existing JRXML report, the embedded schema (fields) defined in the JRXML will be used unless you call setSchema() to override them.

Jasper feature support

Below is a list of currently supported features. This list is subject to change.

Need any help?