0% found this document useful (0 votes)

1K views

JasperReports Server Visualize - Js Guide

JasperReports Server Visualize.js Guide

Uploaded by

Mohamad Amin

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

1K views

JasperReports Server Visualize - Js Guide

JasperReports Server Visualize.js Guide

Uploaded by

Mohamad Amin

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 112

TIBCO JASPERREPORTS SERVER

VISUALIZE.JS GUIDE
RELEASE 6.1

http://www.jaspersoft.com

Copyright 2005-2015, TIBCO Software Inc. All rights reserved. Printed in the U.S.A. TIBCO, the TIBCO
logo, TIBCO Jaspersoft, the TIBCO Jaspersoft logo, TIBCO Jaspersoft iReport Designer, TIBCO JasperReports
Library, TIBCO JasperReports Server, TIBCO Jaspersoft OLAP, TIBCO Jaspersoft Studio, and TIBCO Jaspersoft
ETL are trademarks and/or registered trademarks of TIBCO Software Inc. in the United States and in
jurisdictions throughout the world. All other company and product names are or may be trade names or
trademarks of their respective owners.
This is version 0515-JSP61-03 of the JasperReports Server Visualize.js Guide.

TABLE OF CONTENTS
Chapter 1 API Reference - Visualize.js

1.1 Requesting the Visualize.js Script

1.2 Contents of the Visualize.js Script
1.3 Usage Patterns

7
8
9

Chapter 2 API Reference - login and logout

2.1
2.2
2.3
2.4
2.5
2.6
2.7
2.8
2.9

Authentication Properties
Login With Plain Text Credentials
Login With SSO Token
Logging Out
Login With Hooks
UI for Login/Logout
UI for Login/Logout With SSO Token
Sharing Credentials Between Calls
Using Visualize.js Without Authentication

11
13
13
14
14
15
16
16
17

Chapter 3 API Reference - resourcesSearch

3.1
3.2
3.3
3.4
3.5
3.6

Search Properties
Search Functions
Finding Resources
Reusing a Search Instance
Reusing Search Results
Discovering Available Types

Chapter 4 API Reference - report

4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9

TIBCO Software Inc.

19
21
22
23
23
23
25
25
28
31
32
33
34
35
35
36

JasperReports Server Visualize.js Guide

4.10
4.11
4.12
4.13

Exporting From a Report

Refreshing a Report
Canceling Report Execution
Discovering Available Charts and Formats

Chapter 5 API Reference - inputControls

5.1
5.2
5.3
5.4
5.5
5.6
5.7
5.8

Input Control Properties

Input Control Functions
Input Control Structure
Fetching Input Control Data
Creating Input Control Widgets
Cascading Input Controls
Reusing Input Control Instances
Reusing Input Control Data

Chapter 6 API Reference - dashboard

6.1
6.2
6.3
6.4
6.5
6.6
6.7
6.8

Dashboard Properties
Dashboard Functions
Dashboard Structure
Rendering a Dashboard
Refreshing a Dashboard
Using Dashboard Parameters
Setting Dashboard Hyperlink Options
Closing a Dashboard

Chapter 7 API Reference - Errors

7.1
7.2
7.3
7.4
7.5
7.6
7.7
7.8

Error Properties
Common Errors
Catching Initialization and Authentication Errors
Catching Search Errors
Validating Search Properties
Catching Report Errors
Catching Input Control Errors
Validating Input Controls

Chapter 8 API Usage - Report Events

8.1
8.2
8.3
8.4

Tracking Completion Status

Listening to Page Totals
Listening for the Last Page
Customizing a Report's DOM Before Rendering

Chapter 9 API Usage - Hyperlinks

9.1
9.2
9.3
9.4

36
38
39
40
43
43
44
44
45
45
46
47
47
49
49
50
52
52
53
53
56
59
61
61
62
62
63
63
64
64
65
67
67
68
68
68
71

Structure of Hyperlinks
Customizing Links
Drill-Down in Separate Containers
Accessing Data In Links

71
72
73
74

Chapter 10 API Usage - Interactive Reports

10.1 Interacting With JIVE UI Components

TIBCO Software Inc.

10.2 Changing the Chart Type

10.3 Changing the Chart Properties
10.4 Undo and Redo Actions
10.5 Sorting Table Columns
10.6 Filtering Table Columns
10.7 Formatting Table Columns
10.8 Conditional Formatting on Table Columns
10.9 Sorting Crosstab Columns
10.10 Sorting Crosstab Rows
10.11 Disabling the JIVE UI
Chapter 11 Visualize.js Tools
11.1 Checking the Scope in Visualize.js
11.2 CSS Diagnostic Tool
Index

TIBCO Software Inc.

80
82
83
85
86
88
92
93
95
96
97
97
99
107

JasperReports Server Visualize.js Guide

TIBCO Software Inc.

CHAPTER 1

API REFERENCE - VISUALIZE.JS

The JavaScript API exposed through Visualize.js allows you to embed and programmatically interact with
reports dynamically. With Visualize.js, you can create web pages and web applications that seamlessly embed
reports and complex interaction. You can control the look and feel of all elements through CSS and invent new
ways to merge data into your application. Visualize.js helps you make advanced business intelligence available
to your users.
This chapter contains the following sections:

Requesting the Visualize.js Script

Contents of the Visualize.js Script
Usage Patterns

Each function of Visualize.js is then described in the following chapters:

API Reference
API Reference
API Reference
API Reference

- login and logout

- resourcesSearch
- report
- inputControls

The last chapters demonstrate more advanced usage of Visualize.js:

1.1

API Usage - Report Events

API Usage - Hyperlinks
API Usage - Interactive Reports
Visualize.js Tools

Requesting the Visualize.js Script

The script to include on your HTML page is named visualize.js. It is located on your running instance of
JasperReports Server. Later on your page, you also need a container element to display the report from the script.

<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>
...

<div id="container"></div>

The content of visualize.js is type='text/javascript', but that is the default so you usually don't need to
include it.

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

You can specify several parameters when requesting the script:

Parameter

Type

Description

userLocale

locale string

Specify the locale to use for display and running reports. It

must be one of the locales supported by JasperReports
Server. The default is the locale configured on the server.

logEnabled

true|false

Enable or disable logging. By default, it is enabled (true).

logLevel

debug|info|warn|error

Set the logging level. By default the level is error.

baseUrl

URL

The URL of the JasperReports Server that will respond to

visualize requests. By default, it is the same server instance
that provides the script.

_opt

true|false

When true, the Javascript is optimized (reduced in size). By

default, this parameter is false.

The following request shows how to use script parameters:

1.2

Contents of the Visualize.js Script

The Visualize.js script itself is a factory function for an internal JrsClient.
/**
* Establish connection with JRS instance and generate
* ready to use client
* @param {Object} properties - configuration to connect to JRS instance
* @param {Function} callback - optional, successful callback
* @param {Function} errorback - optional, invoked on error
* @param {Function} always - optional, invoked always
* @returns {Deferred} dfd
*/
function visualize(properties, callback, errorback, always){}
/**
* Store common configuration, to share them between visualize calls
* @param {Object} properties - configuration to connect to JRS instance
*/
function visualize.config(properties);

You write JavaScript in a callback that controls what the client does. The following code sample shows the
functions of the JrsClient that are available to you:
{

/**
* Perform authentification with provided auth object
* @param auth {object} - auth properties
* @returns {Deferred} dfd

TIBCO Software Inc.

Chapter 1 API Reference - Visualize.js

*/
login : function(auth){},
/**
* Destroy current auth session
* @returns {Deferred} dfd
*/
logout : function() {},
/**
* Create and run report component with provided properties
* @param properties {object} - report properties
* @returns {Report} report - instance of Report
*/
report : function(properties){},
/**
* Create and run controls for provided controls properties
* @param properties {object} - input controls properties
* @returns {Options} inputControls instance
*
*/
inputControls : function(properties){},
/**
* Create and run resource search component for provided properties
* @param properties {object} - search properties
* @returns {Options} resourcesSearch instance
*
*/
resourcesSearch : function(properties){}
}

These functions are described in the remaining API reference chapters.

1.3

Usage Patterns
After specifying the authentication information, you write the callback that will execute inside the client
provided by visualize.js.
visualize({
server: "http://bi.example.com",
auth: {
name : "joeuser",
password: "joeuser"
}
}, function(v){
//'v' it's a client to JRS instance under
//session established for joeuser/joeuser

"http://bi.example.com"

var report = v.report(...);

}, function(err){
alert(err.message);
});

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

If you prefer, you can use the deferred pattern instead of the callback:
visualize({
server: "http://bi.example.com",
auth: {
name : "joeuser",
password: "joeuser"
}
}).done(function(v){
//'v' it's a client to JRS instance under
//session established for joeuser/joeuser

"http://bi.example.com"

var report = v.report(...);

}).fail(function(err){
alert(err.message);
});

TIBCO Software Inc.

CHAPTER 2

API REFERENCE - LOGIN AND LOGOUT

The initialization of the script sets the authentication method and credentials that you want to use for accessing
JasperReports Server. You can then use the login and logout functions to manage multiple user sessions.
This chapter contains the following sections:

2.1

Authentication Properties
The properties argument to the visualize function has all the fields for specifying various authentication
methods.
{
"oneOf": [
{
"type": "object",
"description": "Visualize main properties",
"properties": {
"server": {
"type": "string",
"description": "Url to JRS instance."
},
"auth": {
"description": "Authentication Properties",
"type": "object",
"oneOf": [
{
"properties": {
"token": {

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

"type": "string",
"description": "SSO authentication token"
},
"headers": {
"type": "object",
"description": "HTTP header parameters"
},
"queryParams": {
"type": "object",
"description": "HTTP query parameters"
}
},
"additionalProperties" : false,
"required": ["token"]
},
{
"properties": {
"name": {
"type": "string",
"description": "Name of the user to authenticate"
},
"password": {
"type": "string",
"description": "Password of the user to authenticate"
},
"organization": {
"type": "string",
"description": "Organization of the user to authenticate"
},
"timezone": {
"type": "string",
"description": "Default user timezone to use for this session"
},
"headers": {
"type": "object",
"description": "HTTP header parameters"
},
"queryParams": {
"type": "object",
"description": "HTTP query parameters"
}
},
"additionalProperties" : false,
"required": ["name", "password"]
}
]
}
},
"required": ["server", "auth"]
},
{
"$ref": "#/definitions/func"
}
],
"definitions": {
"func" : {

TIBCO Software Inc.

Chapter 2 API Reference - login and logout

"title": "Successful callback",

"type": "object"
}
}
}

There are several ways to set the user credentials, based on your environment.

2.2

Login With Plain Text Credentials

Specify the username, password, organization if required, and optional parameters in the authstructure.
visualize({
auth: {
name: "jasperadmin",
password: "jasperadmin",
organization:"organization_1",
timezone: "Europe/Helsinki"
}
}, function (v) {
...
}, function () {
alert("Unexpected error!");
});

2.3

Login With SSO Token

If you have a single-sign-on (SSO) provider implemented and have configured JasperReports Server to use it,
you can specify the SSO token for Visualize.js login. This example shows a token from a Central
Authentication Service (CAS) server.
visualize({
auth : { token : "ST-40-CZeUUnGPxEqgScNbxh9l-sso-cas.prod.jaspersoft.com"}
}, function (v){
alert("You are now logged into JasperReports Server with your SSO token.");
...
}, function(err){
alert(err.message);
});

Some SSO mechanisms require encoding, or additional parameters, or both. For example, if your server is
configured for pre-authentication, you could use the following example to authenticate from Visualize.js. Note
that the encoded fields depend on the specifics of your pre-authentication configuration:
var t = encodeURIComponent("u=John|r=Ext_User|o=organization_1|pa1=USA|pa2=1");
visualize({
auth: {
token: t,
preAuth: true,

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

tokenName: "pp"
}
}, function (v){
...
});

2.4

Logging Out
To log out and destroy the current user session, call the logout function and optionally specify any action to
take when done.
visualize({
auth: {
name: "jasperadmin",
password: "jasperadmin",
}
}, function (v) {
...
//destroy session
$("#logout").click(function () {
v.logout().done(function () {
alert("You are now logged out of JasperReports Server.");
});
});
});

2.5

Login With Hooks

If you have external authentication providers, you can invoke their login and logout URLs.
visualize({
auth: {
name: "jasperadmin",
password: "jasperadmin",
loginFn: function (properties, request) {
// Use a customLogin function to authenticate
// It must be on the same domain: 'request' works only with JRS instance
alert("Sending custom login request to 'http://bi.example.com/customLogin'");
return request({
url: "http://bi.example.com/customLogin?username=" + properties.name + "&password=" +
properties.password
});
},
logoutFn: function (properties, request) {
// Use a customLogout function to destroy the session
// It must be on the same domain: 'request' works only with JRS instance
alert("Sending custom logout request to 'http://bi.example.com/customLogout'");
return request({
url: "http://bi.example.com/customLogout"
});
}

TIBCO Software Inc.

Chapter 2 API Reference - login and logout

}
}, function (v) {
...
});

2.6

