1. Scenario
After the FineReport report is parsed, it becomes an HTML page, using the jQuery framework. jQuery is a fast and concise JavaScript library that enables users to process HTML documents, events, realize animation effects more conveniently, and easily provide Ajax interaction for websites, and it is compatible with various browsers (IE 6.0+, FF 1.5+ , Safari 2.0+, Opera 9.0+), so users can use JS to perform various processing on the report. Users can use all the methods of the jQuery framework to operate the report. Based on this, FineReport also encapsulates many built-in JS methods. In this section, we will introduce the basic use of JS.
2. How To Use JS
2.1 Use in Report Template
1) JS mechanisms
When designing a template, the user can add JS events to widget, toolbar buttons, and the entire report. Each event corresponds to a function. When the report is converted to an HTML page, these functions will be added to the head of the HTML. When an event is triggered, such as when a button is clicked, or when a report is exported and printed, the corresponding function will be executed.
2) Import existing JS files
A single template imports external JS files: template > web attributes > Reference JavaScript;
All templates under the same report project uniformly import external JS files: Server> Server Configuration Manager > Reference JavaScript
Reference JS in relative path : relative to project directory like webapps, such as reference demo.js under webapps\webroot\help;
Reference JS in absolute path : such as D:\tomcat\webapps\webroot\WEB-INF\scripts\script.js.
3) event edit interface
Finereport has uniforn event edit interface, such as Button widget setting > event > add event. As it shown below:
2.2 Use JS in Custom Page
1) Use FineReport's JS method by obtaining the report in the iframe
For example, when the ID of the report embedded in the iframe is "reportFrame", the print preview method of the report is called as follows:
document.getElementById('reportFrame').contentWindow.contentPane.printPreview();
2) import JS files in Finereport and use its JS methods
<script type="text/javascript" src="/webroot/decision/view/report?op=resource&resource=/com/fr/web/jquery.js">
</script>
<script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script>
<script type="text/javascript">
function doPrint(){
var url="<a style="background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position-x: 0px;
background-position-y: center;
background-repeat: repeat;
background-size: auto;
border-bottom-color: currentColor;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: currentColor;
border-left-style: none;
border-left-width: 0px;
border-right-color: currentColor;
border-right-style: none;
border-right-width: 0px;
border-top-color: currentColor;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-style: none;
border-top-width: 0px;
bottom: auto;
box-sizing: content-box;
color: rgb(0, 51, 102);
float: none;
font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
font-size: 14px;
font-style: normal;
font-weight: normal;
height: auto;
left: auto;
line-height: 20px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: inherit;
outline-color: invert;
outline-style: none;
outline-width: 0px;
overflow: visible;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
right: auto;
text-align: left;
text-decoration: none;
top: auto;
vertical-align: baseline;
width: auto;
" href="http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt" "="">http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt";
//Port and ip are set according to the specific situationFR.doURLFlashPrint(url);
}
</script>If other versions of jQuery.js are introduced into this page, there may be JS conflicts. Therefore, it is recommended that you use FineReport's JS method by obtaining the report in the iframe.
3. JS Syntax
3.1 Regular JS Syntax
If a dialog box pops up in the event editing, use alert (need to pop up the content).
3.2 JQuery Syntax
The basic syntax of jQuery is: $("tr"), the dollar sign $ defines jQuery; the selector ("tr") can get the row of the page.
For more jQuery methods, please refer to the jQuery documentation.
3.3 Built-in JS Method of Report
The JS method defined in the report can be called directly in the event editor. For example, FR.doURLFlashPrint calls the old version of Flash print, the code is as follows:
FR.doURLFlashPrint("<a style="background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position-x: 0px;
background-position-y: center;
background-repeat: repeat;
background-size: auto;
border-bottom-color: currentColor;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: currentColor;
border-left-style: none;
border-left-width: 0px;
border-right-color: currentColor;
border-right-style: none;
border-right-width: 0px;
border-top-color: currentColor;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-style: none;
border-top-width: 0px;
bottom: auto;
box-sizing: content-box;
color: rgb(0, 51, 102);
float: none;
font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
font-size: 14px;
font-style: normal;
font-weight: normal;
height: auto;
left: auto;
line-height: 20px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: inherit;
outline-color: invert;
outline-style: none;
outline-width: 0px;
overflow: visible;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
right: auto;
text-align: left;
text-decoration: none;
top: auto;
vertical-align: baseline;
width: auto;
" href="http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt" "="">http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt");Both the 10.0 designer and deployment package use OpenJDK, and Flash printing cannot be started using OpenJDK, but Oracle/Sun JDK can be used.
Flash printing is currently a technology that has been eliminated. Many browsers will no longer support Flash printing. It is recommended that customers use zero client or local printing.
4. Autocomplete JS
When using JS statements in the FineReport designer to implement a certain function, in order to facilitate the user to input JS, FineReport provides the JS auto-completion function, the usage method is as follows:
4.1 Start the Automatic Completion Function
The designer does not execute the auto-completion function by default. Click File>Options>Editor Setting, and check the check box in front of "Execute this operation by default", as shown in the figure below:
4.2 Modify Shortcut Key Settings
The designer's built-in JS auto-completion shortcut key is Alt+/, but because different computers have different shortcut keys set by yourself, the default shortcut key may already be occupied. At this time, you need to modify the shortcut, double-click the auto-completion shortcut key: Alt+/ , Operate the shortcut you need through the keyboard, for example, change the auto-completion shortcut to Ctrl+Q, as shown in the figure below, in the shortcut modification box that pops up, first hold down Ctrl, and then press the Q key, in this way, the shortcut has been modified:
4.3 Effect View
Feel free to choose somewhere you can enter JS statements, for example, select a cell, right-click to select widget setting, click Event , add an initialization event, enter con in the JS input box on the right, and then operate the shortcut key Ctrl+ Q, list all keywords beginning with con in the lower right corner:
Previous：Overview
