I. Overview
1) JavaScript is also an approach to creating hyperlinks. FineReport provides a set of JavaScript APIs whereby we can realize more hyperlink effects.
2) This article introduces how to jump to another report through JavaScript, which shares some effects with using a web report, but JavaScript allows us to set effects flexibly. Here, an easy way to use APIs will be referred to, and we only need to copy the codes provided.
3) You may refer to Basic Settings of Hyperlinks.
II. Open a report in a new window or in the current page
1. Design a report
Input “See sales report” in B2, add borders and set center alignment.
2. Insert the JavaScript
1) Click B2, insert a hyperlink in the right-hand pane, and select [JavaScript] as the type.
2) The [JavaScript] setting interface pops up.
3. Edit the JavaScript
1) Input the following script in the input box.
window.open("${servletURL}?viewlet=GettingStartedEN.cpt");
The path consists of two parts:2) Explanation of the script: The parameter transferred to window.open() is the path of the target report.
| ${servletURL}?viewlet= | This is the default prefix, which means searching the target report in the folder reportlets in the current server |
| GettingStartedEN.cpt | This means the path of the target report relative to the folder reportlets |
4. Preview
Click See sales report. A new window appears, whose content is consistent with GettingStartedEN.cpt.
5. Set the way to open the target report
1) Set the way to open the target report for the second parameter transferred to window.open(); the default value is "_blank", which means that the report will be opened in a new window.
window.open("${servletURL}?viewlet=GettingStartedEN.cpt", "_blank");
2) If the second parameter is "_self", then the report will be opened in the current page after preview.
window.open("${servletURL}?viewlet=GettingStartedEN.cpt", "_self");
III. Transfer parameters when opening the report
1. Create a new dataset
1) Create a new DB Query dataset [ds1].
2) Input the following SQL statement to extract all values of [Region] :
SELECT DISTINCT Region FROM Sales_Volume
3) Preview the dataset. Values of [Region] include East China and North China.
2. Design the report
Drag [region] in [ds1] into B5, add borders and set center alignment.
3. Insert the JavaScript
Click B5, insert a hyperlink and select [JavaScript] as the type.
4. Set the JavaScript and transfer parameters
1) Edit the hyperlink in B5. Click + to add a parameter named region, select [Formula] as the type of the parameter value and input $$$ in the pop-up formula input box.
2) Input the following in the JavaScript input box.
At this time, the transferred parameter has been added after the path of the target report:
| ®ion= | Here, region is a parameter in the target report, which will receive the value transferred by the hyperlink. The parameter must be preceded by an &. |
| + region | Here, region is the parameter you have added above the JavaScrip, whose value is the current cell value. |
window.open("${servletURL}?viewlet=GettingStartedEN.cpt®ion=" + region);
5. Preview
1) Two hyperlinks, i.e., East China and North China, appear in the report.
2) A new window appears when clicking either of the hyperlinks. The content of the new window is consistent with the report body in GettingStartedEN.cpt, but the default values of Region are East China and North China respectively. In other words, by transferring parameters through JavaScript, you can control the default values of parameters in the target report.
6. Display no parameter pane of the target report by transferring parameters
1) Edit the hyperlink in B5. Click + to add a parameter named pi, maintain the type of the parameter value as [Character], which is the default option, and input false.
2) Input the following in the JavaScript input box. At this time, a new parameter has been added after the path of the target report:
| &__pi__= | Here, __pi__ is the name of the parameter to be received in the target report. The parameter must be preceded by &. There are two underlines before and after pi respectively. |
| + pi | Here, pi is the parameter you have added to above the JavaScript, whose value is false. The parameter pane of the target report may not be displayed. |
window.open("${servletURL}?viewlet=GettingStartedEN.cpt®ion=" + region + "&__pi__=" + pi);
7. Preview
1) Two hyperlinks, namely East China and North China, appear in the report.
2) A new window appears when clicking either of the hyperlinks. The content of the new window is consistent with the report body in GettingStartedEN.cpt, but no parameter pane is displayed. Sales data in East China and North China is directly displayed.
8. Optimize the JavaScript when transferring multiple parameters
1) window.open() itself can receive more than one parameter. If the first parameter (i.e., the URL of the target report) is long, then the JavaScript will be unreadable.
2) It is recommended to first define a parameter named targetReport in the JavaScript to store the URL of the target report. When calling window.open(), if targetReport is regarded as the first parameter, then the same effect can be realized.
var targetReport = "${servletURL}?viewlet=GettingStartedEN.cpt®ion=" + region + "&__pi__=" + pi;window.open(targetReport); |
IV. Open the report through a dialog box
1. Modify the JavaScript
Edit the hyperlink in B5. Modify the JavaScript into the following:
var dialogContent = $("<iframe id='dlg' name='sales' width='100%' height='100%' scrolling='yes' frameborder='0'>");
/*
Create am iframe element. Here the value of 'width' and 'height' means the iframe will occupy all the area of the dialog box.
Note that in this scenario, the iframe is not equal to a dialog box, yet we utilize iframe to display the report content.
*/
var targetReport = "${servletURL}?viewlet=GettingStartedEN.cpt®ion=" + region + "&__pi__=" + pi;
/*
Determine the url of the target report.
*/
dialogContent.attr("src", targetReport);
/*
By default, an iframe element owns an attribute named 'src'.
The value of 'src' should be an url and iframe will display the content of this url.
In this scenario, we assign targetReport as the value of 'src'.
*/
var dialogStyle = {
title: "Sales Report",
width: 1100,
height: 700
};
/*
Create an object named 'dialogStyle'.
Here we define 3 properties for this object, and they will be used to control the title, width and height of the iframe respectively.
You can change the property values according to the usage scenario.
*/
FR.showDialog(dialogStyle.title, dialogStyle.width, dialogStyle.height, dialogContent);
/*
Invoke FR.showDialog() to show a dialog box.
This method receives 4 parameters: the title, width, height and content of the dialog box.
*/
2. Preview
1) Two hyperlinks, namely East China and North China, appear in the report.
2) A dialog box appears in the current page when clicking either of the hyperlinks. The content of the new window is consistent with the report body in GettingStartedEN.cpt, but no parameter pane appears. Sales data in East China and North China is directly displayed.
V. How to correctly quote the path of the target report
1. Method 1
1) Modify the text in B2 into: See sales dashboard.
2) Click to modify the JavaScript.
3) Modify the JavaScript into the following:
window.open("${servletURL}?viewlet=demo/Chart/Chart Linkage.frm");
2. Preview
Click See sales dashboard. A new window appears, whose content is consistent with that in demo/Chart/Chart Linkage.frm.
3. Method 2
Modify the JavaScript in B2 into the following. The preview effect remains unchanged.
window.open("/webroot/decision/view/report?viewlet=demo/Chart/Chart Linkage.frm");
Note:Hyperlinks in FineReport do not support relative paths. Even if the target report and the current report are stored under the same path, you have to give the complete path of the target report in order to jump to it through JavaScript, and the path is relative to the folder reportlets.