UI for Login/Logout
You can define IDs (#name) with listeners that perform login and logout functions. In your HTML, you can then
assign these IDs to the appropriate buttons or links.
visualize(
function(v){
$("#selected_resource").change(function () {
$("#container").html("");
createReport($("#selected_resource").val(), v);
});
$("#login").click(function(){
v.login(getAuthData()).done(function(){
createReport($("#selected_resource").val(),v);
showMessage(".success");
}).fail(function(){showMessage(".error");});
});
$("#logout").click(function(){
v.logout().done(function(){showMessage(".logout");});
});
$(':disabled').prop('disabled', false);
}
);
//create and render report to specific container
function createReport(uri, v) {
v("#container").report({
resource: uri,
error: function (err) {
alert(err.message);
}
});
};
function showMessage(selector){
$(".message").hide();
$(selector).show();
};
function getAuthData(){
return {name: $("#j_username").val(),
password: $("#j_password").val(),
organization:$("#orgId").val(),
locale:$("#userLocale").val(),
timezone:$("#userTimezone").val()
}
};

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

2.7

UI for Login/Logout With SSO Token

The code is slightly different if you have a login/logout UI and use SSO tokens. Note that the logout uses the
.always event instead of .done.
visualize(
function(v){
$("#selected_resource").change(function () {
$("#container").html("");
createReport($("#selected_resource").val(), v);
});
$("#login").click(function(){
v.login(getAuthData()).done(function(){
createReport($("#selected_resource").val(),v);
showMessage(".success");
}).fail(function(){showMessage(".error");});
});
$("#logout").click(function(){
v.logout().always(function(){showMessage(".logout");});
});
$(':disabled').prop('disabled', false);
}
);
//create and render report to specific container
function createReport(uri, v) {
v("#container").report({
resource: uri,
error: function (err) {
alert(err.message);
}
});
};
function showMessage(selector){
$(".message").hide();
$(selector).show();
};
function getAuthData(){
return {token: $("#token").val()};
};

2.8

Sharing Credentials Between Calls

Use the visualize.config function to define and store authentication credentials. It uses the same auth
structure as the visualize function. You can then create several containers with separate calls to visualize,
but using the common credentials.
visualize.config({
auth: {
name: "jasperadmin",
password: "jasperadmin",

TIBCO Software Inc.

Chapter 2 API Reference - login and logout

organization:"organization_1",
timezone: "Europe/Helsinki"
}
});
visualize(function (v) {
v("#container1").report({
resource: "/public/Samples/Reports/06g.ProfitDetailReport",
error: function (err) {
alert(err.message);
}
});
});
visualize(function (v) {
v("#container2").report({
resource: "/public/Samples/Reports/State_Performance",
error: function (err) {
alert(err.message);
}
});
});

2.9

Using Visualize.js Without Authentication

Internally, Visualize.js uses the REST API to authenticate and interact with the server. However, the REST
client receives and reuses the JSESSIONID cookie that identifies it as authenticated, which is also the same
cookie used in regular browser clients. Therefore, users who access the JasperReports Server web app UI and use
the same browser to run a visualize.js client before their session expires don't need to authenticate in
visualize.js.
If your visualize.js solution includes other browser windows or other authenticated REST calls, then you can
simplify your visualize.js and remove the authentication:
// This assumes that authentification was made somehow prior
visualize(function (v) {
//do what you usally do with 'v'
console.log(v);
});

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

TIBCO Software Inc.

CHAPTER 3

API REFERENCE - RESOURCESSEARCH

The resourcesSearch function performs searches in the repository to find content that can be displayed by
visualize.js.
This chapter contains the following sections:

3.1

Search Properties
Search Functions
Finding Resources
Reusing a Search Instance
Reusing Search Results
Discovering Available Types

Search Properties
The properties structure passed to the resourcesSearch function is defined as follows:
{
"type": "object",
"properties": {
"server": {
"type": "string",
"description": "Url to JRS instance."
},
"q": {
"type": "string",
"description": "Query string. Search for occurrence in label or description of resource."
},
"folderUri": {
"type": "string",
"description": "Parent folder URI.",
"pattern": "^/\\w*(/\\w+)*$"
},
"type": {
"type": "string",
"description": "Type of resources to search.",

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

"enum": [
"folder", "dataType", "jdbcDataSource", "awsDataSource", "jndiJdbcDataSource",
"virtualDataSource", "customDataSource", "beanDataSource", "xmlaConnection",
"listOfValues", "file", "reportOptions", "dashboard", "adhocDataView",
"query", "olapUnit", "reportUnit", "domainTopic", "semanticLayerDataSource",
"secureMondrianConnection", "mondrianXmlaDefinition", "mondrianConnection",
"inputControl"
]
},
"offset": {
"type": "integer",
"description": "Pagination. Index of first resource to show.",
"minimum": 0
},
"limit": {
"type": "integer",
"description": "Pagination. Resources count per page.",
"minimum": 0
},
"recursive": {
"type": "boolean",
"description": "Flag indicates if search should be recursive."
},
"sortBy": {
"type": "string",
"description": "Field to sort on.",
"enum": [
"uri",
"label",
"description",
"type",
"creationDate",
"updateDate",
"accessTime",
"popularity"
]
},
"accessType": {
"type": "string",
"description": "Filtering by type of access, e.g. what was done with resource.",
"enum": [
"viewed",
"modified"
]
},
"showHiddenItems": {
"type": "boolean",
"description": "Flag indicates if hidden items should present in results."
},
"forceTotalCount": {
"type": "boolean",
"description": "If true, Total-Count header is always set (impact on performance),
otherwise - in first page only"
}
},
"required": ["server"]
}

TIBCO Software Inc.

Chapter 3 API Reference - resourcesSearch

3.2

Search Functions
The resourcesSearch function exposes the following functions:
define(function () {
/**
* Constructor. Takes context as argument.
* @param contextObj - map of properties.
*/
function ResourcesSearch(contextObj){};
/**
* Get/Set 'q' parameter of the query
* @param contextObj - map of properties.
* @returns this if 'value' sent to the method,
*
otherwise returns current value of the parameter
*/
ResourcesSearch.prototype.q= function(value){};
/**
* Get/Set 'folderUri' parameter of the query
* @param value - new value, optional
* @returns this if 'value' sent to the method,
*
otherwise returns current value of the parameter
*/
ResourcesSearch.prototype.folderUri= function(value){};
/**
* Get/Set 'type' parameter of the query
* @param value - new value, optional
* @returns this if 'value' sent to the method,
*
otherwise returns current value of the parameter
*/
ResourcesSearch.prototype.type= function(value){};
/**
* Get/Set 'offset' parameter of the query
* @param value - new value, optional
* @returns this if 'value' sent to the method,
*
otherwise returns current value of the parameter
*/
ResourcesSearch.prototype.offset= function(value){};
/**
* Get/Set 'limit' parameter of the query
* @param value - new value, optional
* @returns this if 'value' sent to the method,
*
otherwise returns current value of the parameter
*/
ResourcesSearch.prototype.limit= function(value){};

/**
* Get/Set 'recursive' parameter of the query
* @param value - new value, optional
* @returns this if 'value' sent to the method,
*
otherwise returns current value of the parameter

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

*/
ResourcesSearch.prototype.recursive= function(value){};
/**
* Get/Set 'sortBy' parameter of the query
* @param value - new value, optional
* @returns this if 'value' sent to the method,
*
otherwise returns current value of the parameter
*/
ResourcesSearch.prototype.sortBy= function(value){};
/**
* Get/Set 'accessType' parameter of the query
* @param value - new value, optional
* @returns this if 'value' sent to the method,
*
otherwise returns current value of the parameter
*/
ResourcesSearch.prototype.accessType= function(value){};
/**
* Get/Set 'showHiddenItems' parameter of the query
* @param value - new value, optional
* @returns this if 'value' sent to the method,
*
otherwise returns current value of the parameter
*/
ResourcesSearch.prototype.showHiddenItems= function(value){};
/**
* Get/Set 'forceTotalCount' parameter of the query
* @param value - new value, optional
* @returns this if 'value' sent to the method,
*
otherwise returns current value of the parameter
*/
ResourcesSearch.prototype.forceTotalCount= function(value){};
return ResourcesSearch;
});

3.3

Finding Resources
The following code examples show two different ways of handling results after making a simple repository
search in the Public folder.
new ResourcesSearch({
server:"http://localhost:8080/jasperserver-pro",
folderUri: "/public",
recursive: false
})).run(function(resourceLookups){
// results here
});

var search = v.resourcesSearch({

folderUri: "/public",

TIBCO Software Inc.

Chapter 3 API Reference - resourcesSearch

recursive: false
success: function(repo) {
console.log(repo.data()); // resourceLookups
}
});

3.4

Reusing a Search Instance

If you make multiple searches, for example in different folders, you can create a function to do that using the
ResourcesSearch function.
var folderContentQuery = new ResourcesSearch({
server:"http://localhost:8080/jasperserver-pro",
recursive: false
}));
// call 1
folderContentQuery.folderUri("/uri1").run(doSomethingWithResultFunction);
...
// call 2 after some time
folderContentQuery.folderUri("/uri2").run(doSomethingWithResultFunction);

3.5

Reusing Search Results

Code example:
var call = new ResourcesSearch({
server:"http://localhost:8080/jasperserver-pro",
folderUri: "/public",
recursive: false
})).run(function(resourceLookups){
// data() available here
});
// at this point call.data() will return null until the run callback is called.
call.data() === null // -> true
.....
// if some data was obtained earlier, it accessible via data()
var resourceLookups = call.data();

3.6

Discovering Available Types

You can write code to discover and display the types that can be searched and types of sorting that can be
specified.
visualize({
auth: {
name: "jasperadmin",
password: "jasperadmin",

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

organization: "organization_1"
}
}, function (v) {
buildControl("Resources types", v.resourcesSearch.types);
buildControl("Resources search sort types", v.resourcesSearch.sortBy);
});
function buildControl(name, options) {
function buildOptions(options) {
var template = "<option>{value}</option>";
return options.reduce(function (memo, option) {
return memo + template.replace("{value}", option);
}, "")
}
console.log(options);
if (!options.length){
console.log(options);
}
var template = "<label>{label}</label><select>{options}</select><br>",
content = template.replace("{label}", name)
.replace("{options}", buildOptions(options));
$("#container").append($(content));
}

TIBCO Software Inc.

CHAPTER 4

API REFERENCE - REPORT

The report function runs reports on JasperReports Server and displays the result in a container that you
provide.
This chapter contains the following sections:

4.1

Report Properties
Report Functions
Report Structure
Rendering a Report
Setting Report Parameters
Rendering Multiple Reports
Setting Report Pagination
Creating Pagination Controls (Next/Previous)
Creating Pagination Controls (Range)
Exporting From a Report
Refreshing a Report
Canceling Report Execution
Discovering Available Charts and Formats

Report Properties
The properties structure passed to the report function is defined as follows:
{
"title": "Report Properties",
"description": "A JSON Schema describing a Report Properties",
"$schema": "http://json-schema.org/draft-04/schema#",
"type": "object",
"properties": {
"server": {
"type": "string",
"description": "URL of JRS instance."
},
"resource": {
"type": "string",
"description": "Report resource URI.",

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

"pattern": "^/[^/~!#\\$%^|\\s`@&*()\\+={}\\[\\]:;\"'<>,?/\\|\\\\]+(/[^/~!#\\$%^|\\s`@&*()
\\+={}\\[\\]:;\"'<>,?/\\|\\\\]+)*$"
},
"container": {
"type": "string",
"description": "CSS selector for container to render report to."
},
"params": {
"$ref": "#/definitions/params"
},
"pages": {
"type": ["string", "integer"],
"description": "Range of report's pages or single report page",
"pattern": "^\\d+(\\-\\d+)?$",
"default": 1
},
"linkOptions": {
"type": "object",
"description": "Customization for report's links",
"properties": {
"beforeRender": {
"$ref": "#/definitions/Function",
"description": "Allows to change any link representation before report would be
rendered"
},
"events": {
"$ref": "#/definitions/eventsMapper",
"description": "Allow to add listener by specific events to links representations
by link name"
}
}
},
"defaultJiveUi" : {
"type": "object",
"description": "Control default JIVE UI in report",
"properties": {
"enabled": {
"type": "boolean",
"default": false
},
"onError":{
"$ref": "#/definitions/Function",
"description": "Jive UI error listener"
}
}
},
"isolateDom": {
"type": "boolean",
"description": "Isolate report's DOM from third-party page CSS. Can't be set while default
JIVE UI is enabled",
"default": false
}
},
"required": ["server", "resource"],
"definitions": {
"params": {

TIBCO Software Inc.

Chapter 4 API Reference - report

"type": "object",
"description": "Report's parameters values",
"additionalProperties": {
"type": "array"
}
},
"ExportOptions": {
"title": "Report export options",
"type": "object",
"properties": {
"outputFormat": {
"enum": [
"pdf",
"xlsx",
"xls",
"rtf",
"csv",
"xml",
"odt",
"ods",
"docx"
]
},
"pages": {
"type": ["string", "integer"],
"description": "Exports all pages if this property was not specified. Range of
report's pages or single report page",
"pattern": "^\\d+(\\-\\d+)?$"
},
"paginated": {
"type": "boolean",
"description": "Control 'pagination' feature. Only 'xls' and 'xlsx' support it",
"default": "false"
}
},
"required": ["outputFormat"]
},
"Function": {
"type": "object",
"description": "JavaScript Function"
},
"eventsMapper": {
"type": "object",
"description": "Map events by name to user defined handler. For example: 'click',
'focus', etc ",
"additionalProperties": {
"$ref": "#/definitions/Function"
}
},
"chartComponent": {
"description": "JIVE chart component schema",
"properties": {
"id": {
"type": "string",
"description": "Chart component identifier"

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

},
"componentType": {
"enum": ["chart"]
},
"chartType": {
"description": "Special chart's type",
"enum": [
"Bar", "Column", "Line", "Area", "Spline",
"AreaSpline", "StackedBar", "StackedColumn", "StackedLine", "StackedArea",
"StackedSpline", "StackedAreaSpline", "StackedPercentBar",
"StackedPercentColumn", "StackedPercentLine", "StackedPercentArea",
"StackedPercentSpline", "StackedPercentAreaSpline", "Pie", "DualLevelPie",
"TimeSeriesLine", "TimeSeriesArea", "TimeSeriesSpline",
"TimeSeriesAreaSpline", "ColumnLine", "ColumnSpline", "StackedColumnLine",
"StackedColumnSpline", "MultiAxisLine", "MultiAxisSpline", "MultiAxisColumn",
"Scatter", "Bubble", "SpiderColumn", "SpiderLine", "SpiderArea"
]
}
},
"required": ["id"]
}
}
}

4.2

Report Functions
The report function exposes the following functions:
define(function () {
/**
* @param {Object} properties - report properties
* @constructor
*/
function Report(properties){}
/**
* Setters and Getters are functions around
* schema for bi component at ./schema/ReportSchema.json
* Each setter returns pointer to 'this' to provide chainable API
*/
//Special

getters

/**
* Get any result after invoking run action, 'null' by default
* @returns any data which supported by this bi component
*/
Report.prototype.data = function(){};
// Special setters
/**
* Attaches event handlers to some specific events.
* New events overwrite old ones.

TIBCO Software Inc.

Chapter 4 API Reference - report

* @param {Object} events - object containing event names as keys and event handlers as values
* @return {Report} report - current Report instance (allows chaining)
*/
Report.prototype.events = function(events){};
//Actions
/**
* Perform main action for bi component
* Callbacks will be attached to deferred object.
*
* @param {Function} callback - optional, invoked in case of successful run
* @param {Function} errorback - optional, invoked in case of failed run
* @param {Function} always - optional, invoked always
* @return {Deferred} dfd
*/
Report.prototype.run = function(callback, errorback, always){};
/**
* Render report to container, previously specified in property.
* Clean up all content of container before adding Report's content
* @param {Function} callback - optional, invoked in case successful export
* @param {Function} errorback - optional, invoked in case of failed export
* @param {Function} always - optional, optional, invoked always
* @return {Deferred} dfd
*/
Report.prototype.render = function(callback, errorback, always){};
/**
* Cancel report execution
* @param {Function} callback - optional, invoked in case of successful cancel
* @param {Function} errorback - optional, invoked in case of failed cancel
* @param {Function} always - optional, invoked optional, invoked always
* @return {Deferred} dfd
*/
Report.prototype.cancel = function(callback, errorback, always){};

/**
* Update report's component
* @param {Object} component - jive component to update, should have id field
* @param {Function} callback - optional, invoked in case of successful update
* @param {Function} errorback - optional, invoked in case of failed update
* @param {Function} always - optional, invoked optional, invoked always
* @return {Deferred} dfd
*/
Report.prototype.updateComponent = function(component, callback, errorback, always){};
/**
* Update
* @param
* @param
* @param
* @param
* @param

TIBCO Software Inc.

report's component
{String} id - jive component id
{Object} properties - jive component's properties to update
{Function} callback - optional, invoked in case of successful update
{Function} errorback - optional, invoked in case of failed update
{Function} always - optional, invoked optional, invoked always

JasperReports Server Visualize.js Guide

* @return{Deferred} dfd
*/
Report.prototype.updateComponent = function(id, properties, callback, errorback, always){};
/**
* Undo previous JIVE component update
* @param {Function} callback - optional, invoked in case of successful update
* @param {Function} errorback - optional, invoked in case of failed update
* @param {Function} always - optional, invoked optional, invoked always
* @return{Deferred} dfd
*/
Report.prototype.undo = function(callback, errorback, always){};
/**
* Reset report to initial state
* @param {Function} callback - optional, invoked in case of successful update
* @param {Function} errorback - optional, invoked in case of failed update
* @param {Function} always - optional, invoked optional, invoked always
* @return{Deferred} dfd
*/
Report.prototype.undoAll = function(callback, errorback, always){};
/**
* Redo next JIVE component update
* @param {Function} callback - optional, invoked in case of successful update
* @param {Function} errorback - optional, invoked in case of failed update
* @param {Function} always - optional, invoked optional, invoked always
* @return{Deferred} dfd
*/
Report.prototype.redo = function(callback, errorback, always){};
/**
* Export report to specific format, execute only after report run action is finished
* @param {ExportOptions} exportOptions - export options
* @param {Function} callback - optional, invoked with link object
* @param {Function} errorback - optional, invoked in case of failed export
* @param {Function} always - optional, invoked optional, invoked always
* @return{Deferred} dfd
*/
Report.prototype.export = function(exportOptions, callback, errorback, always){};
/**
* Cancel all execution, destroy report representation if any, leave only
* properties
* @param {Function} callback - optional, invoked in case of successful cleanup
* @param {Function} errorback - optional, invoked in case of failed cleanup
* @param {Function} always - optional, invoked optional, invoked always
* @return {Deferred} dfd
*/
Report.prototype.destroy = function(callback, errorback, always){};
return Report;
});

TIBCO Software Inc.

Chapter 4 API Reference - report

4.3

Report Structure
The Report Data structure represents the rendered report object manipulated by the report function. Even though
it is named "data," it does not contain report data, but rather the data about the report. For example, the Report
Data structure contains information about the links in the report, as explained in Customizing Links on
page72, and components of the JIVE UI, as explained in Interacting With JIVE UI Components on
page77.
{
"title": "Report Data",
"description": "A JSON Schema describing a Report Data",
"$schema": "http://json-schema.org/draft-04/schema#",
"type": "object",
"properties": {
"totalPages": {
"type": "number",
"description": "Report's page total count"
},
"links": {
"type": "array",
"description": "Links extracted from markup, so their quantity depends from pages you have
requested",
"items": {
"$ref": "#/definitions/jrLink"
}
},
"components": {
"type": "array",
"description": "Components in report, their quantity depends from pages you have
requested",
"items": {
"type": "object",
"description": "JIVE components data"
}
}
},
"definitions": {
"jrLink": {
"title": "JR Hyperlink",
"type": "object",
"properties": {
"type": {
"oneOf": [
{
"$ref": "#/definitions/linkTypeReference"
},
{
"$ref": "#/definitions/linkTypeReportExecution"
}
]
},
"tooltip": {
"type": "string",
"description": "Hyperlink tooltip"
},
"href": {

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

"type": "string",
"description": "Hyperlink reference"
},
"parameters": {
"type": "object"
}
},
"required": ["type"],
"definitions": {
"linkTypeReference": {
"enum": ["Reference"],
"description": "The hyperlink points to an external resource."
},
"linkTypeReportExecution": {
"enum": ["ReportExecution"],
"description": "The hyperlink points to JR report"
}
}
}
}
}

4.4

