Write JS depend on browser functions

The realization of many personalized functions in reports is mostly realized by using JavaScript, so how can we write JavaScript to realize the functions with zero basis?

We can obtain the code corresponding to each element in the report through the "Inspect" in the browser, so that we can quickly edit the required JavaScript statements and add them to the template to achieve the desired function.

Here, take the designer's own "hyperlink" function as an example. Obtain the JavaScript code for adding hyperlinks through the browser. After trimming, use this code to realize the function of popping up a "dialog box" page after clicking the custom button. As shown below:

1. Prepare template

Using the hyperlink function frist that comes with the designer to realize the pop-up "dialog box" function.

1) Create a new general report, select cell A1, add a "hyperlink" to it, and hyperlink to the built-in template GettingStartedEN.cpt. As shown below:

2) Save the template and click "Pagination Preview". Effect as shown below:

2. Get code

When previewing the report, press F12 in the browser or right-click and select "Inspect", you can see the code of each element in the webpage. As shown below:

Select the hyperlink with the mouse, right-click and select "Inspect", it will jump to the code corresponding to the hyperlink, so that you can find the code that implements the hyperlink function through the browser, and copy the code. As shown below:

The copied code is as follows:

<span class="linkspan" style="cursor:pointer;" onclick="FR.doHyperlink(event||window.event, 
[{&quot;data&quot;:&quot;var as=arguments; return FR.tc(function(){FR.doHyperlinkByGet4Reportlet(
{\&quot;url\&quot;:\&quot;/webroot/decision/view/report?viewlet=%252FGettingStartedEN.cpt\&quot;,
\&quot;para\&quot;:{\&quot;__pi__\&quot;:true},\&quot;target\&quot;:\&quot;_dialog\&quot;,
\&quot;feature\&quot;:{\&quot;width\&quot;:600,\&quot;height\&quot;:400,\&quot;isCenter\&quot;:true,
\&quot;title\&quot;:\&quot;Region Sales Situation\&quot;},\&quot;title\&quot;:\&quot;Web Report1\&quot;})
}, this, as)&quot;,&quot;name&quot;:&quot;Web Report1&quot;}], true)">Test Hyperlink</span>

3. Organize the code

1) Organize the above code and copy the part that needs to be executed by the onclick action. Get the code:

FR.doHyperlink(event||window.event, [{"data":"var as=arguments; return FR.tc(function(){
FR.doHyperlinkByGet4Reportlet({\"url\":\"/webroot/decision/view/report?viewlet=%252FGettingStartedEN.cpt
\",\"para\":{\"__pi__\":true},\"target\":\"_dialog\",
\"feature\":{\"width\":600,\"height\":400,\"isCenter\":true,
\"title\":\"Region Sales Situation\"},\"title\":\"Web Report1\"})
}, this, as)","name":"Web Report1"}], true)

2) Due to the browser's need for parsing, the " will be escaped to """, and we need to replace it. Get the code:

FR.doHyperlink(event||window.event, [{"data":"var as=arguments; return FR.tc(function(){
FR.doHyperlinkByGet4Reportlet({\"url\":\"/webroot/decision/view/report?viewlet=%252FGettingStartedEN.cpt\",
\"para\":{\"__pi__\":true},\"target\":\"_dialog\",\"feature\":{\"width\":600,\"height\":400,\"isCenter\":true,
\"title\":\"Region Sales Situation\"},\"title\":\"Web Report1\"})}, this, as)","name":"Web Report1"}], true)

3）After this code is added as the content of the click event, some browser previews will report an error: event is not defined . At this time, delete event||.

Get the final code:

FR.doHyperlink(window.event, [{"data":"var as=arguments; return FR.tc(function(){
FR.doHyperlinkByGet4Reportlet({\"url\":\"/webroot/decision/view/report?viewlet=%252FGettingStartedEN.cpt\",
\"para\":{\"__pi__\":true},\"target\":\"_dialog\",\"feature\":{\"width\":600,\"height\":400,\"isCenter\":true,
\"title\":\"Region Sales Situation\"},\"title\":\"Web Report1\"})}, this, as)","name":"Web Report1"}], true)

4. Custom button

The function code of the pop-up "dialog box" has been obtained, and the function is realized through the "custom button" below.

1) Add a "Button" widget to A4, the button type is "Common", and the button name is "Pop up". As shown below:

2) Add a "Click" event to the "Button" widget, and the content of the event is the JavaScript code processed in Section II.3. As shown below:

5. Preview effect

Save the template, select "Data Entry Preview", click the button, you can also achieve the effect of a hyperlink pop-up dialog box. The effect is the same as I.

Click to download: 

Write_JS_depend_on_browser_functions.cpt