Depending on the size of your data, the report function can run for several seconds or minutes. You can listen for events that give the status of running reports and display pages sooner.
This chapter contains the following sections:
Tracking Completion Status
By listening to the reportCompleted event, you can give information or take action when a report finishes rendering.
jrio.config({ ...});jrio(function(jrioClient) { var report = jrioClient.report({ // run example with a very long report resource: "/samples/reports/SlowReport", container: "#reportContainer", events: { reportCompleted: function(status) { alert("Report status: "+ status + "!"); } }, error: function(error) { alert(error); }, });});[/code] |
Listening to Page Totals
By listening to the changeTotalPages event, you can track the filling of the report.
jrio.config({ ...});jrio(function(jrioClient) { var report = jrioClient.report({ // run example with a very long report resource: "/samples/reports/SlowReport", container: "#reportContainer", events: { changeTotalPages: function(totalPages) { alert("Total Pages:" + totalPages); } }, error: function(error) { alert(error); }, });});[/code] |
Customizing a Report's DOM Before Rendering
By listening to the beforeRender event, you can access the Document Object Model (DOM) of the report to view or modify it before it is displayed. In the example the listener finds span elements and adds a color style and an attribute my-attr="test" to each one.
jrio.config({ ...});jrio(function(jrioClient) { // enable report chooser $(':disabled').prop('disabled', false); //render report from provided resource startReport(); $("#selected_resource").change(startReport); function startReport () { // clean container $("#reportContainer").html(""); // render report from another resource jrioClient("#reportContainer").report({ resource: $("#selected_resource").val(), events:{ beforeRender: function(el){ // find all spans $(el).find(".jrPage td.jrcolHeader span") .each(function(i, e){ // make them red $(e).css("color","red") .attr("data-my-attr", "test"); }); console.log($(el).find(".jrPage").html()); } } }); };});;[/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. This is similar to the basic report example in Rendering a Report, except that the JavaScript above will change the report before it's displayed.
<script src="http://code.jquery.com/jquery-2.1.0.js"></script> <!-- Provide the URL to jrio.js --><script src="http://bi.example.com:8080/jriojsapi/client/jrio.js"></script><select id="selected_resource" disabled="true" name="report"> <option value="/samples/reports/TableReport">Table Report</option> <option value="/samples/reports/OrdersTable">Orders Table</option></select><!-- Provide a container to render your visualization --><div id="reportContainer"></div>[/code] |
Open topic with navigation
Recommended Comments
There are no comments to display.