Rendering a Report
To run a report on the server and render it in Visualize.js, create a report object and set its properties. The server
and resource properties determine which report to run, and the container property determines where it appears on
your page.
var report = v.report({
server: "http://bi.example.com:8080/jasperserver-pro",
resource: "/public/Sample/MyReport",
container: "#container"
});

The following code example shows how to display a report that the user selects from a list.
visualize({
auth: { ...
}
}, function (v) {
//render report from provided resource
v("#container").report({
resource: $("#selected_resource").val(),
error: handleError
});
$("#selected_resource").change(function () {
//clean container
$("#container").html("");
//render report from another resource
v("#container").report({
resource: $("#selected_resource").val(),
error:handleError

TIBCO Software Inc.

Chapter 4 API Reference - report

});
});
//enable report chooser
$(':disabled').prop('disabled', false);
//show error
function handleError(err){
alert(err.message);
}
});

The HTML page that displays the report uses a static list of reports in a drop-down selector, but otherwise needs
only a container element.

<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>
<select id="selected_resource" disabled="true" name="report">
<option value="/public/Samples/Reports/1._Geographic_Results_by_Segment_Report">Geographic Results
by Segment</option>
<option value="/public/Samples/Reports/2_Sales_Mix_by_Demographic_Report">Sales Mix by
Demographic</option>
<option value="/public/Samples/Reports/3_Store_Segment_Performance_Report">Store Segment
Performance</option>
<option value="/public/Samples/Reports/04._Product_Results_by_Store_Type_Report">Product Results
by Store Type</option>
</select>

<div id="container"></div>

4.5

Setting Report Parameters

To set or change the parameter values, update the params object of the report properties and invoke the run
function again.
// update report with new parameters
report
.params({ "Country": ["USA"] })
.run();
...
// later in code
console.log(report.params()); // console log output: {"Country": ["USA"] }

If a report has required parameters, you must set them in the report object of the initial call, otherwise you'll get
an error. For more information, see Catching Report Errors on page64.
The example above is trivial, but the power of Visualize.js comes from this simple code. You can create any
number of user interfaces, database lookups, or your own calculations to provide the values of parameters. Your
parameters could be based on 3rd party API calls that get triggered from other parts of the page or other pages in
your app. When your reports can respond to dynamic events, they become truly embedded and much more
relevant to the user.

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

4.6

Rendering Multiple Reports

JavaScript Example:
visualize({
auth: { ...
}
}, function (v) {
var reportsToLoad = [
"/public/Samples/Reports/AllAccounts",
"/public/Samples/Reports/01._Geographic_Results_by_Segment_Report",
"/public/Samples/Reports/Cascading_Report_2_Updated",
"/public/Samples/Reports/07g.RevenueDetailReport"
];
$.each(reportsToLoad, function (index, uri) {
var container = "#container" + (index + 1);
v(container).report({
resource: uri,
success: function () {
console.log("loaded: " + (index + 1));
},
error: function (err) {
alert(err.message);
}
});
});
});

Associated HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>
<table class="sample">
<tr>
<td id="container1"></td>
<td id="container2"></td>
</tr>
<tr>
<td id="container3"></td>
<td id="container4"></td>
</tr>
</table>

Associated CSS:
html, body {
}
table.sample {
width: 100%;
}
td#c1, td#c2, td#c3, td#c4 {
width: 50%;
}

TIBCO Software Inc.

Chapter 4 API Reference - report

4.7

Setting Report Pagination

To set or change the pages of the report that are displayed, update the pages object of the report properties and
invoke the run function again.
report
.pages(5)
.run(); // re-render report with page 5 into the same container
report
.pages("2") // string is also allowed
.run();
report
.pages("4-6") // a range of numbers in a string is also possible
.run();

4.8

Creating Pagination Controls (Next/Previous)

Again, the power of Visualize.js comes from these simple controls that you can access programmatically. You
can create any sort of mechanism or user interface to select the page. In this example, the HTML has buttons
that allow the user to choose the next or previous pages.
visualize({
auth: { ...
}
}, function (v) {
var report = v.report({
resource: "/public/Samples/Reports/AllAccounts",
container: "#container"
});
$("#previousPage").click(function() {
var currentPage = report.pages() || 1;
report
.pages(--currentPage)
.run()
.fail(function(err) { alert(err); });
});
$("#nextPage").click(function() {
var currentPage = report.pages() || 1;
report
.pages(++currentPage)
.run()
.fail(function(err) { alert(err); });
});
});

Associated HTML:

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

4.9

Creating Pagination Controls (Range)

JavaScript Example:
visualize({
auth: { ...
}
}, function (v) {
var report = v.report({
resource: "/public/Samples/Reports/AllAccounts",
container: "#container"
});
$("#pageRange").change(function() {
report
.pages($(this).val())
.run()
.fail(function(err) { alert(err); });
});
});

Associated HTML:
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>
Page range: <input type="text" id="pageRange"></input>
<div id="container"></div>

4.10 Exporting From a Report

To export a report, invoke its export function and specify the outputFormat property. You MUST wait until
the run action has completed before starting the export. The following export formats are supported:
"pdf", "xlsx", "xls", "rtf", "csv", "xml", "odt", "ods", "docx"
report.run(exportToPdf);
function exportToPdf() {
report
.export({
outputFormat: "pdf"
})
.done(function (link) {

TIBCO Software Inc.

Chapter 4 API Reference - report

window.open(link.href); // open new window to download report

})
.fail(function (err) {
alert(err.message);
});
}

The following sample exports 10 pages of the report to a paginated Excel spreadsheet:
report.run(exportToPaginatedExcel);
function exportToPaginatedExcel() {
report
.export({
outputFormat: "xls",
pages: "1-10",
paginated: true
})
.done(function(link){
window.open(link.href); // open new window to download report
})
.fail(function(err){
alert(err.message);
});
}

The following example creates a user interface for exporting a report:

visualize({
auth: { ...
}
}, function (v) {
var $select = buildControl("Export to: ", v.report.exportFormats),
$button = $("#button"),
report = v.report({
resource: "/public/Samples/Reports/5g.AccountsReport",
container: "#container",
success: function () {
button.removeAttribute("disabled");
},
error: function (error) {
console.log(error);
}
});
$button.click(function () {
console.log($select.val());
report.export({
//export options here
outputFormat: $select.val(),

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

//exports all pages if not specified

//pages: "1-2"
}, function (link) {
var url = link.href ? link.href : link;
window.location.href = url;
}, function (error) {
console.log(error);
});
});
function buildControl(name, options) {
function buildOptions(options) {
var template = "<option>{value}</option>";
return options.reduce(function (memo, option) {
return memo + template.replace("{value}", option);
}, "")
}
var template = "<label>{label}</label><select>{options}</select><br>",
content = template.replace("{label}", name)
.replace("{options}", buildOptions(options));
var $control = $(content);
$control.insertBefore($("#button"));
//return select
return $($control[1]);
}
});

Associated HTML:
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>

<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>
<button id="button" disabled>Export</button>

<div id="container"></div>

4.11 Refreshing a Report

JavaScript Example:
visualize({
auth: { ...
}
}, function (v) {
var alwasyRefresh = false;
var report = v.report({
//skip report running during initialization

TIBCO Software Inc.

Chapter 4 API Reference - report

runImmediately: !alwasyRefresh,
resource: "/public/viz/usersReport",
container: "#container1",
});
if (alwasyRefresh){
report.refresh();
}
$("button").click(function(){
report
.refresh()
.done(function(){console.log("Report Refreshed!");})
.fail(function(){alert("Report Refresh Failed!");});
});
});

Associated HTML:
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>
<button>Refresh</button>
<div id="container1"></div>

4.12 Canceling Report Execution

To stop a report that is executing, call its cancel function:
...
report
.cancel()
.done(function(){
alert("Report Canceled");
})
.fail(function(){
alert("Report Failed");
});

The following example is more complete and creates a UI for a spinner and cancel button for a long-running
report.
var spinner = createSpinner();
visualize({
auth: { ...
}
}, function (v) {
var button = $("button");
var report = v.report({

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

resource: "/public/Reports/Slow_Report",
container: "#container",
events: {
changeTotalPages : function(){
spinner.remove();
}
}
});
button.click(function () {
report
.cancel()
.then(function () {
spinner.remove();
alert("Report Canceled!");
})
.fail(function () {
alert("Can't Cancel Report");
});
});
});
function createSpinner() {
var opts = {
lines: 17, length: 3, width: 2, radius: 3, corners: 0.6, rotate: 0, direction: 1,
color: '#000', speed: 1, trail: 60, shadow: false, hwaccel: false, zIndex: 2e9,
top: 'auto', left: 'auto', className: 'spinner'
};
var container = $("#spinner");
var spinner = new Spinner(opts).spin(container[0]);
return container;
}

Associated HTML:
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://fgnass.github.io/spin.js/spin.js"></script>
<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>
<div id="spinner"></div>
<button>Cancel</button>
<div id="container"></div>

4.13 Discovering Available Charts and Formats

You can write code to discover and display the types of charts and export formats that can be specified.
visualize({
auth: {
name: "jasperadmin",
password: "jasperadmin",
organization: "organization_1"
}
}, function (v) {

TIBCO Software Inc.

Chapter 4 API Reference - report

buildControl("Chart types", v.report.chart.types);

buildControl("Report export formats", v.report.exportFormats);
buildControl("Report table column types", v.report.table.column.types);
});
function buildControl(name, options) {
function buildOptions(options) {
var template = "<option>{value}</option>";
return options.reduce(function (memo, option) {
return memo + template.replace("{value}", option);
}, "")
}
console.log(options);
if (!options.length){
console.log(options);
}
var template = "<label>{label}</label><select>{options}</select><br>",
content = template.replace("{label}", name)
.replace("{options}", buildOptions(options));
$("#container").append($(content));
}

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

TIBCO Software Inc.

CHAPTER 5

API REFERENCE - INPUTCONTROLS

The inputControls function prepares and displays input controls for reports that your users interact with.
This chapter contains the following sections:

5.1

Input Control Properties

Input Control Functions
Input Control Structure
Fetching Input Control Data
Creating Input Control Widgets
Cascading Input Controls
Reusing Input Control Instances
Reusing Input Control Data

Input Control Properties

The properties structure passed to the inputControls function is defined as follows:
{
"type": "object",
"properties": {
"server": {
"type": "string",
"description": "Url to JRS instance."
},
"resource": {
"type": "string",
"description": "URI of resource with input controls.",
"pattern": "^/\\w*(/\\w+)*$"
},
"params": {
"type": "object",
"description": "Parameters for input controls.",
"additionalProperties": {
"type": "array"
}
}
},
"required": ["server", "resource"]
}

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

5.2

Input Control Functions

The InputControls function exposes the following functions:
define(function () {
/**
* Constructor. Takes properties as argument.
* @param properties - map of properties.
*/
function InputControls(properties){};
/**
* Get/Set 'resource' property - URI of resource with input controls.
* @param value - new value, optional
* @returns this if 'value' sent to the method,
*
otherwise returns current value of the parameter
*/
InputControls.prototype.resource = function(value){};
/**
* Get/Set 'params' property - Parameters for input controls.
* @param value - new value, optional
* @returns this if 'value' sent to the method,
*
otherwise returns current value of the parameter
*/
InputControls.prototype.params = function(value){};
return InputControls;
});

5.3

Input Control Structure

InputControls data() is an array of InputControl objects, with the structure shown in this example:
[
{
"id":"Cascading_name_single_select",
"label":"Cascading name single select",
"mandatory":"true",
"readOnly":"false",
"type":"singleSelect",
"uri":"repo:/reports/samples/Cascading_multi_select_report_files/Cascading_name_single_select",
"visible":"true",
"masterDependencies": {
"controlId": [
"Country_multi_select",
"Cascading_state_multi_select"
]
},
"slaveDependencies":null,
"validationRules": [
{
"mandatoryValidationRule" : {
"errorMessage" : "This field is mandatory so you must enter data."

TIBCO Software Inc.

Chapter 5 API Reference - inputControls

}
}
],
"state": {
"uri": "/reports/samples/Cascading_multi_select_report_files/Cascading_name_single_select",
"id": "Cascading_name_single_select",
"value": null,
"options": [
{
"selected": false,
"label": "A & U Jaramillo Telecommunications, Inc",
"value": "A & U Jaramillo Telecommunications, Inc"
}
]
}
},
....
]

5.4

Fetching Input Control Data

The data being output here has the input control structure shown in the previous section:
visualize(function(v){
var ic = v.inputControls({
resource: "/public/ReportWithControls",
success: function(data) {
console.log(data);
}
});
});

This example shows an alternate way of fetching input controls:

(new InputControls({
server: "http://localhost:8080/jasperserver-pro",
resource: "/public/my_report",
params: {
"Country_multi_select":["Mexico"],
"Cascading_state_multi_select":["Guerrero", "Sinaloa"]
}
})).run(function(inputControlsArray){
// results here
})

5.5

Creating Input Control Widgets

This example retrieves the input controls of a report and parses the structure to create drop-down option menus
of values for each control:

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

visualize({
auth: {
name: "superuser",
password: "superuser"
}
},function(v) {
v.inputControls({
resource: "/public/Samples/Reports/16g.InteractiveSalesReport",
success: function (controls) {
controls.forEach(buildControl);
},
error: function (err) {
alert(err);
}
});
function buildControl(control) {
function buildOptions(options) {
var template = "<option>{value}</option>";
return options.reduce(function (memo, option) {
return memo + template.replace("{value}", option.value);
}, "")
}
var template = "<label>{label}</label><select>{options}</select><br>",
content = template.replace("{label}", control.label)
.replace("{options}", buildOptions(control.state.options));
$("#container").append($(content));
}
});

5.6

Cascading Input Controls

In order to implement cascading input controls, you must implement a change listener on the parent control and
use it to trigger an update on the dependent control:
var reportUri = "/public/Samples/Reports/Cascading_Report_2_Updated";
visualize({
auth: {
name: "superuser",
password: "superuser"
}
}, function (v) {
var inputControls = v.inputControls({
resource: reportUri,
success: renderInputControls
});
var report = v.report({ resource: reportUri, container: "#container" });

TIBCO Software Inc.

Chapter 5 API Reference - inputControls

$("#productFamilySelector").on("change", function() {
report.params({ "Product_Family": [$(this).val()] }).run();
});
});
function renderInputControls(data) {
var productFamilyInputControl = _.findWhere(data, {id: "Product_Family"});
var select = $("#productFamilySelector");
_.each(productFamilyInputControl.state.options, function(option) {
select.append("<option " + (option.selected ? "selected" : "") + " value='" +
option.value + "'>" + option.label + "</option>");
});
}

5.7

Reusing Input Control Instances

Input controls are meant to be dynamic and modified by users. By using the inputControls.params function, you
can update the values of input controls and then update the corresponding report.
var inputControls = new InputControls({
server: "http://localhost:8080/jasperserver-pro",
resource: "/public/my_report"
});
// call 1
inputControls.params({ "Country_multi_select": ["Mexico"] }).run(doSomethingWithResultFunction);
...
// call 2 after some time
inputControls.params({ "Country_multi_select": ["USA"] }).run(doSomethingWithResultFunction);

5.8

Reusing Input Control Data

It is possible to store the data from the inputControls function and access the data() structure at a later time:
var call = (new InputControls({
server: "http://localhost:8080/jasperserver-pro",
resource: "/public/my_report"
})).run(function(inputControlsArray){
// data() available here
});
// at this point call.data() will return null until the run callback is called.
call.data() === null // -> true
...

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

// if some data was obtained earlier, it accessible via data()

var inputControlsArray = call.data();

TIBCO Software Inc.

CHAPTER 6

API REFERENCE - DASHBOARD

The dashboard function runs dashboards on JasperReports Server and displays the result in a container that you
provide. Dashboards are a collection of reports and widgets that you design on the server. Dashboards were
entirely redesigned in JasperReports Server 6.0 to provide stunning data displays and seamless integration
through Visualize.js.
This chapter contains the following sections:

6.1

Dashboard Properties
Dashboard Functions
Dashboard Structure
Rendering a Dashboard
Refreshing a Dashboard
Using Dashboard Parameters
Setting Dashboard Hyperlink Options
Closing a Dashboard

Dashboard Properties
The properties structure passed to the dashboard function is defined as follows:
{
"title": "Dashboard Properties",
"type": "object",
"description": "JSON Schema describing Dashboard Properties",
"$schema": "http://json-schema.org/draft-04/schema#",
"properties": {
"server": {
"type": "string",
"description": "URL of JRS instance"
},
"resource": {
"type": "string",
"description": "Dashboard resource URI",
"pattern": "^/[^/~!#\\$%^|\\s`@&*()\\+={}\\[\\]:;\"'<>,?/\\|\\\\]+(/[^/~!#\\$%^|\\s`@&*()
\\+={}\\[\\]:;\"'<>,?/\\|\\\\]+)*$"
},

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

"container": {
"oneOf": [
{
"type": "object",
"additionalProperties" : true,
"description": "DOM element to render report to"
},
{
"type": "string",
"description": "CSS selector for container to render report to"
}
]
},
"linkOptions": {
"type": "object",
"description": "Dashboard's parameters values",
"properties": {
"beforeRender": {
"type": "function",
"description": "A function to process link - link element pairs."
},
"events": {
"type": "object",
"description": "Backbone-like events object to be applied to JR links",
"additionalProperties" : true
}
}
},
"params": {
"type": "object",
"description": "Dashboard parameter values",
"additionalProperties": {
"type": "array"
}
}
},
"required": ["server", "resource"]
}

