Jump to content
  • This documentation is an older version of JasperReports IO Professional 3.0 User Guide. View the latest documentation.

    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:

    JavaScript API Usage - Hyperlinks
    JavaScript API Usage - Interactive Reports

    This chapter contains the following sections:

    Report Properties
    Report Functions
    Report Structure
    Rendering a Report
    Setting Report Parameters
    Rendering Multiple Reports
    Resizing a Report
    Setting Report Pagination
    Creating Pagination Controls (Next/Previous)
    Creating Pagination Controls (Range)
    Exporting From a Report
    Exporting Data From a Report
    Refreshing a Report
    Canceling Report Execution

    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

    The Report Data structure represents the rendered report object manipulated by the report function. Even though it is named "data," it does not contain report data, but rather the data about the report. For example, it contains information about the pages and bookmarks in the report.

    The report structure also contains other components described elsewhere:

    The definitions of hyperlinks and how to work with them is explained in Customizing Links
    Details of the Jaspersoft Interactive Viewer and Editor (JIVE UI) are explained in Interacting With JIVE UI Components.

    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:

    If a report has required parameters, you must set them in the report object of the initial call, otherwise you'll get an error. For more information, see Catching Report Errors.
    Parameters are always sent as arrays of quoted string values, even if there is only one value, such as ["USA"] in the example above. This is also the case even for single value input such as numerical, boolean, or date/time inputs. You must also use the array syntax for single-select values as well as multi-select parameters with only one selection. No matter what the type of input, always set its value to an array of quoted strings.
    The following values have special meanings:
    "" – An empty string, a valid value for text input and some selectors.
    "~NULL~" – Indicates a NULL value (absence of any value), and matches a field that has a NULL value, for example if it has never been initialized.
    "~NOTHING~" – Indicates the lack of a selection. In multi-select parameters, this is equivalent to indicating that nothing is deselected, thus all are selected. In a single-select non-mandatory parameter, this corresponds to no selection (displayed as ---). In a single-select mandatory parameter, the lack of selection makes it revert to its default value.

    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:

    container – The report is scaled to fully fit within the container, both in width and height. If the container has a different aspect ratio, there will be white space in the dimension where the container is larger. This is the default scaling behavior when the scale property is not specified.
    width – The report is scaled to fit within the width of the container. If the report is taller than the container, users will need to scroll vertically to see the entire report.
    height – The report is scaled to fit within the height of the container. If the report is wider than the container, users will need to scroll horizontally to see the entire report.
    Scale factor – A decimal value greater than 0, with 1 being equivalent to 100%. A value between 0 and 1 reduces the report from its normal size, and a value greater than 1 enlarges it. If either or both dimensions of the scaled report are larger than the container, users will need to scroll to see the entire report.

    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]                    

    User Feedback

    Recommended Comments

    There are no comments to display.



    Guest
    This is now closed for further comments

×
×
  • Create New...