Customizing JavaScript Files

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.chart.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; if you do so, modify the paths accordingly.

1. 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.
2. Create a subdirectory for a copy of the JavaScript files from JasperReports Server. This directory is called js-sources.
3. 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
4. Back up your js-sources directory.
5. Create a js-optimization-output directory for the output of the optimization process.
6. Download and install node.js from Place the nodejs folder directly in your Working folder.
7. Download r.js, a requirejs optimization file, from and place it directly in the Working folder.
8. Make your changes to the JavaScript files in Working/js-sources.
9. Open a command line tool and run the commands to optimize the JavaScript. The following example is for Windows, it places the output in the js-optimization-output folder:
% cd Working

% nodejs\node r.js -o js-sources\scripts\build.js appDir=js-sources\scripts baseUrl=. optimize=uglify2 dir=js-optimization-output

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/ 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 only have to do this 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.