6.2

Dashboard Functions
The dashboard function exposes the following functions:
define(function () {
/**
* @param {Object} properties - Dashboard properties
* @constructor
*/
function Dashboard(properties){}
//Special

getters

/**

TIBCO Software Inc.

Chapter 6 API Reference - dashboard

* Get any result after invoking run action

* @returns any data which supported by this bi component
*/
Dashboard.prototype.data = function(){};
//Actions
/**
* Perform main action for bi component
* Callbacks will be attached to deferred object.
*
* @param {Function} callback - optional, invoked in case of successful run
* @param {Function} errorback - optional, invoked in case of failed run
* @param {Function} always - optional, invoked always
* @return {Deferred} dfd
*/
Dashboard.prototype.run = function(callback, errorback, always){};
/**
* Render Dashboard to container, previously specified in property.
* Clean up all content of container before adding Dashboard's content
* @param {Function} callback - optional, invoked in case successful export
* @param {Function} errorback - optional, invoked in case of failed export
* @param {Function} always - optional, optional, invoked always
* @return {Deferred} dfd
*/
Dashboard.prototype.render = function(callback, errorback, always){};

/**
* Refresh Dashboard
* @param {Function} callback - optional, invoked in case of successful refresh
* @param {Function} errorback - optional, invoked in case of failed refresh
* @param {Function} always - optional, invoked optional, invoked always
* @return {Deferred} dfd
*/
Dashboard.prototype.refresh = function(callback, errorback, always){};
/**
* Cancel Dashboard execution
* @param {Function} callback - optional, invoked in case of successful cancel
* @param {Function} errorback - optional, invoked in case of failed cancel
* @param {Function} always - optional, invoked optional, invoked always
* @return {Deferred} dfd
*/
Dashboard.prototype.cancel = function(callback, errorback, always){};
/**
* Cancel all executions, destroy Dashboard representation if any, leave only
* properties
* @param {Function} callback - optional, invoked in case of successful cleanup
* @param {Function} errorback - optional, invoked in case of failed cleanup
* @param {Function} always - optional, invoked optional, invoked always
* @return {Deferred} dfd
*/
Dashboard.prototype.destroy = function(callback, errorback, always){};
return Dashboard;
});

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

6.3

Dashboard Structure
The Dashboard Data structure represents the rendered dashboard object manipulated by the dashboard function.
Even though it is named "data," it does not contain any data in the dashboard or reports, but rather the data
about the dashboard. For example, the Dashboard Data structure contains information about the items in the
dashboard, called dashlets.
{
"title": "Dashboard Data",
"description": "A JSON Schema describing a Dashboard Data",
"$schema": "http://json-schema.org/draft-04/schema#",
"type": "object",
"properties": {
"parameters": {
"type": "array",
"description": "Dashboard parameters",
"items": {
"type": "object",
"description": "Dashboard parameter properties"
}
}
}
}

6.4

Rendering a Dashboard
To run a dashboard on the server and render it in Visualize.js, create a dashboard object and set its properties.
Like rendering a report, the resource property determine which report to run, and the container property
determines where it appears on your page.
var dashboard = v.dashboard({
resource: "/public/test_dashboard",
container: "#container",
success: function() { console.log("dashboard rendered"); },
error: function(e) { alert(e); }
});

The following code example shows how to define a dashboard ahead of time, then render it at a later time.
var dashboard = v.dashboard({
resource: "/public/test_dashboard",
runImmediately: false
});
dashboard
.run()
.done(function() {
this
.container("#container")
.render()
.done(function() { console.log("dashboard rendered"); })
.fail(function(e) { alert(e); });
})
.fail(function(e) { alert(e); });

TIBCO Software Inc.

Chapter 6 API Reference - dashboard

6.5

Refreshing a Dashboard
You can order the refresh or re-render of the dashboard , as well as cancel the refresh if necessary, for example if
it takes too long.
var dashboard = v.dashboard({
resource: "/public/test_dashboard",
container: "#container",
runImmediately: false
});
dashboard.run().done(function() {
setTimeout(function() {
var dfd = dashboard.refresh();
// cancel refresh if it's still running after 2 seconds
setTimeout(function() {
if (dfd.state() === "pending") {
dashboard.cancel();
}
}, 2000);
}, 10000);
});

6.6

Using Dashboard Parameters

As with reports, dashboard allow or require parameters that the user or your application can manipulate. First,
you can discover the list of available parameters:
var dashboard = v.dashboard({
resource: "/public/test_dashboard",
container: "#container",
success: function() { console.log("dashboard parameters - " + this.data().parameters); },
error: function(e) { alert(e); }
});

Then you read their values, modify them, and set new values. The dashboard then renders with the new input
parameter values:
var dashboard = v.dashboard({
resource: "/public/test_dashboard",
container: "#container",
params: {
Country: ["USA", "Mexico", "Canada"]
},
error: function(e) { alert(e); }
});
dashboard.params(); // returns { Country: ["USA", "Mexico", "Canada"] }
......
dashboard.params({ month: ["2"] }).run();
dashboard.params(); // returns { month: ["2"] }

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

In the following example, a button resets the paramters to their default values by sending a null parameter set.
First the HTML to define the container and the button:
<script src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>
<button>Reset params</button>
<br/><br/>
<div id="container"></div>

And then the JavaScript to perform the action:

In another example, the script initializes the paramters and the HTML displays a button when they are ready to
be applied:
<script src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>
<br/>
<button disabled>Apply params</button>
<br/><br/>
<div id="container"></div>

And then the JavaScript to initialize the parameters and enable the button for the user:
function handleError(e) {
alert(e);
}
visualize({

TIBCO Software Inc.

Chapter 6 API Reference - dashboard

auth: {
name: "superuser",
password: "superuser"
}
}, function (v) {
var initialParams = {
Country: ["USA", "Canada"]
};
var dashboard = v.dashboard({
resource: "/public/Samples/Dashboards/3.2_Inventory_Metrics",
container: "#container",
error: handleError,
params: initialParams,
success: function() {
$("button").prop("disabled", false);
buildParamsInput();
}
});

You can create any number of user interfaces, database lookups, or your own calculations to provide the values
of parameters. Your parameters could be based on 3rd party API calls that get triggered from other parts of the
page or other pages in your app. When your dashboards can respond to dynamic events, they become truly
embedded and much more relevant to the user.

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

6.7

Setting Dashboard Hyperlink Options

In JasperReports Server 6.1, the handling of dashboard hyperlinks changes. There is now a default behavior that
makes sense for most types of hyperlinks and actions. There are several types of links:

Reference The reference link indicates an external source that is identified by a normal URL. The only
expression required is the hyperlink reference expression. It's possible to specify additional parameters for
this hyperlink type.
LocalAnchor To point to a local anchor means to create a link between two locations into the same
document. It can be used, for example, to link the titles of a summary to the chapters to which they refer. To
define the local anchor, it is necessary to specify a hyperlink anchor expression, which will have to produce
a valid anchor name. It's possible to specify additional parameters for this hyperlink type.
LocalPage If instead of pointing to an anchor you want to point to a specific current report page, you
need to create a LocalPage link. In this case, it is necessary to specify the page number you are pointing to
by means of a hyperlink page expression (the expression has to return an Integer object). It's possible to
specify additional parameters for this hyperlink type.
RemoteAnchor If you want to point to a particular anchor that resides in an external document, you use
the RemoteAnchor link. In this case, the URL of the external file pointed to will have to be specified in the
Hyperlink Reference Expression field, and the name of the anchor will have to be specified in the
Hyperlink Anchor Expression field. It's possible to specify additional parameters for this hyperlink type.
RemotePage This link allows you to point to a particular page of an external document. Similarly, in this
case the URL of the external file pointed to, will have to be specified in the Hyperlink Reference
Expression field, and the page number will have to be specified by means of the hyperlink page expression.
Some export formats have no support for hypertext links. It's possible to specify additional parameters for
this hyperlink type.
ReportExecution This type of hyperlink is used to implement JasperServers drill-down feature. Page and
anchor can be specified for the hyperlink type as well as additional special parameters such as _report, _
anchor, _page, _output.
AdHocExecution This type of hyperlink represents an information about clicked point on chart reports
generated from AdHoc Charts. It exposes names of measures and values of dimensions as parameters.
Custom Hyperlink Type A type of hyperlink that you can define entirely.

And there are several types of link targets:

Self This is the default setting. It opens the link in the current window.
Blank Opens the target in a new window. Used for output formats such as HTML and PDF
Top Opens the target in the current window but outside any frames. Used for output formats such as
HTML and PDF.
Parent Opens the target in the parent window (if available). Used for output formats such as HTML and
PDF.
Frame name Always opens the target in the specified frame.

The following table shows the new default action for each combination of link and target:

TIBCO Software Inc.

Chapter 6 API Reference - dashboard

Type \ Targets

Self

Blank

Top

Parent

Reference

Referenced URL is
opened in an iframe
on top of the report.

Referenced url is
opened in new
tab.

Referenced url is
opened in same
window.

Referenced url is
opened in parent
frame for reports
generated from
AdHoc Charts.

Referenced report is
opened in same
place through Viz.js (if
hyperlink points to the
same report, it's just
gets updated with
params/page/anchor).

Referenced report
is opened in new
tab.

Referenced report
is opened in top
frame (same
window).

Referenced report
is opened in
parent frame.

Anchor is opened in
same place through
Viz.js.

Referenced report
anchor is opened
in new browser
tab.

Referenced report
anchor is opened
in top frame
(same window).

Referenced report
anchor is opened
in parent frame.

Page is opened in
same place through
Viz.js.

Referenced report
page is opened in
new browser tab.

Referenced report
page is opened in
top frame (same
window).

Referenced report
page is opened in
parent frame.

Since remote anchor

could be a link to
resources like PDF or
HTML, we have to
open it in an iframe
on top of the report.

Referenced report
anchor is opened
in new browser
tab.

Referenced report
anchor is opened
in top frame
(same window).

Referenced report
anchor is opened
in parent frame.

Since remote page

could be a link to
resources like PDF or
HTML we have to
open it in an iframe
on top of the report.

Referenced report
page is opened in
new browser tab.

Referenced report
page is opened in
top frame (same
window).

Referenced report
page is opened in
parent frame.

(points to an
external resource)

ReportExecution
(points to
JasperReports
report)

LocalAnchor
(points to an
anchor in current
report)
LocalPage
(points to a page in
current report)
RemoteAnchor
(points to an
anchor in remote
document)

RemotePage
(points to a page in
remote document)

AdHocExecution

The hyperlink provides parameters, which are exposed to Filter Manager for additional
wiring (beyond the scope of this document).

The following code samples demonstrate the default handling of hyperlinks and the effect of defining overrides
that remove the default handling. First the HTML for some buttons:
<script src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>
<button id="btn1">Extend default hyperlink behavior</button>
<button id="btn2">Disable hyperlink click events</button>
<div id="container"></div>

And now some hyplerlink overrides:

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

visualize({
auth: {
name: "jasperadmin",
password: "jasperadmin",
organization: "organization_1"
}
}, function (v) {
var dashboard = v.dashboard({
resource: "/public/Dashboard_with_different_hyperlinks_with_self_target",
container: "#container",
error: function(e) {
alert(e);
}
});
document.querySelector("#btn1").addEventListener("click", function() {
dashboard.linkOptions({
events: {
click: function(ev, link, defaultHandler) {
alert("before default handler");
defaultHandler();
alert("after default handler");
}
}
}).run();
});
document.querySelector("#btn2").addEventListener("click", function() {
dashboard.linkOptions({
events: {
click: function(ev, link, defaultHandler) {
alert("default handler will not be called");
}
}
}).run();
});
});

However, if your dashboards are designed for custom drill-down, you can still define custom link handling so
your users can access more reports and more data. Be sure to modify your code to handle all three function
parameters for function(ev, link, default), as shown in this updated code sample:
var dashboard = v.dashboard({
resource: "/public/test_dashboard",
container: "#container",
linkOptions: {
beforeRender: function (linkToElemPairs) {
linkToElemPairs.forEach(showCursor);
},
events: {
"click": function(ev, link, default){
if (link.type == "ReportExecution") {
if ("monthNumber" in link.parameters) {
v("#drill-down").report({
resource: link.parameters._report,
params: {

TIBCO Software Inc.

Chapter 6 API Reference - dashboard

monthNumber: [link.parameters.monthNumber]
}
});
}
}
}
}
}
});
function showCursor(pair){
var el = pair.element;
el.style.cursor = "pointer";
}

6.8

Closing a Dashboard
When you want to reuse a container for other contents and free the dashboard resources, use the destroy
function to close it.
var dashboard = v.dashboard({
resource: "/public/test_dashboard",
container: "#container"
});
dashboard.destroy();

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

TIBCO Software Inc.

CHAPTER 7

API REFERENCE - ERRORS

This chapter lists the errors that commonly occur and describes how to handle them with Visualize.js.
This chapter contains the following sections:

7.1

Error Properties
The properties structure for Generic Errors is defined as follows:
{
"title": "Generic Errors",
"description": "A JSON Schema describing Visualize Generic Errors",
"$schema": "http://json-schema.org/draft-04/schema#",
"type": "object",
"properties": {
"errorCode": {
"type": "string"
},
"message": {
"type": "string"
},
"parameters":{
"type": "array"
}
},
"required": ["errorCode", "message"]
}

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

7.2

Common Errors
The following table lists common errors, their message, and their cause.

7.3

Error

Message - Description

Page or app not responding

{no_message} - If your page or web application has stopped working

without any notifications or errors, then check that the server that provides
visualize.js is accessible and returning scripts.

unexpected.error

An unexpected error has occurred - In most of cases this is either a

JavaScript exception or an HTTP 500 (Internal Server Error) response
from server.

schema.validation.error

JSON schema validation failed: {error_message} - Validation against

schema has failed. Check the validationError property in object for
more details.

unsupported.
configuration.error

{unspecified_message} - This error happens only when isolateDom =

true and defaultJiveUi.enabled = true. These properties are
mutually exclusive.

authentication.error

Authentication error - Credentials are not valid or session has expired.

container.not.found.error

Container was not found in DOM - The specified container was not found
in the DOM:error.

report.execution.failed

Report execution failed - The report failed to run on the server.

report.execution.cancelled

Report execution was canceled - Report execution was canceled.

report.export.failed

Report export failed - The report failed to export on the server.

licence.not.found

JRS missing appropriate licence - The server's license was not found.

licence.expired

JRS license expired - The server's license has expired

resource.not.found

Resource not found in Repository - Either the resource does not exist in
the repository or the user doesn't have permissions to read it.

export.pages.out.range

Requested pages {0} out of range - The user requested pages which do
not exist in the current export.

input.controls.
validation.error

{server_error_message} - The wrong input control params were sent to the

server.

Catching Initialization and Authentication Errors

Visualize.js is designed to have many places where you can catch and handle errors. The visualize function
definition, as shown in Contents of the Visualize.js Script on page8, is:
function visualize(properties, callback, errorback, always){}

TIBCO Software Inc.

Chapter 7 API Reference - Errors

During intitialization and authentication, you can handle errors in the third parameter named errorback (an
error callback). Your application would then have this structure:
visualize({
auth : { ...
}
}, function(){
// your application logic
}, function(err){
// handle all initialization and authentication errors here
})

7.4

Catching Search Errors

One way to handle search errors is to specify an error handler as the second parameter of run:
new ResourcesSearch({
server:"http://localhost:8080/jasperserver-pro",
folderUri: "/public",
recursive: false
})).run( usefulFunction, function(error){
alert(error);
}))

Another way to handle search errors is to specify a function as the third parameter of run. This function is an
always handler that run every time when operation ends.
new ResourcesSearch({
server:"http://localhost:8080/jasperserver-pro",
folderUri: "/public",
recursive: false
})).run(usefulFunction, errorHandler, function(resultOrError){
alert(resultOrError);
}))

7.5

Validating Search Properties

You can also validate the structure of the search properties without making an actual call to the search function:
var call = new ResourcesSearch({
server:"http://localhost:8080/jasperserver-pro",
folderUri: "/public",
recursive: false

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

}));
var error = call.validate();
if (!error){
// valid
} else {
// invalid, read details from error
}

7.6

Catching Report Errors

