Customizing JavaScript Files

This documentation is an older version of JasperReports Server Ultimate Guide. View the latest documentation.

The JavaScript files are optimized to improve performance. If you customize any JavaScript files, you need to download the optimization tools, optimize the files and restart JasperReports Server.

Inside the JasperReports Server web application, the JavaScript files are in the <js-webapp>/scripts and <js-webapp>/fusion folders. File names contain module and subcomponent names, for example <js-webapp>/scripts/adhoc.start.js.

To optimize and implement custom JavaScript files:

For convenience, these steps assume that you place the JavaScript files from JasperReports Server and the scripts necessary to optimize them in a single Working directory. You can place the files and scripts wherever you want, but modify the paths accordingly.

Create a working directory where you can copy JavaScript files and install and run the required scripts. In this example, the directory is called Working.

Create a subdirectory for a copy of the JavaScript files from JasperReports Server. This directory is called js-sources.

Copy the following directories from the JasperReports Server directory, <js-webapp>, to js-sources:

•

Copy <js-webapp>/scripts to js-sources/scripts.

•

Copy <js-webapp>/fusion to js-sources/fusion

Back up your js-sources directory.

Create a js-optimization-output directory for the output of the optimization process.

Download and install node.js from http://nodejs.org/. Place the nodejs folder directly in your Working folder.

Download r.js, a requirejs optimization file, from http://requirejs.org and place it directly in the Working folder.

Make your changes to the JavaScript files in Working/js-sources.

Open a command line tool and run the commands to optimize the JavaScript. In the following example is for Windows, it places the output in the js-optimization-output folder:

% cd Working% nodejsnode r.js -o js-sourcesscriptsbuild.js appDir=js-sourcesscripts baseUrl=. optimize=uglify2 dir=js-optimization-output[/code]

10.

Copy the optimized scripts from js-optimization-output to <webapp>/optimized-scripts.

11.

Reload the web app in the app server to see the changes as described in Reloading the JasperReports Server Web App.

You can disable JavaScript optimization by setting javascript.optimize=false in the
<js-webapp>/WEB-INF/js.config.properties file and then reloading the web application. In this case, you can edit your JavaScript files directly in the <js-webapp>/fusion and js/webapp<scripts> directly. You have to do this only once.

This option can be useful while developing and testing your JavaScript. You can temporarily disable optimization and try out your changes. When you have your final version, you can enable optimization and copy and optimize your files as described above.