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:
Recommended Comments
There are no comments to display.