To catch and handle errors when running reports, define the contents of the err function as shown in the
following sample:
visualize({
auth : { ...
}
}, function(v){
var report = v.report({
error: function(err){
// invoked once report is initialized and has run
}
});
report
.run()
.fail(function(err){
// handle errors here
});
)

7.7

Catching Input Control Errors

Catching and handling input control errors is very similar to reports. Define the contents of the err function
that gets invoked in error conditions, as shown in the following sample:
visualize({
auth : { ...
}
}, function(v){
var ic = v.inputControls({
error: function(err){
// invoked once input control is initialized
}
});
inputControls
.run()

TIBCO Software Inc.

Chapter 7 API Reference - Errors

.fail(function(err){
// handle errors here
});
)

7.8

Validating Input Controls

You can also validate the structure of your input controls without making an actual call. However, the values of
the input controls and their relevance to the named resource are not checked.
var ic = new InputControls({
server: "http://localhost:8080/jasperserver-pro",
resource: "/public/my_report",
params: {
"Country_multi_select":["Mexico"],
"Cascading_state_multi_select":["Guerrero", "Sinaloa"]
}
});
var error = ic.validate();
if (!error){
// valid
} else {
// invalid, read details from error
}

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

TIBCO Software Inc.

CHAPTER 8

API USAGE - REPORT EVENTS

Depending on the size of your data, the report function can run for several seconds or minutes, just like reports
in the JasperReports Server UI. You can listen for events that give the status of running reports and let you
display pages sooner.
This chapter contains the following sections:

8.1

Tracking Completion Status

Listening to Page Totals
Listening for the Last Page
Customizing a Report's DOM Before Rendering

Tracking Completion Status

By listening to the reportCompleted event, you can give information or take action when a report finishes
rendering.
visualize({
auth: { ...
}
}, function (v) {
var report = v.report({
// run example with a very long report
resource: "/public/Samples/Reports/RevenueDetailReport",
container: "#container",
events: {
reportCompleted: function(status) {
alert("Report status: "+ status+ "!");
}
},
error: function(error) {
alert(error);
},
});
});

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

8.2

Listening to Page Totals

By listening to the changeTotalPages event, you can track the filling of the report.
visualize({
auth: { ...
}
}, function (v) {
var report = v.report({
resource: "/public/Samples/Reports/AllAccounts",
container: "#container",
error: function(error) {
alert(error);
},
events: {
changeTotalPages: function(totalPages) {
alert("Total Pages:" + totalPages);
}
}
});
});

8.3

Listening for the Last Page

By listening to the pageFinal event, you can know when the last page of a running report has been generated.
visualize({
auth: { ...
}
}, function (v) {
var report = v.report({
// run example with a very long report
resource: "/public/Samples/Reports/RevenueDetailReport",
container: "#container",
events: {
pageFinal: function(el) {
console.log(el);
alert("Final page is rendered!");
},
reportCompleted: function(status) {
alert("Report status: "+ status+ "!");
}
},
error: function(error) {
alert(error);
},
});
});

8.4

Customizing a Report's DOM Before Rendering

By listening to the beforeRender event, you can access the Document Object Model (DOM) of the report to
view or modify it before it is displayed. In the example the listener finds span elements and adds a color style
and an attribute my-attr="test" to each one.

TIBCO Software Inc.

Chapter 8 API Usage - Report Events

visualize({
auth: { ...
}
}, function (v) {
// enable report chooser
$(':disabled').prop('disabled', false);
//render report from provided resource
startReport();
$("#selected_resource").change(startReport);
function startReport () {
// clean container
$("#container").html("");
// render report from another resource
v("#container").report({
resource: $("#selected_resource").val(),
events:{
beforeRender: function(el){
// find all spans
$(el).find(".jrPage td span")
.each(function(i, e){
// make them red
$(e).css("color","red")
.attr("data-my-attr", "test");
});
console.log($(el).find(".jrPage").html());
}
}
});
};
});

The HTML page that displays the report uses a static list of reports in a drop-down selector, but otherwise needs
only a container element. This is similar to the basic report example in Rendering a Report on page32,
except that the JavaScript above will change the report before it is displayed.
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>

<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>
<select id="selected_resource" disabled="true" name="report">
<option value="/public/Samples/Reports/1._Geographic_Results_by_Segment_Report">Geographic Results
by Segment</option>
<option value="/public/Samples/Reports/2_Sales_Mix_by_Demographic_Report">Sales Mix by
Demographic</option>
<option value="/public/Samples/Reports/3_Store_Segment_Performance_Report">Store Segment
Performance</option>
<option value="/public/Samples/Reports/04._Product_Results_by_Store_Type_Report">Product Results
by Store Type</option>
</select>

<div id="container"></div>

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

TIBCO Software Inc.

CHAPTER 9

API USAGE - HYPERLINKS

Both reports and dashboards include hyperlinks (URLs) that link to websites or other reports. Visualize.js gives
you access to the links so that you can customize them or open them differently. For links generated in the
report, you can customize both the appearance and the container where they are displayed.
This chapter contains the following sections:

9.1

Structure of Hyperlinks
Customizing Links
Drill-Down in Separate Containers
Accessing Data In Links

Structure of Hyperlinks
The following JSONschema describes all the parameters on links, although not all are present in all cases.
{
"title": "JR Hyperlink",
"description": "A JSON Schema describing JR hyperlink",
"$schema": "http://json-schema.org/draft-04/schema#",
"type": "object",
"properties":{
"id": {
"type": "string",
"description": "Hyperlink id, reflected in corresponding attribute in DOM. Is not used for
AdHocExecution hyperlink type."
},
"type": {
"type": "string",
"description": "Hyperlink type. Default types are LocalPage, LocalAnchor, RemotePage,
RemoteAnchor, Reference, ReportExecution, AdHocExecution. Custom hyperlink types are possible"
},
"target": {
"type": "string",
"description": "Hyperlink target. Default targets are Self, Blank, Top, Parent. Custom
hyperlink targets are possible"
},
"tooltip": {

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

"type": "string",
"description": "Hyperlink tooltip"
},
"href": {
"type" : "string",
"description": "Hyperlink reference. Is an empty string for LocalPage, LocalAnchor and
ReportExecution hyperlink types"
},
"parameters": {
"type": "object",
"description": "Hyperlink parameters. Any additional parameters for hyperlink"
},
"resource": {
"type": "string",
"description": "Repository resource URI of resource mentioned in hyperlink. For LocalPage
and LocalAnchor points to current report, for ReportExecution - to _report parameter"
},
"pages": {
"type": ["integer", "string"],
"description": "Page to which hyperlink points to. Is actual for LocalPage, RemotePage and
ReportExecution hyperlink types"
},
"anchor": {
"type": "string",
"description": "Anchor to which hyperlink points to. Is actual for LocalAnchor,
RemoteAnchor and ReportExecution hyperlink types"
}
},
"required": ["type", "id"]
}

9.2

Customizing Links
You can customize the appearance of link elements in a generated report in two ways:

The linkOptionsexposes the beforeRender event to which you can add a listener that has access to the
links in the document as element pairs.
The normal click event lets your add a listener that has access to a link when it is clicked.
visualize({
auth: {
name: "jasperadmin",
password: "jasperadmin",
organization: "organization_1"
}
},function (v) {
v("#container1").report({
resource: "/AdditionalResourcesForTesting/Drill_Reports_with_Controls/main_report",
linkOptions: {
beforeRender: function (linkToElemPairs) {
linkToElemPairs.forEach(function (pair) {
var el = pair.element;
el.style.backgroundColor = "red";
});
},

TIBCO Software Inc.

Chapter 9 API Usage - Hyperlinks

events: {
"click": function(ev, link){
if (confirm("Change color of link id " + link.id + " to green?")){
ev.currentTarget.style.backgroundColor = "green";
ev.target.style.color = "#FF0";
}
}
}
},
error: function (err) {
alert(err.message);
}
});
});

9.3

Drill-Down in Separate Containers

By using the method of listing for clicks on hyperlinks, you can write a visualize.js script that sets the
destination of drill-down report links to another container. This way, you can create display layouts or overlays
for viewing drill-down links embedded in your reports.
visualize({
auth: {
name: "jasperadmin",
password: "jasperadmin",
organization: "organization_1"
}
}, function (v) {
v("#main").report({
resource: "/MyReports/Drill_Reports_with_Controls/main_report",
linkOptions: {
beforeRender: function (linkToElemPairs) {
linkToElemPairs.forEach(showCursor);
},
events: {
"click": function(ev, link){
if (link.type == "ReportExecution"){
v("#drill-down").report({
resource: link.parameters._report,
params: {
city: [link.parameters.city],
country: link.parameters.country,
state: link.parameters.state
},
});
}
console.log(link);
}
}
},
error: function (err) {
alert(err.message);
}
});

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

function showCursor(pair){
var el = pair.element;
el.style.cursor = "pointer";
}
});

Associated HTML:
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>

<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>

<div>
<div style="width:830px;" id="main"></div>
<div style="width:500px;" id="drill-down"></div>
</div>

Associated CSS:
#main{
float: left;
}
#drill-down{
float: left;
}

9.4

Accessing Data In Links

