Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Oracle ADF + Jasper Visualize.js = Awesome

DZone's Guide to

Oracle ADF + Jasper Visualize.js = Awesome

Oracle ADF + Jasper Visualize.js = Awesome

Free Resource

How to Transform Your Business in the Digital Age: Learn how organizations are re-architecting their integration strategy with data-driven app integration for true digital transformation.

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:

Image title

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.

Make your mark on the industry’s leading annual report. Fill out the State of API Integration 2019 Survey and receive $25 to the Cloud Elements store.

Topics:
integration ,oracle adf ,jasper visualize.js ,adf multi task flow binding ,tab order ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}