Genero Report Viewer for HTML5 deployment and customization

When you select Browser as the output option, files are created for the report. These files are viewed using the Genero Report Viewer for HTML5.

All files needed to operate the Genero Report Viewer for HTML5 are included in the Genero Report Engine (GRE) package in the directory $GREDIR/viewer

Requirements

Genero Report Viewer for HTML5 requires a minimal server side HTTP Web server capable of serving static .txt, .html, .png, .jpg, .svg and .woff (Web fonts) files.

Deploying the Genero Report Viewer for HTML5

Copy the files from $GREDIR/viewer to a directory that is visible from the HTTP web server.

Invoking a report

To invoke a report in the browser, you need three things:
  • The address of a viewer main page
  • Session information
  • Document information

Given the resources from Table 1, the browser URL would be: “http://myserver/viewer/viewer.html?reportId = 75986BB4-87B0-4F57-B5E2-4F3A13EC0FEB &privateUrlPrefix = http://myserver/sessions/DA23E8D7-F0F9-475C-B76C-E14403279E4D/reports”.

Table 1. Resources for invoking a report
Resource Example Identifier Example file / directory location Notes
Viewer main page http://myserver/viewer/viewer.html $WEBROOT/reporting/viewer/viewer.html The directory “viewer” is a copy of $GREDIR/viewer, as explained in Deploying the Genero Report Viewer for HTML5
Session id http://myserver/sessions/DA23E8D7-F0F9-475C-B76C-E14403279E4D/reports /usr/local/www/apache22/data /DA23E8D7-F0F9-475C-B76C-E14403279E4D/reports
Document id 75986BB4-87B0-4F57-B5E2-4F3A13EC0FEB /usr/local/www/apache22/data /DA23E8D7-F0F9-475C-B76C-E14403279E4D/reports/75986BB4-87B0-4F57-B5E2-4F3A13EC0FEB
For a Java application, these resources can be specified using the Java API:
BrowserViewer bv=new BrowserViewer();
bv.setDocumentDirectory(
  "/usr/local/www/apache22/data /DA23E8D7-F0F9-475C-B76C-E14403279E4D/reports/75986BB4-87B0-4F57-B5E2-4F3A13EC0FEB");
bv.setDocumentDirectoryUrl(
  "http://myserver/sessions/DA23E8D7-F0F9-475C-B76C-E14403279E4D/reports/75986BB4-87B0-4F57-B5E2-4F3A13EC0FEB");

Customizing the viewer

The Genero Report Viewer for HTML5 is comprised of the files found within $GREDIR/viewer.

Table 2. GRV for HTML5 viewer files and directories
File / Directory Description
viewer.html Main HTML file containing the toolbar and document view. Customizable via CSS. Can be replaced by custom version if the same classes, ids and event bindings are used. Loads viewer.js, model.js, bowser.js and styles.css.
print.html Print preview page. Customizable via CSS. Can be replaces by a custom version if the same classes, ids and event bindings are used. Loads print.js, model.js, bowser.js and styles.css.
viewer.js JavaScript file that connects the HTML elements in the viewer (viewer.html by default) with the model (model.js). Can be replaced for the case that a custom HTML viewer is used that does not use the same classes, ids and event bindings as the default viewer.
print.js JavaScript file that connects the HTML elements in the print previewer (print.html by default) with the model (model.js). Can be replaced for the case that a custom HTML print previewer is used that does not use the same classes, ids and event bindings as the default print previewer.
model.js A JavaScript object representing a report. Methods exist to query the document (for example, to get the total number of pages), to navigate in the document (for example, to make a certain page the current page) and to register for events (for example, to ask to be notified when a new page is created).
bowser.js A third-party utility for managing browser-specific issues.
styles.css The default styles used by viewer.html and print.html.
images A directory containing the images referenced from viewer.html and print.html.