Oracle ADF + Jasper Visualize.js = Awesome

This week I was working on a task to integrate Jasper Visualize.js into Oracle ADF application JSF page fragment. I must say integration was successful and Jasper report renders very well in Oracle ADF screen with the help of Visualize.js. The great thing about Visualize.js — it renders the report in an ADF page through client-side HTML/JS; there is no iFrame. Report HTML structure is included into HTML generated by ADF, which allows using CSS to control the report size and make it responsive.

To prove integration, I was using ADF application with multiple regions — ADF Multi Task Flow Binding and Tab Order. Each region is loaded with ADF Faces tab:

One of the tabs display region with Jasper report, rendered with Visualize.js:

Check the client-side generated code. You should see HTML from Visualize.js inside ADF generated HTML structure:

It is straightforward to render Jasper report with Visualize.js in Oracle ADF. Add JS resource reference to Visualize.js library, define DIV where report supposed to be rendered. Add Visualize.js function to render report from certain path, etc.:

The sample code is available on my GitHub repo.