Jaspersoft Reports and Analytics is a market-leading, enterprise open source Business Intelligence software that is used to bring timely, actionable data to the right people at the right time. And Liferay is a market leading Portal and Digital Experience Platform that is used to deliver amazing user experiences through multiple digital channels including web and mobile to customers, partners, and employees. Now, wouldn’t it make sense to deliver actionable business intelligence insights to your user base via your enterprise portal? This is where we see increasing interest in the marketplace to integrate Jaspersoft with Liferay, and this article speaks to an approach that we have used successfully to deliver a truly integrated, fully responsive User Experience on Liferay that delivers dashboards and reports leveraging your Jaspersoft investment.

Use Case
You wish to create an interactive dashboard and/or web reporting tool by creating reports in Jaspersoft and delivering these reports responsively through Liferay, and you wish to allow these reports to interact with each other – in other words, if you select a time slice or geographical region or product category in one report, you want the other reports on the page to refresh based on the event and the selection made.

Solution Overview
Jaspersoft provides a JavaScript library, Visualize.js that can help you pull Jaspersoft reports into Liferay – while integrating Visualize.js with Liferay can be somewhat tricky, you can use JQuery Events to make communication between reports simple.

Getting Started
To begin, we will use this demo and separate the two reports into two different portlets and show that we can use JQuery event for communication between them. To integrate with Liferay, just include the visualize.js and JQuery file into your theme and you’re set.

<script src="http://visualizejsdemo.jaspersoft.com/jasperserver-pro/client/visualize.js">
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>

Initialize the two reports in two portlet instances. For the first portlet, initialize the report and use visualize.js click event to trigger a JQuery event.

v.report({
    resource: master,
    container: '#master',
    linkOptions: {
        events: {
            "click": function(evt, link) {
                var p = [link.parameters.store_state, link.parameters.total_sales];
                $('#master').trigger('master:click', p); ##trigger a jquery event to inform other reports
            }
        }
    },
    error: function(err) {
        console.log(err.message);
    }
});

And for the second portlet, initialize the report and attach a handler to the first report so that when the event triggers, it can update the second report accordingly.

var slaveReport = v.report({
    resource: slave,
    container: '#cities',
    params: {
        state: ['CA']
    },
    events: {
        reportCompleted: function(status, error) {
            if (status === "ready") {
                /*
                     Nothing to see here... but the report has finished.
                      */
            } else if (status === "failed") {
                error && alert(error);
            }
        }
    },
    error: function(err) {
        alert(err.message);
    }
});

## listens to the event triggered by the master click event and update the second report
$('#master').on("master:click", function(event, y, z) {
 parameters['state'] = [ y ];
 slaveReport.params(parameters).run();
});

At XTIVIA, we have developed a configurable Liferay portlet that lets you connect to Jaspersoft Reporting Server, and pull in relevant reports and also have experience of integrating Jaspersoft with Liferay from a security (authentication and authorization) perspective. I and the rest of the XTIVIA team look forward to sharing more about these tools and techniques in future blog posts.

For questions or immediate help with your Liferay/Jaspersoft initiative, please contact us at [email protected].

Share This