The report function runs reports on on the JasperReports IO reporting service and displays the result in a container that you provide. This chapter describes how to render a report in using the JasperReports IO JavaScript API.

The report function also supports more advanced customizations of hyperlinks and interactivity that are described in subsequent chapters:

This chapter contains the following sections:

Report Properties

The properties structure passed to the report function is defined as follows:

Report Functions

The report function exposes the following functions:

Report Structure

Rendering a Report

To run a report on the server and render it with JasperReports IO Javascript API, load the jrio.js script, configure the JasperReports IO client object to point to the JasperReports IO REST service and to the needed Javascript files and theme, and then call the report function providing the URI of the report to run, and the container where it should be rendered on your page.

The following code example shows how to display a report that the user selects from a list.

jrio.config({    server : "http://bi.example.com:8080/jrio",    scripts : "https://bi.example.com/jrio-client/optimized-scripts",    theme: {        href: "https://bi.example.com/jrio-client/themes/default"    },    locale: "en_US"});jrio(function(jrioClient) {    var report,        selector = document.getElementById("selected_resource");    selector.addEventListener("change", function() {        report = createReport(selector.value);     });    report = createReport(selector.value);    function createReport(uri) {       return jrioClient.report({           resource: uri,           container: "#reportContainer",           error: failHandler       });    }    function failHandler(err) {        alert(err);    }});[/code]                    

The HTML page that displays the report uses a static list of reports in a drop-down selector, but otherwise needs only a container element.

Setting Report Parameters

To set or change the parameter values, update the params object of the report properties and invoke the run function again.

The example above is trivial, but the power of the JasperReports IO JavaScript API comes from this simple code. You can create any number of user interfaces, database lookups, or your own calculations to provide the values of parameters. Your parameters could be based on 3rd party API calls that get triggered from other parts of the page or other pages in your app. When your reports can respond to dynamic events, they are seamlessly embedded and much more relevant to the user.

Here are further guidelines for setting parameters:

Rendering Multiple Reports

JavaScript Example:

jrio.config({    ...});jrio(function(jrioClient) {    var reportsToLoad = [        "/samples/reports/TableReport",        "/samples/reports/highcharts/HighchartsChart",        "/samples/reports/cvc/Figures",        "/samples/reports/OrdersTable"    ];    $.each(reportsToLoad, function (index, uri) {        var container = "#container" + (index + 1);        jrioClient(container).report({            resource: uri,            success: function () {                console.log("loaded: " + (index + 1));            },            error: function (err) {                alert(err.message);            }        });    });});[/code]                    

Associated HTML:

Associated CSS:

Resizing a Report

When rendering a report, by default it is scaled to fit in the container you specify. When users resize their window, reports will change so that they fit to the new size of the container. This section explains several ways to change the size of a rendered report.

To set a different scaling factor when rendering a report, specify its scale property:

In every case, the entire report is scaled in both directions by the same amount, you cannot change the aspect ratio of tables and crosstab elements.

For example, to initialize the report to half-size (50%), specify the following scale:

var report = jrioClient.report({    resource: "/public/Sample",    container: "#reportContainer",    scale: 0.5});[/code]                    

You can also change the scale after rendering, in this case to more than double size (250%):

Alternatively, you can turn off the container resizing and modify the size of the container explicitly:

Setting Report Pagination

To set or change the pages displayed in the report, update the pages object of the report properties and invoke the run function again.

The pages object of the report properties also supports bookmarks by specifying the anchor property. You can also specify both pages and bookmarks as shown in the example below. For more information about bookmarks, see Providing Bookmarks in Reports.

Creating Pagination Controls (Next/Previous)

Again, the power of the JasperReports IO JavaScript API comes from these simple controls that you can access programmatically. You can create any sort of mechanism or user interface to select the page. In this example, the HTML has buttons that allow the user to choose the next or previous pages.

Associated HTML:

Creating Pagination Controls (Range)

JavaScript Example:

Associated HTML:

Exporting From a Report

To export a report, invoke its export function and specify the outputFormat property. You MUST wait until the run action has completed before starting the export. The following export formats are supported:

"pdf", "xlsx", "docx", "pptx", "csv", "xls", "rtf", "odt", "ods", "html", "xml", "data_csv", "data_json," "data_xls"

The last three are for pure data output, also known as "metadata" exporters in the JR Library, and you can learn more about them in Exporting Data From a Report.

The following sample exports 10 pages of the report to a paginated Excel spreadsheet:

The following sample exports the part of report associated with a named anchor:

The following example creates a user interface for exporting a report:

Associated HTML:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!-- Provide the URL to jrio.js --><script src="http://bi.example.com:8080/jriosjapi/client/jrio.js"></script> <button id="button" disabled>Export</button><!-- Provide a container for the report --><div id="reportContainer"></div>[/code]                    

Exporting Data From a Report

You can also request the raw data of the report in CSV, XLS or JSON format.

The following example shows how to export pure data in CSV format using the metadata CSV exporter. CSV output is plain text that you must parse to extract the values that you need.

The following example shows how to export data in JSON format. By its nature, JSON format can be used directly as data within your JavaScript.

Refreshing a Report

JavaScript Example:

jrio.config({    ...});jrio(function(jrioClient) {    var alwaysRefresh = false;         var report = jrioClient.report({        //skip report running during initialization        runImmediately: !alwaysRefresh,        resource: "/samples/reports/FirstJasper",        container: "#reportContainer",     });     if (alwaysRefresh){        report.refresh();    }     $("button").click(function(){           report            .refresh()            .done(function(){console.log("Report Refreshed!");})            .fail(function(){alert("Report Refresh Failed!");});    }); });});[/code]                    

Associated HTML:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script src="http://bi.example.com:8080/jriosjapi/client/jrio.js"></script><button>Refresh</button><div id="reportContainer"></div>[/code]                    

Canceling Report Execution

To stop a running report, call its cancel function:

The following example is more complete and creates a UI for a cancel button for a long-running report.

jrio.config({    ...});jrio(function(jrioClient) {    var button = $("button");     var report = jrioClient.report({        resource: "/samples/reports/SlowReport",        container: "#reportContainer",        events: {            changeTotalPages : function(){               button.remove();             }        }    });     button.click(function () {        report            .cancel()            .then(function () {                button.remove();                 alert("Report Canceled!");            })            .fail(function () {                alert("Can't Cancel Report");            });    });});[/code]                    

Associated HTML:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script src="http://bi.example.com:8080/jriosjapi/client/jrio.js"></script><button>Cancel</button><div id="reportContainer"></div>[/code]