Custom Visualization Component v6.0.x: How to run the Samples

This page explains how to configure and run the samples in TIBCO Jaspersoft^® Studio.

Installing PhantomJS

Download PhantomJS from http://phantomjs.org/ and copy the phantomjs binary in the PATH, so TIBCO JasperReports^® Library will be able to find it easily.

If you don't want the binary to be in the path, you can specify its exact location of the executable by setting the property:

com.jaspersoft.jasperreports.components.customvisualization.phantomjs.executable.path=/path/to/phantomjs/executable

There may be some issues with latest version of PhantomJS and particularly v. 2.2.1. The sample provided here have been tested with Phantom v. 1.9.7

Configuring the required jasperreports properties

Jaspersoft Studio comes preconfigured to properly run reports using custom visualization components (except for PhantomJS which cannot be shipped along with JSS due to licensing issues).
Jaspersoft Studio pre-configures for us a couple of properties, so actually there is nothing to do on a normal installation.

Just for reference, here is what it's preconfigured. First of all, Jaspersoft Studio (or better JasperReports Library) needs to know where the require.js script is located, by means of this property:

com.jaspersoft.jasperreports.components.customvisualization.require.js=file:/path/to/require.js

Require.js is shipped with Jaspersoft Studio and the value of the property is set to the proper path automatically.

On Windows, a bug of PhantomJS requires you to remove the file://. (The PhantomJS bug is https://github.com/ariya/phantomjs/issues/10231)

Anyway, the platform check is performed by Jaspersoft Studio when the Custom Visualization Component plugin is activated, and the property is set accordingly to it.

The other property set by Jaspersoft Studio, used only when running reports in interactive environments (Interactive Viewer in Jaspersoft Studio and TIBCO JasperReports^® Server), is the package from which JasperReports is allowed to load resources. The property and its value are:

net.sf.jasperreports.web.resource.pattern.customvisualization=com/jaspersoft/jasperreports/customvisualization/.*

That's all.

Installing the samples

Download the samples from this page: cvc_samples_20150127.tgz
From Jaspersoft Studio select File > Import then select General > Existing Projects into Workspace

Select the radio "Select archive file" and select the CVC_samples_xyz.tgz archive and press finish.
The new CVC project with a set of samples will be imported inside your Workspace

Each folder inside the CVC project is a sample. Each sample includes several files:

A build.js file, which is the file used to assemble, minify and uglify the component javascript
A javascript module (i.e. plain.js), which is the component module implementation
A "compiled" version of the component (i.e. plain.min.js)
A sample report to showcase the use of the component (i.e. pain.jrxml)
Optionally other javascript libraries (i.e. raphael.js) required by the module
Optionally a css file used by the component

The component "compiled" version is an aggregation of all the required javascript files needed by the module that implements the component itself. This file must be regenerated all the times the module source is modified, by right-clicking the build.js file and selecting Build Component.

Running the samples

We are ready to go!

Open a sample. All the samples use an empty data source or the Sample DB, which are both preconfigured in any Jaspersoft Studio environment.

Press Preview for the "Java" preview:

To test the same report in HTML click on HTML output format:

And you will be able to play with the zoomable circle packing used in this example:

The next step is to try this report inside the interactive viewer. Select the interactive viewer mode:

And run the report inside the interactive viewer:

Deploy and test the samples on JasperReports Server

I'm sure that at this point you would like to test the reports on the server.

There is a step by step guide on how to configure the server on this page: JasperReports Server setup for Custom Visualization Component

Open a report (i.e. Zoomable Circle Packing)

Deploy it on the server by using the deploy button (the small server icon with the blue arrow)

Select where to deploy it on the server:

At this point, Jaspersoft Studio will (as usual) introspect the report, looking for resources to upload. The Custom Visualization Component is not an exception: Jaspersoft Studio will look for the script and css properties to upload, as part of the report unit, the component javascript and optionally the references css file.

Use as data source /datasources/JServerJNDIDS which usually points to a database with the orders table, compatible with the one used to create the samples.

This should be the result after the publishing the new report unit: