Crystal Report JS Develop Guide
Crystal Report JS Develop Guide
1 Document History. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
SAP BusinessObjects Business November 2015 Updated the guide with branding
Intelligence platform 4.2 changes.
SAP BusinessObjects Business March, 2017 The following 5 new APIs were added
Intelligence platform 4.2, Support within API reference → SAP.CR.Viewer
Package 4
● setEnableDrillDown
● setToolPanelViewMode
● setHasToggleGroupTreeButton
● setHasToggleParameterPanelButt
on
● setHasSearchButton
With the SAP Crystal Reports JavaScript API, you can display Crystal reports content in an embedded web
application without any client-side component installation. The JavaScript API lets you customize the report
viewer, and add interactivity to your Crystal reports content. You can develop your web application in any
language that uses JavaScript, because reports are generated in DHTML.
The JavaScript API supports most OpenDocument parameters. If you previously used OpenDocument URLs to
link to reports stored in the BI Platform repository, you can transition to the JavaScript API without losing
functionality.
The SAP Crystal Reports JavaScript API is included as part of the SAP BusinessObjects Business Intelligence
Platform installation. The API can be accessed by referencing the ViewerSeed.js file located on the BIP
server.
1. Find the location of the ViewerSeed.js file. In a typical BIP installation, the file is available at the following
location: http://localhost:8080/clientapi/CR/ViewerSeed.js
2. Retrieve a logon token to use for BI platform authentication.
3. Add a reference to the ViewerSeed.js file to your web application.
4. Add the CR Embedded viewer to your web application.
5. Set the report source.
Note
If you are developing your application on your local computer instead of on deployed to a web server, the
Adobe Flash Player may prevent the Flex prompting dialog from appearing. You can resolve this issue by
deploying your application to a web server or designating your application content as trusted in the Flash
Player Global Security Settings.
<script src="http://localhost:8080/clientapi/CR/ViewerSeed.js">
3. Create a token variable, which will hold the logon token and set it to null.
4. Create a function called init that sets the value of token to the logon token and creates a new JavaScript
viewer instance.
Refer to the Business Intelligence Platform RESTful Web Services Developer Guide for information on
generating a logon token.
init(){
token = "logonToken";
SAP.CR.Viewer.create("viewerName","container",onViewerInit);
}
function onViewerInit(viewerInstance){
viewerInstance.setReportSource('reportID', token);
}
<body onload="init()">
This calls the initialization function once the page is fully loaded, which causes any text or buttons coded
into the body to load before the report viewer.
7. Within the style tag create a new class that defines the position and size of the JavaScript viewer. In the
code below the viewer is given absolute positioning. Its width and height will be 75% of the size of the width
and height of the page the viewer will be opened in. The position of the viewer in the page is specified by
the left and top properties.
.viewerStyle
{
position : absolute;
left : 12.5%;
top : 20.5%;
width : 75%;
height : 75%;
}
8. Within the body tags add code to set the style of the viewer.
The following example opens a report with report ID 1234 in a report viewer given the name crystalViewer. The
value set to the token variable in the init function is an example.The value you use must be generated by you.
The viewer is given absolute positioning. Its width and height will be 75% of the size of the width and height of
the page the viewer will be opened in. The position of the viewer in the page is specified by the left and top
properties. The onViewerFailure function is optional.
<head>
<script src="http://computername/clientapi/CR/ViewerSeed.js">
<script>
var token = null;
function init(){
token = "COMMANDCOM-LCM:6400@{3&2=5328,U3&p=40676
.8926203819,Y7&4F=12,U3&63=secEnterprise
,0P&66=60,03&68=secEnterprise:Administrator
,0P&qe=100,U3&vz=IVD21LbMCB0eRiI4at
z9sNL18Ux5anRBdYB9fFv5NrY,UP}";
SAP.CR.Viewer.create("crystalViewer", 'viewerContainer1', onViewerInit,
onViewerFailure);
</script>
</head>
<style>
.viewerStyle
{
position : absolute;
left : 12.5%;
top : 20.5%;
width : 75%;
height : 75%;
}
</style>
<body>
</body>
The JavaScript API allows you to show or hide the following browser controls in the JavaScript viewer:
● The left panel (used to find, set parameters and view the Group Tree.)
● The toolbar.
● The status bar.
● The page navigation bar.
This is done by setting the control to true or false. By default all browser controls are set to true.
Example
The following code causes all control bars and panels to be displayed, except for the status bar.
The JavaScript API allows you to customize the color and font used in the JavaScript viewer.
Example
The following example changes the color of the viewer to a light purple gradient and the font to Times. The first
parameter in the setThemeColor method is the hexidecimal representation of a color. Use of true instead of
false as the boolean value of the second parameter gives the viewer a solid color instead of a gradient.
SAP.CR.Viewer.ThemeManager.setThemeColor("#CDB7F9", false);
SAP.CR.Viewer.ThemeManager.setThemeFont("times");
The JavaScript API supports canvas and action event listeners. Event listeners detect when a certain event has
occured, and then trigger a response. Canvas events are mouse events (clicks and mouse-overs) that occur on
the report canvas. Action listeners deal with action events, such as clicking a button or selecting an item from a
list.
Example
The following code causes report objects to get highlighted in green on a mouseover event. When the curser
leaves the report object the background color property is cleared. This means that the default background
color of the object is not restored.
canvasListener.onEvent(SAP.CR.Viewer.CanvasEvents.REPORT_ELEMENT_MOUSE_ENTER,func
tion(args){
args.target.style.backgroundColor="green";
});
canvasListener.onEvent(SAP.CR.Viewer.CanvasEvents.REPORT_ELEMENT_MOUSE_LEAVE,func
tion(args){
args.target.style.backgroundColor=" ";
});
viewerInstance.addCanvasListener(canvasListener);
This section provides a reference of the classes and methods in the JavaScript API.
4.1 SAP.CR.Viewer.ActionListener
The ActionListener class allows you to add custom functionality for viewer action events, for most items in
the toolbar.
Syntax
4.1.1 onEvent
The onEvent method registers an action listener for an event. Multiple listeners can be registered for the same
event.
Syntax
Parameters
SAP.CR.Viewer.ActionEvents User drills down to the report from the group tree,
.DRILL breadcrumb, content or a chart.
SAP.CR.Viewer.ActionEvents User clicks on a group tree node that changes the page
.GROUP_TREE_NAVIGATE being viewed.
● listener - [function(arg)] Custom function that you define, that determines what happens when the
event occurs. The parameter arg can be given any name except for JavaScript keyword names, and is
created by the handler of the report viewer and passed to the function.
4.1.2 removeEvent
The removeEvent method removes listeners from an ActionListener object. The method can be used to
remove a specific listener, with an associated event name or to remove all listeners with an associated event
name.
Syntax
Parameters
SAP.CR.Viewer.ActionEvents User drills down to the report from the group tree,
.DRILL breadcrumb, content or a chart.
SAP.CR.Viewer.ActionEvents User clicks on a group tree node that changes the page
.GROUP_TREE_NAVIGATE being viewed.
● listener - [function(arg)] The specific listener to be removed. A custom function defined by the user
when the event listener was created.
4.2 SAP.CR.Viewer.CanvasListener
The CanvasListener class allows you to add custom functionality for mouse events that occur on the report
page.
Syntax
4.2.1 onEvent
The onEvent method registers a canvas listener for an event. Multiple listeners can be registered for the same
event.
Parameters
Value Description
● listener - [function(arg)] Custom function that you define, that determines what happens when the
event occurs. The parameter arg can be given any name except for JavaScript keyword names, and is
created by the handler of the report viewer and passed to the function.
The removeEvent method removes listeners from a CanvasListener object. The method can be used to
remove a specific listener, with an associated event name or to remove all listeners with an associated event
name.
Syntax
Parameters
Value Description
● listener - [function(arg)] The specific listener to be removed. A custom function defined by the user
when the event listener was created.
4.3 SAP.CR.Parameter
The SAP.CR.Parameter class allows you to create parameters and add them to a viewer instance. The class
can also be used to set parameter values in a sub-report.
Syntax
Parameters
● parameterName - [String] The name of the parameter in the report. This value is often pre-defined by the
report.
● parameterType - The type of the parameter.
Possible values:
Value Description
4.3.1 addValue
Syntax
Parameters
● val - Parameter value. The type depends on parameterType. Can be a discreet or range value.
4.3.2 setReportName
Sets the parameters of a sub report. If you do not use the setReportName method the parameters are
automatically set to the main report.
Syntax
● subReportName - [String] Name of the sub report you are setting the parameters to.
Example
The following example creates a new parameter of type SAP.CR.DataTypes.NUMBER, and adds it to the sub
report with name subReport1.
4.4 SAP.CR.Parameter.RangeValue
The SAP.CR.Parameter.Range class is used to specify a range of values for a parameter. The
SAP.CR.Parameter.Range object is added to an SAP.CR.Parameter object using the addValue method.
Syntax
4.4.1 setBeginValue
Syntax
Value Description
The type must be the same as that of the parameter the range value will be added to.
4.4.2 setEndValue
Syntax
Value Description
The type must be the same as that of the parameter the range value will be added to.
4.4.3 setLowerBound
Syntax
Value Description
4.4.4 setUpperBound
Syntax
Parameters
Value Description
4.5 SAP.CR.Viewer
The SAP.CR.Viewer class contains methods that allows you to create an instance of the report viewer, and to
customize and add functionality to it.
4.5.1 addActionListener
Syntax
Parameters
● aListener - Name of the action listener you are adding. Must be an instance of SAP.CR.ActionListener.
4.5.2 addCanvasListener
Syntax
● cListener - Name of the canvas listener you are adding. Must be an instance of SAP.CR.CanvasListener.
4.5.3 batchExecute
The batchExecute method ensures that API calls are executed synchronously.
Syntax
Parameters
● function - [function()] Function defined by you that contains the API calls to be executed in the order
they are to be executed.
Example
The following example drills down on a group path and then sets the page number to 2. If the batchExecute
method was not used, two asynchronous calls would be sent to the server at the same time. This would cause
only one of the two API calls to occur.
4.5.4 create
SAP.CR.Viewer.create(viewerName,containerID,initCB,failCB)
Parameters
4.5.5 drilldown
Syntax
Parameters
● groupPath - An array of integers, which displays the path you have drilled down on.
4.5.6 getInstance
Syntax
4.5.7 refresh
Refreshes the report displayed in the JavaScript viewer. The method refreshes the data in the report being
displayed and if necessary prompts for parameters or logon information.
Syntax
4.5.8 removeActionListener
Syntax
Parameters
4.5.9 removeCanvasListener
Parameters
4.5.10 setDisplayBreadcrumb
Syntax
Parameters
4.5.11 setDisplayLeftPanel
Show or hide the left panel, which can be used as the find panel, to view the Group Tree, or to view and edit
parameters.
Syntax
4.5.12 setDisplayStatusBar
Show or hide the status bar along the bottom of the report viewer.
Syntax
Parameters
● isStatusBar - [Boolean] Set to true to show status bar or false to hide status bar.
4.5.13 setDisplayToolbar
Syntax
Parameters
Shows or hides the logo in the top, right corner of the report viewer. By default the logo is shown.
Note
Syntax
Parameters
● isLogo - [Boolean] Set to true to show the logo or to false to hide it.
4.5.15 setHasRefreshButton
Shows or hides the refresh button in the report viewer's toolbar. By default the refresh button is hidden.
Note
Syntax
Parameters
● isRefreshButton - [Boolean] Set to true to show the refresh button or to false to hide it.
Sets the image to be used as a logo in the top, right corner. Allows you to link a url to the logo and set a tooltip
for when you mouseover the logo.
Note
Note
Syntax
Parameters
● url - [String] Relative or absolute path to the image to be used as the logo.
● link - [String] The url that will be opened when the user clicks the logo.
● tooltip - [String] The tooltip that appears when you mouseover the logo. If it contains non-English
characters it must be encoded.
4.5.17 setPageNumber
Syntax
● pageNumber - [number] A positive number. If larger than the number of pages in the report the page
number is set to the last page in the report.
4.5.18 setParameters
Sets report parameters. Multiple parameters can be set in one call of the method.
Syntax
Parameters
4.5.19 setPrintMode
Sets the print mode of the report viewer to either ACTIVEX or PDF.
Note
Syntax
Value Description
4.5.20 setPromptOnRefresh
Sets whether or not the viewer prompts for new parameter values after being refreshed. By default the viewer
prompts for new parameter values.
Note
Syntax
Parameters
● isPrompt - [Boolean] Set to true to prompt for new parameters or to false to use existing parameter
values.
4.5.21 setReportMode
Sets the color of the background behind the report page and the alignment of the report pages in the report
viewer.
Note
Parameters
● mode - Sets the color and alignment of the report page in the report viewer.
Possible values:
Value Description
SAP.CR.Viewer Sets the background of the report viewer to white. Report pages are
.ReportMode.WEB not center aligned in the viewer.
4.5.22 setReportSource
Sets the report source based on a numerical object ID and an enterprise session. If needed you can also set the
document locale.
Syntax
Parameters
Syntax
Parameters
● <enableDrillDown> - [Boolean] Set to 'true' to enable drill down, and 'false' to disable drill down.
Caution
The method must be called before the viewer has initialized, or an exception is thrown.
4.5.24 setToolPanelViewMode
Syntax
Parameters
Value Description
Caution
The method must be called before the viewer has initialized, or an exception is thrown.
4.5.25 setHasToggleGroupTreeButton
Syntax
Parameters
● <hasToggleGroupTreeButton> - [Boolean] Set to 'true' to display the group tree button, and 'false' to
hide it.
Caution
The method must be called before the viewer has initialized, or an exception is thrown.
4.5.26 setHasToggleParameterPanelButton
Parameters
Caution
The method must be called before the viewer has initialized, or an exception is thrown.
4.5.27 setHasSearchButton
Syntax
Parameters
● <hasSearchButton> - [Boolean] Set to 'true' to display the group tree button, and 'false' to hide it.
Caution
The method must be called before the viewer has initialized, or an exception is thrown.
4.6 SAP.CR.Viewer.ThemeManager
The ThemeManager class allows you to set the color and font style used in the viewer.
Syntax
SAP.CR.Viewer.ThemeManager.setThemeColor(hexColor,isSolid);
Parameters
● hexColor - [String] The hexadecimal representation of the color being used. Value always starts with the
# symbol.
● isSolid - [Boolean] Set to true for a solid color or set to false for a gradient color.
4.6.2 setThemeFont
Sets the family font name used in the JavaScript viewer UI. This does not effect the font used in the report
being viewed.
Syntax
SAP.CR.Viewer.ThemeManager.setThemeFont(font);
Parameters
● font - [String] The font to be used in the viewer. Any browser supported fonts can be used.
Hyperlinks
Some links are classified by an icon and/or a mouseover text. These links provide additional information.
About the icons:
● Links with the icon : You are entering a Web site that is not hosted by SAP. By using such links, you agree (unless expressly stated otherwise in your
agreements with SAP) to this:
● The content of the linked-to site is not SAP documentation. You may not infer any product claims against SAP based on this information.
● SAP does not agree or disagree with the content on the linked-to site, nor does SAP warrant the availability and correctness. SAP shall not be liable for any
damages caused by the use of such content unless damages have been caused by SAP's gross negligence or willful misconduct.
● Links with the icon : You are leaving the documentation for that particular SAP product or service and are entering a SAP-hosted Web site. By using such
links, you agree that (unless expressly stated otherwise in your agreements with SAP) you may not infer any product claims against SAP based on this
information.
Example Code
Any software coding and/or code snippets are examples. They are not for productive use. The example code is only intended to better explain and visualize the syntax
and phrasing rules. SAP does not warrant the correctness and completeness of the example code. SAP shall not be liable for errors or damages caused by the use of
example code unless damages have been caused by SAP's gross negligence or willful misconduct.
Gender-Related Language
We try not to use gender-specific word forms and formulations. As appropriate for context and readability, SAP may use masculine word forms to refer to all genders.
SAP and other SAP products and services mentioned herein as well as
their respective logos are trademarks or registered trademarks of SAP
SE (or an SAP affiliate company) in Germany and other countries. All
other product and service names mentioned are the trademarks of their
respective companies.