In this example, we access the hyperlinks through the data.links structure after the report has successfully
rendered. From this structure, we can read the tooltips that were set in the JRXML of the report. The script uses
the information in the tooltips of all links in the report to create a drop-down selector of city name options.
By using link tooltips, your JRXML can create reports that pass runtime information to the display logic in your
JavaScripts.
visualize({
auth: {
name: "jasperadmin",
password: "jasperadmin",
organization: "organization_1"
}
}, function (v) {
var $select = $("#selectCity"),
report = v.report({
resource: "/MyReports/Drill_Reports_with_Controls/main_report",
container: "#main",
success: refreshSelect,
error: showError
});

TIBCO Software Inc.

Chapter 9 API Usage - Hyperlinks

Associated HTML:
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>

<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>
<select id="selectCity"></select>
<button id="previousPage">Previous Page</button>
<button id="nextPage">Next Page</button>

<div>
<div style="width:20px;"></div>
<div style="width:500px;" id="main"></div>
</div>

Associated CSS:
#main{
float: left;
}

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

TIBCO Software Inc.

CHAPTER 10 API USAGE - INTERACTIVE REPORTS

Most reports rendered in the JasperReports Server native interface have interactive abilities such as column
sorting provided by a feature called JIVE: Jaspersoft Interactive Viewer and Editor. The JIVE UI is the interface
of the report viewer in JasperReports Server, and the same JIVE UI is replicated on reports generated in clients
using Visualize.js.
Not only does the JIVE UI allow users to sort and filter regular reports, it also provides many opportunities for
you to further customize the appearance and behavior of your reports through Visualize.js.
This chapter contains the following sections:

Interacting With JIVE UI Components

Changing the Chart Type
Changing the Chart Properties
Undo and Redo Actions
Sorting Table Columns
Filtering Table Columns
Formatting Table Columns
Conditional Formatting on Table Columns
Sorting Crosstab Columns
Sorting Crosstab Rows
Disabling the JIVE UI

10.1 Interacting With JIVE UI Components

The visualize.report interface exposes the updateComponent function that gives your script access to the
JIVE UI. Using the structures exposed by updateComponent, you can programmatically interact with the JIVE
UI to do such things as set the sort order on a specified column, add a filter, and change the chart type. In
addition, the undoAll function acts as a reset.
For the API reference of the visualize.report interface, see Report Functions on page28.
First enable the default JIVE UI, then the components of the JIVE UI are available after running a report:
var report = v.report({
resource: "/public/SampleReport",
defaultJiveUi : {

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

enabled: true
}
});
...
var components = report.data().components;

Each component of the JIVE UI has an id, but it may change from execution to execution. To refer to
components of the UI, create your report in JRXML and use the net.sf.jasperreports.components.name
property to name each component you want to reference, such as a column in a table. Then you can reference
the object by this name, for example "sales", and use the updateComponent function.
report.updateComponent("sales", {
sort : {
order : "asc"
}
});

Or:
report.updateComponent({
name: "sales",
sort : {
order : "asc"
}
});

We can also get an object that represents the named component of the JIVE UI:
var salesColumn = report
.data()
.components
.filter(function(c){ return c.name === "sales"})
.pop();

The following example shows how to create buttons whose click event modify the report through the JIVE UI:
visualize({
auth: { ...
}
}, function (v) {
//render report from provided resource
var report = v.report({
resource: "/public/Samples/Reports/RevenueDetailReport",
container: "#container",
success: printComponentsNames,
error: handleError
});
$("#resetAll").on("click", function(){

TIBCO Software Inc.

Chapter 10 API Usage - Interactive Reports

report.undoAll();
});
$("#changeFemale").on("click", function () {
//component's name generated by default from field name
report.updateComponent("femalesales", {
sort: {
order: "asc"
},
filter: {
operator: "greater_or_equal",
value: 15000
}
}).fail(handleError);
});
$("#changeDep").on("click", function () {
//custom compoent's name
report.updateComponent("my_dep", {
sort: {
order: "desc"
}
}).fail(handleError);
});
$("#changeChart").on("click", function () {
//custom compoent's name
report.updateComponent("revenue", {
chartType: "Pie"
}).fail(handleError);
});
//show error
function handleError(err){
alert(err.message);
}
function printComponentsNames(data){
data.components.forEach(function(c){
console.log("Component Name: " + c.name, "Component Lable: "+ c.label);
});
}
});

The associated HTML has buttons that will invoke the JavaScript actions on the JIVE UI:

<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>
<button id="resetAll">Reset All</button>
<button id="changeFemale">Filter And Sort Female</button>
<button id="changeDep">Sort Departments</button>
<button id="changeChart">Show in Pie</button>

<div id="container"></div>

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

10.2 Changing the Chart Type

If you have the name of a chart component, you can easily set a new chart type and redraw the chart.
var mySalesChart = report
.data()
.components
.filter(function(c){ return c.name === "salesChart"})
.pop();
mySalesChart.chartType = "Bar";
report
.updateComponent(mySalesChart)
.done(function(){
alert("Chart type changed!");
})
.fail(function(err){
alert(err.message);
});

Or:
report
.updateComponent("salesChart", {
chartType: "Bar"
})
.done(function(){
alert("Chart type changed!");
})
.fail(function(err){
alert(err.message);
});

The following example creates a drop-down menu that lets users change the chart type. You could also set the
chart type programmatically, according to other states in your client.
This code also relies on the report.chart.types interface described in Discovering Available Charts and
Formats on page40.
visualize({
auth: { ...
}
}, function (v) {
//persisted chart name
var chartName = "geo_by_seg",
$select = buildControl("Chart types: ", v.report.chart.types),
report = v.report({
resource: "/public/Reports/1._Geographic_Results_by_Segment_Report",
container: "#container",
success: selectDefaultChartType
});
$select.on("change", function () {

TIBCO Software Inc.

Chapter 10 API Usage - Interactive Reports

report.updateComponent(chartName, {
chartType: $(this).val()
})
.done(function (component) {
chartComponent = component;
})
.fail(function (error) {
alert(error);
});
});
function selectDefaultChartType(data) {
var component = data.components
.filter(function (c) {
return c.name === chartName;
})
.pop();
if (component) {
$select.find("option[value='" + component.chartType + "']")
.attr("selected", "selected");
}
}
function buildControl(name, options) {
function buildOptions(options) {
var template = "<option>{value}</option>";
return options.reduce(function (memo, option) {
return memo + template.replace("{value}", option);
}, "")
}
console.log(options);
if (!options.length) {
console.log(options);
}
var template = "<label>{label}</label><select>{options}</select><br>",
content = template.replace("{label}", name)
.replace("{options}", buildOptions(options));
var $control = $(content);
$control.insertBefore($("#container"));
return $control;
}
});

As shown in the following HTML, the control for the chart type is created dynamically by the JavaScript:
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>

<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>

<div id="container"></div>

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

10.3 Changing the Chart Properties

Those chart components that are based on Highcharts have a lot of interactivity such as built-in zooming and
animation. The built-in zooming lets users select data, for example columns in a chart, but it can also interfere
with touch interfaces. With visualize.js, you have full control over these features and you can choose to allow
your users access to them or not. For example, animation can be slow on mobile devices, so you could turn off
both zooming and animation. Alternatively, if your users have a range of mobile devices, tablets, and desktop
computers, then you could give users the choice of turning on or off these properties themselves.
The following example creates buttons to toggle several chart properties and demonstrates how to control them
programmatically. First the HTML to create the buttons:
<script src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>
<button id="disableAnimation">disable animation</button>
<button id="enableAnimation">enable animation</button>
<button id="resetAnimation">reset animation to initial state</button>
<button
<button
<button
<button
<button

id="disableZoom">disable zoom</button>
id="zoomX">set zoom to 'x' type</button>
id="zoomY">set zoom to 'y' type</button>
id="zoomXY">set zoom to 'xy' type</button>
id="resetZoom">reset zoom to initial state</button>

Here are the API calls to set the various chart properties:
visualize({
auth: {
name: "jasperadmin",
password: "jasperadmin",
organization: "organization_1"
}
}, function (v) {
var report = v.report({
resource: "/public/Samples/Reports/01._Geographic_Results_by_Segment_Report",
container: "#container",
error: function(e) {
alert(e);
}
});
function changeChartProperty(prop, value) {
var chartProps = report.chart();
if (typeof value === "undefined") {
delete chartProps[prop];
} else {
chartProps[prop] = value;
}
report.chart(chartProps).run().fail(function(e) { alert(e); });
}
$("#disableAnimation").on("click", function() {

TIBCO Software Inc.

Chapter 10 API Usage - Interactive Reports

changeChartProperty("animation", false);
});
$("#enableAnimation").on("click", function() {
changeChartProperty("animation", true);
});
$("#resetAnimation").on("click", function() {
changeChartProperty("animation");
});
$("#disableZoom").on("click", function() {
changeChartProperty("zoom", false);
});
$("#zoomX").on("click", function() {
changeChartProperty("zoom", "x");
});
$("#zoomY").on("click", function() {
changeChartProperty("zoom", "y");
});
$("#zoomXY").on("click", function() {
changeChartProperty("zoom", "xy");
});
$("#resetZoom").on("click", function() {
changeChartProperty("zoom");
});
});

10.4 Undo and Redo Actions

As in JasperReports Server, the JIVE UI supports undo and redo actions that you can access programmatically
with Visualize.js. As in many applications, undo and redo actions act like a stack, and the canUndo and
canRedo events notify your page you are at either end of the stack.
visualize({
auth: { ...
}
}, function (v) {
var chartComponent,
report = v.report({
resource: "/public/Samples/Reports/1._Geographic_Results_by_Segment_Report",
container: "#container",
events: {
canUndo: function (canUndo) {
if (canUndo) {
$("#undo, #undoAll").removeAttr("disabled");
} else {
$("#undo, #undoAll").attr("disabled", "disabled");
}
},

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

canRedo: function (canRedo) {

if (canRedo) {
$("#redo").removeAttr("disabled");
} else {
$("#redo").attr("disabled", "disabled");
}
}
},
success: function (data) {
chartComponent = data.components.pop();
$("option[value='" + chartComponent.chartType + "']").attr("selected", "selected");
}
});
var chartTypeSelect = buildChartTypeSelect(report);
chartTypeSelect.on("change", function () {
report.updateComponent(chartComponent.id, {
chartType: $(this).val()
})
.done(function (component) {
chartComponent = component;
})
.fail(function (error) {
console.log(error);
alert(error);
});
});
$("#undo").on("click", function () {
report.undo().fail(function (err) {
alert(err);
});
});
$("#redo").on("click", function () {
report.redo().fail(function (err) {
alert(err);
});
});
$("#undoAll").on("click", function () {
report.undoAll().fail(function (err) {
alert(err);
});
});
});
function buildChartTypeSelect(report) {
var chartTypes = report.schema("chart").properties.chartType.enum,
chartTypeSelect = $("#chartType");
$.each(chartTypes, function (index, type) {
chartTypeSelect.append("" + type + "");
});

TIBCO Software Inc.

Chapter 10 API Usage - Interactive Reports

return chartTypeSelect;
}

Associated HTML:
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>

<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>
<select id="chartType"></select>
<button id="undo" disabled="disabled">Undo</button>
<button id="redo" disabled="disabled">Redo</button>
<button id="undoAll" disabled="disabled">Undo All</button>

<div id="container"></div>

10.5 Sorting Table Columns

This code example shows how to set the three possible sorting orders on a column in the JIVE UI: ascending,
descending, and no sorting.
visualize({
auth: { ...
}
}, function (v) {
var report = v.report({
resource: "/public/Samples/Reports/5g.AccountsReport",
container: "#container",
error: showError
});
$("#sortAsc").on("click", function () {
report.updateComponent("name", {
sort: {
order: "asc"
}
})
.fail(showError);
});
$("#sortDesc").on("click", function () {
report.updateComponent("name", {
sort: {
order: "desc"
}
})
.fail(showError);
});
$("#sortNone").on("click", function () {
report.updateComponent("name", {
sort: {}
}).fail(showError);
});

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

function showError(err) {
alert(err);
}
});

Associated HTML:
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>

<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>
<button id="sortAsc">Sort NAME column ASCENDING</button>
<button id="sortDesc">Sort NAME column DESCENDING</button>
<button id="sortNone">Reset NAME column</button>

<div id="container"></div>

10.6 Filtering Table Columns

This code example shows how to define filters on columns of various data types (dates, strings, numeric) in the
JIVE UI. It also shows several filter operator such as equal, greater, between, contain (for string matching),
and before (for times and dates).
visualize({
auth: { ...
}
}, function (v) {
var report = v.report({
resource:"/public/viz/report_with_different_column_types",
container: "#container",
error: function(err) {
alert(err);
}
});
$("#setTimestampRange").on("click", function() {
report.updateComponent("column_timestamp", {
filter: {
operator: "between",
value: [$("#betweenDates1").val(), $("#betweenDates2").val()]
}
}).fail(handleError);
});
$("#resetTimestampFilter").on("click", function() {
report.updateComponent("column_timestamp", {
filter: {}
}).fail(handleError);
});

TIBCO Software Inc.

Chapter 10 API Usage - Interactive Reports

$("#setBooleanTrue").on("click", function() {
report.updateComponent("column_boolean", {
filter: {
operator: "equal",
value: true
}
}).fail(handleError);
});
$("#resetBoolean").on("click", function() {
report.updateComponent("column_boolean", {
filter: {}
}).fail(handleError);
});
$("#setStringContains").on("click", function() {
report.updateComponent("column_string", {
filter: {
operator: "contain",
value: $("#stringContains").val()
}
}).fail(handleError);
});
$("#resetString").on("click", function() {
report.updateComponent("column_string", {
filter: {}
}).fail(handleError);
});
$("#setNumericGreater").on("click", function() {
report.updateComponent("column_double", {
filter: {
operator: "greater",
value: parseFloat($("#numericGreater").val(), 10)
}
}).fail(handleError);
});
$("#resetNumeric").on("click", function() {
report.updateComponent("column_double", {
filter: {}
}).fail(handleError);
});
$("#setTimeBefore").on("click", function() {
report.updateComponent("column_time", {
filter: {
operator: "before",
value: $("#timeBefore").val()
}
}).fail(handleError);
});
$("#resetTime").on("click", function() {
report.updateComponent("column_time", {
filter: {}

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

}).fail(handleError);
});
});
function handleError(err) {
console.log(err);
alert(err);
}

<input type="text" value="2014-04-10T00:00:00" id="betweenDates1"/> <input type="text" id="betweenDates2" value="2014-04-24T00:00:00"/>

<button id="setTimestampRange">Set timestamp range</button>
<button id="resetTimestampFilter">Reset timestamp filter</button>
<br/><br/>
<button id="setBooleanTrue">Filter boolean column to true</button>
<button id="resetBoolean">Reset boolean filter</button>
<br/><br/>
<input type="text" value="hou" id="stringContains"/>
<button id="setStringContains">Set string column contains</button>
<button id="resetString">Reset string filter</button>
<br/><br/>
<input type="text" value="40.99" id="numericGreater"/>
<button id="setNumericGreater">Set numeric column greater than</button>
<button id="resetNumeric">Reset numeric filter</button>
<br/><br/>
<input type="text" value="13:15:43" id="timeBefore"/>
<button id="setTimeBefore">Set time column before than</button>
<button id="resetTime">Reset time filter</button>

<div id="container"></div>

10.7 Formatting Table Columns

The JIVE UI allows you to format columns by setting the alignment, color, font, size, and background of text in
both headings and cells. You can also set the numeric format of cells, such as the precision, negative indicator,
and currency. Note that the initial appearance of any numbers also depends on the locale set either by default
on JasperReports Server, or specified in your script request, as described in Requesting the Visualize.js Script
on page7.
visualize({
auth: { ...
}
}, function (v) {
var columns,

TIBCO Software Inc.

Chapter 10 API Usage - Interactive Reports

report = v.report({
resource: "/public/viz/report_with_different_column_types",
container: "#container",
events: {
reportCompleted: function (status, error) {
if (status === "ready") {
columns = _.filter(report.data().components, function (component) {
return component.componentType == "tableColumn";
});
var column4 = columns[4];
$("#label").val(column4.label);
$("#headingFormatAlign").val(column4.headingFormat.align);
$("#headingFormatBgColor").val(column4.headingFormat.backgroundColor);
$("#headingFormatFontSize").val(column4.headingFormat.font.size);
$("#headingFormatFontColor").val(column4.headingFormat.font.color);
$("#headingFormatFontName").val(column4.headingFormat.font.name);
if (column4.headingFormat.font.bold) {
$("#headingFormatFontBold").attr("checked", "checked");
} else {
$("#headingFormatFontBold").removeAttr("checked");
}
if (column4.headingFormat.font.italic) {
$("#headingFormatFontItalic").attr("checked", "checked");
} else {
$("#headingFormatFontItalic").removeAttr("checked");
}
if (column4.headingFormat.font.underline) {
$("#headingFormatFontUnderline").attr("checked", "checked");
} else {
$("#headingFormatFontUnderline").removeAttr("checked");
}
$("#detailsRowFormatAlign").val(column4.detailsRowFormat.align);
$("#detailsRowFormatBgColor").val(column4.detailsRowFormat.backgroundColor);
$("#detailsRowFormatFontSize").val(column4.detailsRowFormat.font.size);
$("#detailsRowFormatFontColor").val(column4.detailsRowFormat.font.color);
$("#detailsRowFormatFontName").val(column4.detailsRowFormat.font.name);
if (column4.detailsRowFormat.font.bold) {
$("#detailsRowFormatFontBold").attr("checked", "checked");
} else {
$("#detailsRowFormatFontBold").removeAttr("checked");
}
if (column4.detailsRowFormat.font.italic) {
$("#detailsRowFormatFontItalic").attr("checked", "checked");
} else {
$("#detailsRowFormatFontItalic").removeAttr("checked");
}
if (column4.detailsRowFormat.font.underline) {

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

$("#detailsRowFormatFontUnderline").attr("checked", "checked");
} else {
$("#detailsRowFormatFontUnderline").removeAttr("checked");
}
$("#detailsRowFormatPatternNegativeFormat").val(
column4.detailsRowFormat.pattern.negativeFormat);
$("#detailsRowFormatPatternPrecision").val(
column4.detailsRowFormat.pattern.precision);
$("#detailsRowFormatPatternCurrency").val(
column4.detailsRowFormat.pattern.currency || "");
if (column4.detailsRowFormat.pattern.percentage) {
$("#detailsRowFormatPatternPercentage").attr("checked", "checked");
} else {
$("#detailsRowFormatPatternPercentage").removeAttr("checked");
}
if (column4.detailsRowFormat.pattern.grouping) {
$("#detailsRowFormatPatternGrouping").attr("checked", "checked");
} else {
$("#detailsRowFormatPatternGrouping").removeAttr("checked");
}
}
}
},
error: function (err) {
alert(err);
}
});
$("#changeHeadingFormat").on("click", function () {
report.updateComponent(columns[4].id, {
headingFormat: {
align: $("#headingFormatAlign").val(),
backgroundColor: $("#headingFormatBgColor").val(),
font: {
size: parseFloat($("#headingFormatFontSize").val()),
color: $("#headingFormatFontColor").val(),
underline: $("#headingFormatFontUnderline").is(":checked"),
bold: $("#headingFormatFontBold").is(":checked"),
italic: $("#headingFormatFontItalic").is(":checked"),
name: $("#headingFormatFontName").val()
}
}
}).fail(function (e) {
alert(e);
});
});
$("#changeDetailsRowFormat").on("click", function () {
report.updateComponent(columns[4].id, {
detailsRowFormat: {
align: $("#detailsRowFormatAlign").val(),
backgroundColor: $("#detailsRowFormatBgColor").val(),

TIBCO Software Inc.

Chapter 10 API Usage - Interactive Reports

The associated HTML has static controls for selecting all the formatting options that the script above can
modify in the report.
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>

<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>
<div style="float: left;">
<h3>Heading format for 5th column</h3>
Align: <select id="headingFormatAlign">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option></select>
<br/>
Background color: <input type="text" id="headingFormatBgColor" value=""/>
<br/>
Font size: <input type="text" id="headingFormatFontSize" value=""/>
<br/>
Font color: <input type="text" id="headingFormatFontColor" value=""/>
<br/>
Font name: <input type="text" id="headingFormatFontName" value=""/>
<br/>
Bold: <input type="checkbox" id="headingFormatFontBold" value="true"/>
<br/>
Italic: <input type="checkbox" id="headingFormatFontItalic" value="true"/>
<br/>
Underline: <input type="checkbox" id="headingFormatFontUnderline" value="true"/>
<br/><br/>
<button id="changeHeadingFormat">Change heading format</button>
</div>
<div style="float: left;">
<h3>Details row format for 5th column</h3>
Align: <select id="detailsRowFormatAlign">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option></select>
<br/>
Background color: <input type="text" id="detailsRowFormatBgColor" value=""/>
<br/>
Font size: <input type="text" id="detailsRowFormatFontSize" value=""/>
<br/>
Font color: <input type="text" id="detailsRowFormatFontColor" value=""/>
<br/>
Font name: <input type="text" id="detailsRowFormatFontName" value=""/>
<br/>
Bold: <input type="checkbox" id="detailsRowFormatFontBold" value="true"/>
<br/>
Italic: <input type="checkbox" id="detailsRowFormatFontItalic" value="true"/>
<br/>
Underline: <input type="checkbox" id="detailsRowFormatFontUnderline" value="true"/>
<br/><br/>
<b>Number pattern:</b>

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

<br/>
Negative format: <input type="text" id="detailsRowFormatPatternNegativeFormat"/>
<br/>
Precision: <input type="text" id="detailsRowFormatPatternPrecision"/>
<br/>
Currency: <select id="detailsRowFormatPatternCurrency">
<option value="">----</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="YEN">YEN</option>
<option value="LOCALE_SPECIFIC">LOCALE_SPECIFIC</option>
</select>
<br/>
Thousands grouping: <input type="checkbox" id="detailsRowFormatPatternGrouping" value="true"/>
<br/>
Percentage: <input type="checkbox" id="detailsRowFormatPatternPercentage" value="true"/>
<br/><br/>
<button id="changeDetailsRowFormat">Change details row format</button>
</div>
<div style="float: left;">
<h3>Change label of 5th column</h3>
<br/>
Label <input type="text" id="label"/>
<br/>
<button id="changeLabel">Change label</button>
</div>
<div style="clear: both;"></div>

<div id="container"></div>

10.8 Conditional Formatting on Table Columns

The JIVE UI also supports conditional formatting so that you can change the appearance of a cell's contents
based on its value. This example highlights cells in a given column that have a certain value by changing their
text color and the cell background color. Note that the column name must be known ahead of time, for example
by looking at your JRXML.
visualize({
auth: { ...
}
}, function (v) {
// column name from JRXML (field name by default)
var salesColumnName = "sales_fact_ALL.sales_fact_ALL__store_sales_2013",
report = v.report({
resource: "/public/Samples/Reports/04._Product_Results_by_Store_Type_Report",
container: "#container",
error: showError
});
$("#changeConditions").on("click", function() {

TIBCO Software Inc.

Chapter 10 API Usage - Interactive Reports

report.updateComponent(salesColumnName, {
conditions: [
{
operator: "greater",
value: 10,
backgroundColor: null,
font: {
color: "FF0000",
bold: true,
underline: true,
italic: true
}
},
{
operator: "between",
value: [5, 9],
backgroundColor: "00FF00",
font: {
color: "0000FF"
}
}
]
})
.then(printConditions)
.fail(showError);
});
function printConditions(component){
console.log("Conditions: "+ component.conditions);
}
function showError(err) {
alert(err);
}
});

This example has a single button that allows the user to apply the conditional formatting when the report is
loaded:
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>

<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>
<button id="changeConditions">Change conditions for numeric column</button>

<div id="container"></div>

10.9 Sorting Crosstab Columns

Crosstabs are more complex and do not have as many formatting options. This example shows how to sort the
values in a given column of a crosstab (the rows are rearranged). Note that the code is slightly different than
Sorting Table Columns on page85.

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

visualize({
auth: {
name: "superuser",
password: "superuser"
}
}, function (v) {
var column2,
report = v.report({
resource: "/public/MyReports/crosstabReport",
container: "#container",
events: {
reportCompleted: function (status, error) {
if (status === "ready") {
var columns = _.filter(report.data().components, function (component) {
return component.componentType == "crosstabDataColumn";
});
column2 = columns[1];
console.log(columns);
}
}
},
error: function (err) {
alert(err);
}
});
$("#sortAsc").on("click", function () {
report.updateComponent(column2.id, {
sort: {
order: "asc"
}
}).fail(function (e) {
alert(e);
});
});
$("#sortDesc").on("click", function () {
report.updateComponent(column2.id, {
sort: {
order: "desc"
}
}).fail(function (e) {
alert(e);
});
});
$("#sortNone").on("click", function () {
report.updateComponent(column2.id, {
sort: {}
}).fail(function (e) {
alert(e);
});
});
});

The associated HTML has the buttons to trigger the sorting:

TIBCO Software Inc.

Chapter 10 API Usage - Interactive Reports

10.10Sorting Crosstab Rows

This example shows how to sort the values in a given row of a crosstab (the columns are rearranged).
visualize({
auth: { ...
}
}, function (v) {
var row,
report = v.report({
resource: "/public/MyReports/crosstabReport",
container: "#container",
events: {
reportCompleted: function (status, error) {
if (status === "ready") {
row = _.filter(report.data().components, function (component) {
return component.componentType == "crosstabRowGroup";
})[0];
}
}
},
error: function (err) {
alert(err);
}
});
$("#sortAsc").on("click", function () {
report.updateComponent(row.id, {
sort: {
order: "asc"
}
}).fail(function (e) {
alert(e);
});
});
$("#sortDesc").on("click", function () {
report.updateComponent(row.id, {
sort: {
order: "desc"
}
}).fail(function (e) {
alert(e);

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

});
});
$("#sortNone").on("click", function () {
report.updateComponent(row.id, {
sort: {}
}).fail(function (e) {
alert(e);
});
});
});

The associated HTML has the buttons to trigger the sorting:

10.11Disabling the JIVE UI

The JIVE UI is enabled by default on all reports that support it. When the JIVE UI is disabled, the report is
static and neither users nor your script can interact with the report elements. You can disable it in your
visualize.report call as shown in the following example:
visualize({
auth: { ...
}
}, function (v) {
v.report({
resource: "/public/Samples/Reports/RevenueDetailReport",
container: "#reportContainer",
defaultJiveUi: { enabled: false },
error: function (err) {
alert(err.message);
}
});
});

Associated HTML:
<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>
<p>JIVE UI is disabled on this Visualize.js report:</p>
<div id="reportContainer">Loading...</div>

TIBCO Software Inc.

CHAPTER 11 VISUALIZE.JS TOOLS

This chapter provides two extended code examples that you can use to test various parts of your own
Visualize.js scripts.
This chapter contains the following sections:

Checking the Scope in Visualize.js

CSS Diagnostic Tool

11.1 Checking the Scope in Visualize.js

This example reads and displays the properties in the scope after visualize.report finishes rendering a report
(success).
visualize({
auth: { ...
}
}, function (v) {
createReport();
$("#selected_resource").change(function () {
//clean container
$("#container").html("");
createReport();
});
//enable report chooser
$(':disabled').prop('disabled', false);
function createReport(){
//render report from another resource
v("#container").report({
resource: $("#selected_resource").val(),
success: function(){
setTimeout(function () {
console.log("------------------Scope Check Results---------------------------");
console.log(scopeChecker.compareProperties(propertiesNames));
console.log("----------------------------------------------------------------");
}, 5000);

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

},
error:handleError
});
}
//show error
function handleError(err){
alert(err.message);
}
});

The ScopeChecker is another JavaScript used in this example. It can either be a separate .js file or included in
your HTML file as shown in this example:

<script>
function ScopeChecker(scope) {
this.scope = scope;
}
ScopeChecker.prototype.getPropertiesCount = function() {
return this.getPropertiesNames().length;
};
ScopeChecker.prototype.getPropertiesNames = function() {
return Object.keys(this.scope);
};
ScopeChecker.prototype.compareProperties = function(scope1PropertiesNames, scope2PropertiesNames)
{
if (!scope1PropertiesNames) {
throw "Properties for scope 1 not specified";
}
if (!scope2PropertiesNames) {
scope2PropertiesNames = this.getPropertiesNames();
}
var comparisonResult = {
added: [],
removed: [],
madeUndefined: [],
pollution: []
};
var i, j;
for (i = 0; i < scope1PropertiesNames.length; i++) {
comparisonResult.removed.push(scope1PropertiesNames[i]);
for (j = 0; j < scope2PropertiesNames.length; j++) {
if (scope1PropertiesNames[i] === scope2PropertiesNames[j]) {
comparisonResult.removed.pop();
break;
}
}
}
for (i = 0; i < scope2PropertiesNames.length; i++) {
comparisonResult.added.push(scope2PropertiesNames[i]);
for (j = 0; j < scope1PropertiesNames.length; j++) {
if (scope2PropertiesNames[i] === scope1PropertiesNames[j]) {

TIBCO Software Inc.

Chapter 11 Visualize.js Tools

comparisonResult.added.pop();
break;
}

for (i = 0; i < comparisonResult.added.length; i++) {

if (this.scope[comparisonResult.added[i]] === undefined) {
comparisonResult.madeUndefined.push(comparisonResult.added[i]);
} else {
comparisonResult.pollution.push(comparisonResult.added[i]);
}
}
return comparisonResult;
};

var propertiesNames = [];

var scopeChecker = new ScopeChecker(window);
propertiesNames = scopeChecker.getPropertiesNames();
</script>

<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js?_opt=true"></script>
<select id="selected_resource" name="report">
<option value="/public/Samples/Reports/1._Geographic_Results_by_Segment_Report"
>Geographic Results by Segment</option>
<option value="/public/Samples/Reports/2_Sales_Mix_by_Demographic_Report"
>Sales Mix by Demographic</option>
<option value="/public/Samples/Reports/3_Store_Segment_Performance_Report"
>Store Segment Performance</option>
<option value="/public/Samples/Reports/04._Product_Results_by_Store_Type_Report"
>Product Results by Store Type</option>
</select>

<div id="container"></div>

11.2 CSS Diagnostic Tool

The CSS diagnostic tool lets you load various CSS libraries and see how they interact or interfere with the CSS
that Visualize.js uses to render reports. It lets you choose your JasperReports Server from a static list, so that you
may try different themes on different servers. After you load a report using visualize.report, you can choose
to load a variety of popular CSS libraries and see if they affect your report. The list of reports to choose from is
also a static list, as shown in the HTML code below.
The key feature of this tool is the ability to set the isolateDOM property on the visualize.report function call.
This property modifies the CSS of the report so that it does not conflict with other CSS libraries. The downside
is that you cannot use the defaultJiveUi property in conjunction with isolateDOM, and the tool enforces this
by clearing the former if you select the latter.
Save the Javascript, HTML, and CSS for the CSS Diagnostic Tool to your environment, and edit the files to use
your server instances, your reports, and your Visualize.js code.

TIBCO Software Inc.

JasperReports Server Visualize.js Guide

// ** SETTINGS

100

TIBCO Software Inc.

Chapter 11 Visualize.js Tools

"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
$("#datepicker-user").datepicker();
$("#datepicker-user2").datepicker();
$( "#tabs" ).tabs();
$("#loadV").click(loadV);
fillSheetList();
loadCSS();
$(window).on("keypress", function(e){
var char = e.charCode - 49;
if (char < 1 && char > 9) return;
var input = $("#sheetList > li > input")[char];
if (!input) return;
$(input).trigger( "click" )
});
$("#isolateDOM").change(function() {
$("#defaultJiveUi").attr({
"disabled": $(this).is(':checked') ? "disabled" : null,
"checked": false
});
});
}
function loadCSS() {
var CSSlibs = [
{ disable: true, href: serverUrls[urlUsed] + "/themes/reset.css" },
{ disable: true, href: "//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" },
{ disable: true, href: "//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" },
{ disable: true, href: "//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" },
{ disable: true, href: "http://yui.yahooapis.com/3.16.0/build/cssreset/cssreset-min.css" },
{ disable: true, href: "http://tantek.com/log/2004/undohtml.css" },
{ disable: true, href: "//cdnjs.cloudflare.com/ajax/libs/sanitize.css/2.0.0/sanitize.css" },
{ disable: false, href:
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/vader/jquery-ui.css" }
];
var head = $("head"),
link;

TIBCO Software Inc.

101

JasperReports Server Visualize.js Guide

for (var i = 0, l = CSSlibs.length; i < l; i++) {

link = $("<link rel='stylesheet' type='text/css' href='" + CSSlibs[i].href + "' />");
head.append(link);
if (CSSlibs[i].disable) {
link.on("load", (function(link){
return function() {
$(link)[0].disabled = true;
fillSheetList();
}
})(link));
}
link.on("error", (function(link){
return function() {
$(link)[0].href += "-LOAD_ERROR"
fillSheetList();
}
})(link));
}
}
function loadV() {
var locale = $('#confLocale').val() || "en";
urlUsed = $('input[name="confServer"]:checked', '#containerLoadV').val();
var useOptimize = $('#confOptimized').is(":checked");
$.getScript(serverUrls[urlUsed] + "/client/visualize.js?_opt=" + useOptimize.toString(), function
() {
visualize({
auth: {
name: "superuser",
password: "superuser",
locale: locale
}
}, function (v) {
fillSheetList();
$("#loadV").remove();
$("#loadReports").show();
$("#addReport").on("click", function(){
var uri = $(),
defaultJiveUi,
isolateDOM
createReport(
v,
$("#selected_resource").val(),
$("#defaultJiveUi").is(':checked'),
$("#isolateDOM").is(':checked')
);
});
});
});
$("#loadV").html("Loading...").attr("disabled", "disabled");
$("#containerLoadV").addClass("disabled").children("input").attr("disabled", "disabled");
}
function createReport(v, uri, defaultJiveUi, isolateDOM) {

102

TIBCO Software Inc.

Chapter 11 Visualize.js Tools

var reportIndex = (+new Date() + "").substr(-5);

console.log(reportIndex)
reportsList[reportIndex] = "";
fillReportsList();
$("#reportContainer").append("<div id='vis_" + reportIndex + "'></div>");
$("#vis_" + reportIndex).addClass("qwe");
v.report({
server: serverUrls[urlUsed],
resource: uri,
container: "#vis_" + reportIndex,
error: function (err) {
alert(err.message);
},
defaultJiveUi: { enable: defaultJiveUi },
isolateDOM: isolateDOM || false,
success: function () {
fillSheetList();
reportsList[reportIndex] = uri;
fillReportsList();
//processIC(v, uri);
}
});
}
function processIC (v, reportUri) {
var inputControls = v.inputControls({
resource: reportUri,
success: function(data) {
console.log(data);
}
});
}
function fillReportsList() {
$("#reportsList").html("");
for (var reportIndex in reportsList) {
if (!reportsList.hasOwnProperty(reportIndex)) continue;
var uri = reportsList[reportIndex];
//if (uri)
var li = $("<li>" + (/[^\/][\w\.]+$/g.exec(reportsList[reportIndex]) || "Loading...") + " (<a
href='#'>remove</a>)</li>");
$("#reportsList").append(li);
li.children("a").click((function (reportIndex) {
return function (e) {
e.preventDefault();
$("#vis_" + reportIndex).remove();
delete reportsList[reportIndex];
$(e.target).parent().remove();
};
})(reportIndex));
}
}

TIBCO Software Inc.

103

JasperReports Server Visualize.js Guide

The HTML for the CSS diagnostic tool contains a static list of reports to load. Add your own reports to this list.
<script type="text/javascript">
window.addEventListener("load", onLoad);
</script>
<div style="width:327px;float: left;border-right:1px solid #333;margin-right:2px">
<h4>Settings</h4>
<div>
<div id="containerLoadV">
<div id="serverUrlsDiv"></div>
<label for="confLocale">Locale: </label>
<input id="confLocale" value="en" />

<br/>
<input id="confOptimized" type="checkbox" />
<label for="confOptimized" >- use optimized javascript </label>
<br/>
<button id="loadV">Load visualize</button>
<br/>

</div>
<div id="loadReports" style="display:none;">
<div>Add report:</div>
<input id="defaultJiveUi" type="checkbox" checked="checked" />

104

TIBCO Software Inc.

Chapter 11 Visualize.js Tools

<label for="defaultJiveUi" >- default JIVE UI </label>

<br/>
<input id="isolateDOM" type="checkbox" />
<label for="isolateDOM" >- isolate DOM </label>
<br/>
<select id="selected_resource" name="report" style="width:195px">
<option value="">-</option>
<option value="/public/Samples/Reports/1._Geographic_Results_by_Segment_Report"
>Geographic Results by Segment</option>
<option value="/public/Samples/Reports/2_Sales_Mix_by_Demographic_Report"
>Sales Mix by Demographic</option>
<option value="/public/Samples/Reports/3_Store_Segment_Performance_Report"
>Store Segment Performance</option>
<option value="/public/Samples/Reports/04._Product_Results_by_Store_Type_Report"
>Product Results by Store Type</option>
</select>
<button id="addReport">Add</button>
</div>
<p>Loaded reports list:</p>
<ul id="reportsList" style="overflow-wrap: break-word;display:inline;"></ul>
<div style="border-top:1px solid #333;width:100%"></div>
<h4>Stylesheets list:</h4>
<em>Use 1-9 keys to enable\disable css libs.</em>

<ul id="sheetList" style="display:inline;"></ul>

</div>
<div style="border-top:1px solid #333;width:100%"></div>
<div style="width:320px;">
<h4>User components</h4>

<div style="height: 240px;">
<div id="datepicker-user"></div>
</div>
<input id="datepicker-user2"/>


<div class="ui-widget">
<label for="tags">Autocomplete</label>
<input id="tags"/>
</div>


<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc</a></li>
<li><a href="#tabs-2">Pr dor</a></li>
<li><a href="#tabs-3">A laia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam
molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum.

TIBCO Software Inc.

105

JasperReports Server Visualize.js Guide

Phasellus ipsum. Nunc tristique tempus lectus.</p>

</div>
<div id="tabs-2">
<p>Morbi tincidunt, tellus pellentesque pretium posuere, felis lorem euismod felis, eu
ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede.
Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in
lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>


<div id="buttons_ui">
<button>Button with
<button>Button with
<button>Button with
<button>Button with
</div>

</div>

icon only</button>
icon on the left</button>
two icons</button>
two icons and no text</button>

</div>
<div style="margin-left:330px;height:100%">
<div id="reportContainer"></div>
</div>

Associated CSS:
.qwe {
height: 100%;
}
#reportContainer {
height: 100%;
}
body, html {
height: 100%;
}
#containerLoadV.disabled {
color: #666;
}
/**
* Break something: modify the CSS here to something visibly wrong.
* Add more elements, classes, or IDs to see if they affect Visualize.js content.
*/
table {
font-size: 25px;
}

106

TIBCO Software Inc.

INDEX

A
a element (hyperlink) 71
accessType 20, 22
adhocDataView 19
alignment of cells 88
anchor element 71
Area 28
AreaSpline 28
auth property 13
authentication
error 62
handling errors 63
authentication.error 62
awsDataSource 19

B
Bar 28
beanDataSource 19
beforeRender event 68, 72
Bubble 28

C
cancel 28, 50-51
canceling reports 39
canRedo event 83
canUndo event 83
cascading input controls 46
cell
alignment 88
background color 88, 92

TIBCO Software Inc.

font 88
text color 88, 92
Central Authentication Service (CAS) 13
changeTotalPages event 68
chart type 80
chart types 40
chartComponent 28
chartType 28
click event 72
Column 28
ColumnLine 28
ColumnSpline 28
components 31
conditional formatting 92
container 7
container.not.found.error 62
CSS (Cascading Style Sheets) 99
customDataSource 19

D
dashboard 19
drill-down 58
hyperlinks 58
parameters 53
refreshing 53
rendering 52
dashboard structure 52
dashlets 52
dataType 19
defaultJiveUi 25, 49, 62, 96
destroy 30, 50-51

107

JasperReports Server Visualize.js Guide

displaying multiple reports 34

displaying reports 32
Document Object Model 68
DOM 62
modifying 68
domainTopic 19
drill-down 58, 73
drill-down links 73
DualLevelPie 28

E
enum 19
errors 61
event
beforeRender 68, 72
canRedo 83
canUndo 83
changeTotalPages 68
click 72
pageFinal 68
reportCompleted 67, 88
events 28, 67
eventsMapper 28
Excel export 37
export 30
error 62
export formats 40
export.pages.out.range 62
exporting reports 37
external authentication 14

F
file 19
filtering table columns 86
folder 19
folderUri 19, 21-22
font 88
font size 88
forceTotalCount 20, 22
formatting table columns 88

H
href 32
hyperlink
accessing data 74
drill-down 73

108

modifying 71

I
input control
cascading 46
error 62
fetching 45
functions 44
handling errors 64
properties 43
structure 44
validate 65
widgets (UI) 45
input controls 43
input.controls.validation.error 62
inputControl 19
isolateDom 25, 49, 62
isolateDOM 99

J
jdbcDataSource 19
JIVE UI
conditional formatting 92
disabling 96
filtering tables 86
formatting tables 88
redo 83
sorting crosstabs 93, 95
sorting tables 85
undo 83
JIVE UI (interactivity) 77
jndiJdbcDataSource 19
JrsClient 8
JRXML 74
JSESSIONID cookie 17

L
label 44
licence.expired 62
licence.not.found 62
limit 19, 21
Line 28
linkOptions 25, 49, 72
links 31
linkTypeReferencelinkTypeReportExecution 32
listOfValues 19

TIBCO Software Inc.

Index

M
mandatory 44
masterDependencies 44
modifying chart type 80
mondrianConnection 19
mondrianXmlaDefinition 19
MultiAxisColumn 28
MultiAxisLine 28
MultiAxisSpline 28

N
net.sf.jasperreports.components.name 78
next page 35, 59

O
offset 19, 21
olapUnit 19
organization 13

P
pageFinal event 68
pages 25, 35-36, 49, 59
paginated 28
pagination
controls 35, 59
error 62
events 68
setting pages 35
parameters 32-33
dashboard 53
params 25, 49
password 13
PDF export 36
Pie 28
previous page 35, 59

TIBCO Software Inc.

properties
scope 97

Q
q 19, 21
query 19

R
range (pagination) 36
readOnly 44
recursive 19, 21-22
redo 30, 83
refresh 50-51
refreshing dashboard 53
refreshing reports 38
render 28, 50-51
rendering dashboards 52
report 73
canceling 39
conditional formatting 92
CSS 99
events 67
Excel 37
exporting 37
filtering tables 86
formatting tables 88
handling errors 64
hyperlinks 71
interactivity 77
JIVE 77
multiple 34
paginated 35, 59
PDF 36
refresh 38
rendering 32
setting pages 35
setting parameters 33
sorting crosstabs 93, 95
sorting tables 85
report properties 25, 49
report structure 31
report.execution.cancelled 62
report.execution.failed 62
report.export.failed 62
reportCompleted event 67
reportOptions 19

109

JasperReports Server Visualize.js Guide

reportUnit 19
repository 22
error 62
resource 25, 49
resource.not.found 62
resourceLookups 22
ResourcesSearch 21-22
run 28, 50-51

S
Scatter 28
schema.validation.error 62
scope of properties 97
search
handling errors 63
properties 63
secureMondrianConnection 19
semanticLayerDataSource 19
server 19
session
expired 62
login 13
logout 14
showHiddenItems 20, 22
single-sign-on (SSO) 13
slaveDependencies 44
sortBy 20, 22
sorting crosstab columns 93
sorting crosstab rows 95
sorting table columns 85
SpiderArea 28
SpiderColumn 28
SpiderLine 28
spinner 39
Spline 28
StackedArea 28
StackedAreaSpline 28
StackedBar 28
StackedColumn 28
StackedColumnLine 28
StackedColumnSpline 28
StackedLine 28
StackedPercentArea 28
StackedPercentAreaSpline 28
StackedPercentBar 28
StackedPercentColumn 28

110

StackedPercentLine 28
StackedPercentSpline 28
StackedSpline 28

T
table column types 40
text color 88, 92
TimeSeriesArea 28
TimeSeriesAreaSpline 28
TimeSeriesLine 28
TimeSeriesSpline 28
timezone 13
tooltip 32
totalPages 31
type 19, 21, 44
types 23

U
undo 30, 83
undoAll 30, 77
unexpected.error 62
unsupported.configuration.error 62
updateComponent 28, 77-78
uri 44
username 13

V
validating input controls 65
validating search properties 63
validationRules 44
virtualDataSource 19
visible 44
visualize
configuration 16
CSS 99
error 62
scope 97
tools 97
usage 9
visualize.config 16
visualize.js
contents 8
parameters 8
requesting 7

TIBCO Software Inc.

Index

X
xmlaConnection 19

TIBCO Software Inc.

111

JasperReports Server Visualize.js Guide

112

TIBCO Software Inc.

Corce
70% (46)
Corce
206 pages
Ap Computer Science Principles Practice Exam and Notes 2021
100% (4)
Ap Computer Science Principles Practice Exam and Notes 2021
108 pages
The Ethical Slut PDF
55% (69)
The Ethical Slut PDF
298 pages
Hacking The Art of Exploitation 2nd Edition Jon Erickson
100% (19)
Hacking The Art of Exploitation 2nd Edition Jon Erickson
492 pages
50 Phone Hacks DR - Brad
58% (19)
50 Phone Hacks DR - Brad
29 pages
Learn Python The Hard Way PDF
No ratings yet
Learn Python The Hard Way PDF
1 page
PrepTest C2 - Print and Take Test - 7sage Lsat
100% (1)
PrepTest C2 - Print and Take Test - 7sage Lsat
45 pages
SOLT33-08P-16P Configuration Manual
No ratings yet
SOLT33-08P-16P Configuration Manual
11 pages
BitCoin White Paper
100% (4)
BitCoin White Paper
9 pages
C# Cheat Sheet
100% (5)
C# Cheat Sheet
12 pages
Setup and Administration For SAP Cloud ALM
No ratings yet
Setup and Administration For SAP Cloud ALM
102 pages
NMON Analyser User Guide v34
No ratings yet
NMON Analyser User Guide v34
29 pages
Loadrunner
No ratings yet
Loadrunner
77 pages
PDF
100% (1)
PDF
568 pages
Logs
75% (4)
Logs
169 pages
Dan Gookin C For Dummies 2004
100% (4)
Dan Gookin C For Dummies 2004
411 pages
Edited Pega Resume
No ratings yet
Edited Pega Resume
4 pages
Jasper Reports
No ratings yet
Jasper Reports
42 pages
ACN Assignment
No ratings yet
ACN Assignment
13 pages
Internet Programming With Delphi (Marco Cantu)
No ratings yet
Internet Programming With Delphi (Marco Cantu)
14 pages
Pega Interview Questions
No ratings yet
Pega Interview Questions
15 pages
Panchatantramu (Padyakavyamu)
100% (1)
Panchatantramu (Padyakavyamu)
214 pages
Talend ESB GettingStarted UG 51 en
No ratings yet
Talend ESB GettingStarted UG 51 en
96 pages
Microsoft C# Coding Conventions
No ratings yet
Microsoft C# Coding Conventions
8 pages
Ec2 Ug PDF
No ratings yet
Ec2 Ug PDF
1,068 pages
PDF Web Api Interview Questions - Compress
No ratings yet
PDF Web Api Interview Questions - Compress
32 pages
The Three Main Pillars of Siebel Architecutre
100% (2)
The Three Main Pillars of Siebel Architecutre
10 pages
Blue Prism Installation (Server) - Setup of Blue Prism Software and Cost - CloudFoundation - Blog PDF
No ratings yet
Blue Prism Installation (Server) - Setup of Blue Prism Software and Cost - CloudFoundation - Blog PDF
19 pages
What Is A "Reverse Invoke" Setup
No ratings yet
What Is A "Reverse Invoke" Setup
4 pages
Python Tutorial For Beginners In Hindi (With Notes) - Code With Harry
No ratings yet
Python Tutorial For Beginners In Hindi (With Notes) - Code With Harry
39 pages
Oracle Communications Billing and Revenue Management
No ratings yet
Oracle Communications Billing and Revenue Management
51 pages
BI Solutions Using SSAS Tabular Model Succinctly
No ratings yet
BI Solutions Using SSAS Tabular Model Succinctly
174 pages
Data Validation: Dodda - Venkata Reddy
No ratings yet
Data Validation: Dodda - Venkata Reddy
13 pages
Python Generators PDF
No ratings yet
Python Generators PDF
6 pages
PLSQL Material
No ratings yet
PLSQL Material
84 pages
Rpa - Blueprism: Avinash Nyamati
No ratings yet
Rpa - Blueprism: Avinash Nyamati
9 pages
CIS COBOL Language Reference
No ratings yet
CIS COBOL Language Reference
308 pages
SAMComponentInstall 2005
No ratings yet
SAMComponentInstall 2005
64 pages
Nodejs Controlling Flow
No ratings yet
Nodejs Controlling Flow
63 pages
Testlink Tutorial
100% (1)
Testlink Tutorial
126 pages
TableauServer Security PDF
No ratings yet
TableauServer Security PDF
18 pages
Std06 Telugu
No ratings yet
Std06 Telugu
157 pages
SAM GettingStarted 2005
No ratings yet
SAM GettingStarted 2005
50 pages
SH Abda Ratna Karam
No ratings yet
SH Abda Ratna Karam
841 pages
Hanuman Chalisa
No ratings yet
Hanuman Chalisa
50 pages
BBCG M01 ConfiguringATrainingEnvironmentForDynamicsAX2012 PDF
No ratings yet
BBCG M01 ConfiguringATrainingEnvironmentForDynamicsAX2012 PDF
420 pages
User Manual: Insight IC-D and IC-M DC Electric Tool Controller
No ratings yet
User Manual: Insight IC-D and IC-M DC Electric Tool Controller
48 pages
Oracle SOA - POProcessing End - To - End - PPT
No ratings yet
Oracle SOA - POProcessing End - To - End - PPT
76 pages
Naalo
No ratings yet
Naalo
44 pages
3 Implementation: C:/bpm/solutions/03-Implementation - Zip
No ratings yet
3 Implementation: C:/bpm/solutions/03-Implementation - Zip
31 pages
Oracle Tax Setup For India
No ratings yet
Oracle Tax Setup For India
19 pages
Guardian UsersGuide
No ratings yet
Guardian UsersGuide
460 pages
Panuganti Sakshi 1 PDF
No ratings yet
Panuganti Sakshi 1 PDF
301 pages
Creating Custom Menu
No ratings yet
Creating Custom Menu
31 pages
Architectural Requirements For Cloud Computing Systems
No ratings yet
Architectural Requirements For Cloud Computing Systems
20 pages
Salesforce Rest Api
No ratings yet
Salesforce Rest Api
284 pages
Andhra Prasasthi by Viswanatha Satyanarayana
100% (1)
Andhra Prasasthi by Viswanatha Satyanarayana
77 pages
Getting Started With Alfresco Share Collaboration: Enterprise 3.4.0
No ratings yet
Getting Started With Alfresco Share Collaboration: Enterprise 3.4.0
23 pages
Configuration Practices For Agentry Based Mobile Application
No ratings yet
Configuration Practices For Agentry Based Mobile Application
44 pages
Python CS1002 PDF
No ratings yet
Python CS1002 PDF
210 pages
Performance Tuning Cognos
No ratings yet
Performance Tuning Cognos
12 pages
PP WebsitePaymentsStandard IntegrationGuide PDF
No ratings yet
PP WebsitePaymentsStandard IntegrationGuide PDF
460 pages
JasperReports Server REST API Reference
100% (1)
JasperReports Server REST API Reference
174 pages
REST API For IBM Cloud
No ratings yet
REST API For IBM Cloud
31 pages
Webmethods Provider & Consumer
No ratings yet
Webmethods Provider & Consumer
14 pages
Starfish Installation & Usage Guide
No ratings yet
Starfish Installation & Usage Guide
71 pages
UI Builder APIs
No ratings yet
UI Builder APIs
4 pages
JasperReports Server Security Guide
No ratings yet
JasperReports Server Security Guide
82 pages
Jaspersoft Studio User Guide
No ratings yet
Jaspersoft Studio User Guide
220 pages
DPI73
No ratings yet
DPI73
160 pages
DMZ Implementaion 12 1 For Isupplier
No ratings yet
DMZ Implementaion 12 1 For Isupplier
20 pages
JasperReports Server Admin Guide
No ratings yet
JasperReports Server Admin Guide
288 pages
Jaspersoft Studio User Guide
100% (2)
Jaspersoft Studio User Guide
270 pages
Jaspersoft Studio User Guide
100% (2)
Jaspersoft Studio User Guide
270 pages
Jaspersoft OLAP User Guide
No ratings yet
Jaspersoft OLAP User Guide
98 pages
JasperReports Server User Guide
100% (1)
JasperReports Server User Guide
288 pages
JasperReports Server Upgrade Guide
No ratings yet
JasperReports Server Upgrade Guide
61 pages
Formulir Kppa
No ratings yet
Formulir Kppa
3 pages
Coding With JavaScript For Dummies Everything To Know About JavaScript (2020) - 40153
100% (1)
Coding With JavaScript For Dummies Everything To Know About JavaScript (2020) - 40153
247 pages
Introductory Algebra
100% (4)
Introductory Algebra
214 pages
Eat That Frog
100% (10)
Eat That Frog
124 pages
NWO, Illuminati, Freemason, Occult, Bible Prophecy, Conspiracy, Secret Society, Etc. Links
No ratings yet
NWO, Illuminati, Freemason, Occult, Bible Prophecy, Conspiracy, Secret Society, Etc. Links
47 pages
The Linux Command Line
100% (4)
The Linux Command Line
537 pages
PowerShell Commands
No ratings yet
PowerShell Commands
4 pages
1100 Words You Need To Know
100% (2)
1100 Words You Need To Know
304 pages
Linux Cheat Sheet
No ratings yet
Linux Cheat Sheet
4 pages
Introduction To Computer Science
100% (6)
Introduction To Computer Science
202 pages
Hacking in Detail
0% (3)
Hacking in Detail
24 pages
American Relief Act 2025
100% (1)
American Relief Act 2025
116 pages
Complete Web Development Roadmap
67% (3)
Complete Web Development Roadmap
2 pages
The JavaScript Beginner's Handbook
90% (10)
The JavaScript Beginner's Handbook
76 pages
Simple Sabotage Field Manual
100% (2)
Simple Sabotage Field Manual
16 pages
Learn Javascript in A DAY!
100% (8)
Learn Javascript in A DAY!
192 pages
List of Programming Languages by Type
No ratings yet
List of Programming Languages by Type
35 pages
Mad Love - Pedophile Hearts, Disposable Teens, and The - Tracy R. Twyman - Anna's Archive
0% (1)
Mad Love - Pedophile Hearts, Disposable Teens, and The - Tracy R. Twyman - Anna's Archive
104 pages
Learn To Code Getting Started Guide
100% (4)
Learn To Code Getting Started Guide
23 pages
General Guidelines For Design and Construction of Concrete Diaphram (Slurry) Walls
No ratings yet
General Guidelines For Design and Construction of Concrete Diaphram (Slurry) Walls
108 pages
Cost Review Sheet - Wuye1
No ratings yet
Cost Review Sheet - Wuye1
16 pages
Singapore Architect April 2010-Architecture of Insanity-Erich Lindemann Centre
No ratings yet
Singapore Architect April 2010-Architecture of Insanity-Erich Lindemann Centre
3 pages
Simplenet Users Guide v2.0
No ratings yet
Simplenet Users Guide v2.0
28 pages
Fuji 2004
No ratings yet
Fuji 2004
24 pages
Cisco CCNA Exploration Network Chapter 3
No ratings yet
Cisco CCNA Exploration Network Chapter 3
17 pages
ff200 PDF
No ratings yet
ff200 PDF
36 pages
ARB Student Handbook
No ratings yet
ARB Student Handbook
35 pages
Concrete Forms
100% (1)
Concrete Forms
52 pages
BGP Route Reflector Lab PDF
No ratings yet
BGP Route Reflector Lab PDF
4 pages
Effective Way of Planting To Increase Yield of Brassica Rapa Subsp. Chinensis On The Backyard Raisin
No ratings yet
Effective Way of Planting To Increase Yield of Brassica Rapa Subsp. Chinensis On The Backyard Raisin
6 pages
High-Speed Milling of Hard Metals
No ratings yet
High-Speed Milling of Hard Metals
4 pages
How Do Buildings Mean? Some Issues of Interpretation in The History of Architecture Author(s) - William Whyte
No ratings yet
How Do Buildings Mean? Some Issues of Interpretation in The History of Architecture Author(s) - William Whyte
26 pages
Marikina
No ratings yet
Marikina
1 page
Mitigation Measures For Road Projects Cutting Through Tiger Corridors in The Eastern Vidarbha Landscape
No ratings yet
Mitigation Measures For Road Projects Cutting Through Tiger Corridors in The Eastern Vidarbha Landscape
6 pages
Xxjjjjxcisco Asa 8.4 On Gns3
No ratings yet
Xxjjjjxcisco Asa 8.4 On Gns3
4 pages
Parminder Bhatia: Industrial Experience
No ratings yet
Parminder Bhatia: Industrial Experience
3 pages
12godown Shed Plan-Model
No ratings yet
12godown Shed Plan-Model
1 page
IIB WSSecurity
100% (1)
IIB WSSecurity
65 pages
Forum Xda Developers Com LG l90 General Guide Flash Stock KD
No ratings yet
Forum Xda Developers Com LG l90 General Guide Flash Stock KD
27 pages
Fire Engineering - EIFS
No ratings yet
Fire Engineering - EIFS
3 pages
Bca Co Notes
No ratings yet
Bca Co Notes
81 pages
Wireless Body Area Network (WBAN)
No ratings yet
Wireless Body Area Network (WBAN)
21 pages
Lesson 10 UG77 UG120 New2
No ratings yet
Lesson 10 UG77 UG120 New2
16 pages