Visualize.js: How to segregate "Report running and rendering" task into two isolated tasks "Report running in server" and "Report rendering in Visualize.js"

[sampath516]

Hi Experts,

We are using Visualize.js to embed the Jasper Reports into our application. As per our understnding, in all the given samples, Report running and rendering is happening as a single task.

We wanted to implement the following scenario using Visualize.js:

1. Creating a report instance alone (No running and rendering)
2. Sending a request to JasperReports Server to run the above report asynchronously. We have very lengthy reports which can take more time to complete running.
3. Displaying all the reports with thier corresponding state (Running, Queued and Completed)
4. Rendering the completed report in visualize.js. 

All the above four steps should be separate tasks.

As per our understanding, we can imlement the above scenario using the REST API approach. But we wanted to do it jusing Visualize.js.

Plese let us know is it possible to implement the above scenario using Visualize.js. If possible, please provide some references or code samples to implement the same.

 

Thanks,

Sampathi G

[narcism]

It is possible to achieve what you want to a certain degree:

1. You need to use the runImmediately option set to false in order to prevent the automatic running and rendering:

visualize({    auth: {        name: "username",        password: "password",        organization: "organization"   }  }, function (v) {        var report = v.report({            resource: "/path/to/report",            // container: "#container",            runImmediately: false        });                // step #2  }, function(err) {    console.log(err.message);  });

 

Having the container property not specified may help later.

2. Now you can just call the render function on the report object:

report.run().done(function() {    report.properties({container: "#container"}); });

Report running and rendering are asynchronous operations on server and client meaning you will normally start seeing things as soon as they are ready.

But the above call starts running the report on the server and prevents the rendering by not having the container property specified in the original config object. It also reinstates the container property so that a later call to the render() method will work properly.

Having the container specified in the original report configuration object will trigger the rendering of the requested page(1 by default) as soon as it is ready. This does not mean that the whole report is in the completed state, but at least you can start seeing something. It is up to you how you want to use it.

3. There are a couple of events that may help tracking the report status (http://community.jaspersoft.com/documentation/tibco-jasperreports-server-visualizejs-guide/v62/api-usage-report-events) but there are no fine-grained events to hook to.

4. You could use the reportCompleted event to trigger the rendering once the report is completed.

The final code would looke like this:

visualize({      auth: {          name: "username",          password: "password",          organization: "organization"      }  }, function (v) {      var report = v.report({        resource: "/path/to/report",               events: {          reportCompleted: function(status, error) {            if ("ready" === status) {              report.render();            }          }        }        // container: "#container",        runImmediately: false      });      report.run().done(function() {        report.properties({container: "#container"});      });  }, function(err) {    console.log(err.message);  });