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

    Both reports and dashboards include hyperlinks (URLs) that link to websites or other reports. The JasperReports IO JavaScript API gives you access to the links so that you can customize them or open them differently. For links generated in the report, you can customize both the appearance and the container where they are displayed.

    This chapter contains the following sections:

    Structure of Hyperlinks
    Customizing Links
    Drill-Down in Separate Containers
    Accessing Data in Links

    Structure of Hyperlinks

    The following JSON schema describes all the parameters on links, although not all are present in all cases.

    Customizing Links

    You can customize the appearance of link elements in a generated report in two ways:

    The linkOptions exposes the beforeRender event to which you can add a listener with access to the links in the document as element pairs.
    The normal click event lets you add a listener that can access to a link when it's clicked.
    jrio.config({    ...});jrio(function(jrioClient) {    jrioClient("#reportContainer").report({        resource: "/samples/reports/TableReport",        linkOptions: {            beforeRender: function (linkToElemPairs) {                linkToElemPairs.forEach(function (pair) {                    var el = pair.element;                    el.style.backgroundColor = "red";                });            },            events: {                "click": function(ev, link){                    if (confirm("Change color of link id " + link.id + " to green?")){                        ev.currentTarget.style.backgroundColor = "green";                        ev.target.style.color = "#FF0";                    }                }            }         },        error: function (err) {            alert(err.message);        }    });});[/code]                    

    Drill-Down in Separate Containers

    By using the method of listing for clicks on hyperlinks, you can write a JasperReports IO JavaScript API script that sets the destination of drill-down report links to another container. This way, you can create display layouts or overlays for viewing drill-down links embedded in your reports. This sample code also changes the cursor for the embedded links, so they are more visible to users.

    Associated HTML:

    <script src="http://underscorejs.org/underscore.js"></script><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/jriojsapi/client/jrio.js"></script><!-- Provide a container for the main report and one for the drill-down --><div>    <div  id="main"></div>    <div  id="drill-down"></div></div>[/code]                    

    Associated CSS:

    Accessing Data in Links

    In this example, we access the hyperlinks through the data.links structure after the report has successfully rendered. From this structure, we can read the tooltips that were set in the JRXML of the report. The script uses the information in the tooltips of all links in the report to create a drop-down selector of city name options.

    By using link tooltips, your JRXML can create reports that pass runtime information to the display logic in your JavaScripts.

    jrio.config({    ...});jrio(function(jrioClient) {     var $select = $("#selectCity"),        report = jrioClient.report({            resource: "/samples/reports/TableReport",              container: "#main",            success: refreshSelect,            error: showError    });    function refreshSelect(data){        console.log(data);        $.each(data.links, function (i, item) {            $select.append($('<option>', {               value: item.id,		text : item.tooltip            }));        });    }[/code]
         $("#previousPage").click(function() {        var currentPage = report.pages() || 1;        goToPage(--currentPage);         });     $("#nextPage").click(function() {        var currentPage = report.pages() || 1;        goToPage(++currentPage);    });     function goToPage(numder){         report            .pages(numder)            .run()                .done(refreshSelect)                .fail(showError);    }        function showError(err){        alert(err.message);    } });[/code]                    

    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/jriojsapi/client/jrio.js"></script><select id="selectCity"></select><button id="previousPage">Previous Page</button><button id="nextPage">Next Page</button><!-- Provide a container for the main report --><div>    <div ></div>    <div  id="main"></div>  </div>[/code]                    

    Associated CSS:


    User Feedback

    Recommended Comments

    There are no comments to display.



    Guest
    This is now closed for further comments

×
×
  • Create New...