{{getMsg('Help_YouAreHere')}}: {{page.title}} {{page.title}}


The HTML Report Viewer can be customized on two different levels: visually and programmatically.

Visual Customisation

Though the viewer has it's own internal visual styles it also derives colors from the theme provided for the overall system or the logged in user. The base colors therein will be used to have the HTML Report Viewer look like the rest of the interface which can use Bootstrap themes.

To customize even more, you can insert Less or CSS rules into any of your themes. The CSS selectors that you can use are straight forward and can be derived from the current viewer.

Programmatic Customisation

The HTML Viewer is extendable using the plugin architecture. You have to create a plugin and put your JavaScripts into it. Please see the samples for the html_viewer example. It provides the needed information to get a new custom plugin started.

Using the example you can add new JavaScripts at the end of the HTML Report Viewer. They will also be included in the exported Zip-File using the HTML format.

HTML Viewer Running Sequence

  • addInitEvent(<func>): adds function to a queue that will be processed right after all other scripts have been loaded. It is comparable to jQuery(<func>).
    • The HTML Viewer will register using the function to start further execution.
    • It will then start to set up internal variable and the base URL to the called report. It will also initialise the keyboard handler
  • amIOnline.check(<func>): is another queue. It will check if the current viewer is opened locally or using the report server. Only after using the queue it is safe to assume that the viewer is properly initialised.
    • check takes a function(<bool>){} function, bool is a parameter indicating that the viewer uses the report server ( true) oder is running locally.
  • The Menubar will be set up now and the default zoom will be set
  • The Tabbar will be set up and the report will be loaded asynchronously

Available Variables

Note: The following variables will be set up in the init phase of the viewer, triggered by addInitEvent. If you want to change them you will need to register your own addInitEvent function or put the VARIABLES based settings into the PROMPT global. It will be extended into VARIABLES.

Variable Name Description Default Value
BASE The base URL to the report. This will be used for subsequent requests to the report server. Additional parameters should not be set here
CANSHOWPERMALINK Whether the export menu is allowed to show permalink for an export configuration. VARIABLES.canshowpermalink
DEFAULTZOOOM The Default Zoom that should be used. You can use XX% or Fit to Page. It will remember the last value used. VARIABLES.defaultzoom or Fit To Page
HASNOEXPORTBUTTON If the Viewer should have an export button !VARIABLES.hasexportbutton
HASNOGROUPTREE If the Viewer should have a group tree !VARIABLES.hasexportbutton
HASNOPRINTBUTTON If the Viewer should have a print button !VARIABLES.hasprintbutton
HASNOPROMPTONREFRESH If the Viewer should have button to show the prompts on a reload !VARIABLES.hasexportbutton
HASNOTEXTSEARCH If the Viewer should have the search button !VARIABLES.hastextsearchcontrols
HASNOZOOM If the viewer should have the zoom !VARIABLES.haszoomcontrol
HASPROMPTS If the viewer should display the prompts dialog !VARIABLES.hasexportbutton
listener This is the keyboard listener, globally registered
PROMPT Map of prompt values. This can be set from the report server as well {}
PROMPTONREFRESH If the Viewer should prompt on a refresh be default !VARIABLES.promptonrefresh
TIMEOUTBEFOREERROR Timeout before an error will be reported during loading a report file 10000
URI The atomised parts of the URL that was called by the user in the browser
VARIABLES Map of variables set via the report URL. {}

Javascript Quickstart

The simplest script extension would be to do whatever you need directly in the script. But you have to expect that the HTML Viewer is not yet fully initialised and operational.

// This is probably the first thing you will see in the console
console.log('Hello World');
// This will be a blocking message pop-up before any of the viewer initialisation has started
alert('Here I am.');

Modifying the Menubar

This will be the most common use case.

// wait for the viewer to be initialised

Waiting for the Report to be finished

// wait for the viewer to be initialised
	// waiting to know whether we are online
		if ( !online ) {
			return; // Do nothing if not online