Hyperlink Click to Open a Report in a Dialog Box and Pass Parameters by JS

Problem

In some special scenarios, when opening the report in a dialog box by clicking a hyperlink (for example, clicking a button to realize a hyperlink jump) cannot meet the requirements, you can use the custom JS to open a report in a dialog box, as shown in the following figure.

Implementation Method

You can use the built-in FineReport JS methods showDialog, doHyperlinkByPost, or doHyperlinkByGet to open the report.

Report Design

Create a template and enter Open Report in cell B2, as shown in the following figure.

JS Code Adding

Select cell B2 and choose Hyperlink > JavaScript, as shown in the following figure.

Use the showDialog code as follows:

Note:

1. You can adjust the template path in the code according to the actual location of the template. You can also adjust the height and width of the dialog box. For details, see code comments. The parameter names need to be consistent with those of the opened template.

2. If the Video Playback Plugin is used in a dialog box to play videos, after the template preview, the video may continue to be played even when  the dialog box is closed. In FineReport 11.0.2 and later versions, you can solve the problem by the following destroyOnClose:true code.

//Template path.
var url = encodeURI(encodeURI("/webroot/decision/view/report?viewlet=GettingStartedEN.cpt&op=view&Region=California"));
//Iframe.
var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>");
//Set the src attribute of the iframe to the template path.
$iframe.attr("src", url);
//Iframe attribute.
var o = {
    title: "Dialog Box",    //Title.
    destroyOnClose:true,   //Determine whether to remove the dialog box from dom when the dialog box is closed.
    width: 1000,         //Width.
    height: 700,        //Height.
    //closable:true,    //Determine whether to display the closing button. The default value is true.
    //confirm:true,     //Determine whether to add the button for confirming cancellation. The default value is false.
    //draggable:true   //Determine whether dragging is allowed. The default value is true.
};
//Iframe pop-up.
FR.showDialog(o.title, o.width, o.height, $iframe, o);

Show Code

When you use the built-in JS method showDialog to open a dialog box by clicking a hyperlink, you can modify the style of the dialog box by adding code to modify the style behind the code.

Note:

The following code used to modify the style of the dialog box can only be used in general reports. If you need to use the code in FRM reports, you need to use F12 to obtain the corresponding elements and modify the code.

1. Centering the title

$('.fr-core-window-header ').css("text-align", "center");

2. Modifying the background color of the title

$('.fr-core-window-header ').css("background","red");

3. Hiding the closing button of the window in the upper right corner of the dialog box

$('.fr-core-panel-tool-close').hide();

4. Removing the title text of the dialog box

$('.fr-core-panel-title').hide();

5. Modifying the color of the title text of the dialog box

$('.fr-core-panel-title').css("color","blue")

6. Modifying the top corner of the dialog box from rounded to square

$('.fr-core-window').css("border-radius", "0 0 0 0");
$('.fr-core-window-header').css("border-radius", "0 0 0 0")

Effect Display

Save the report. The effect is the same as that shown in section "Problem".

Note:

The effect cannot be previewed on mobile terminals.

Report Design

Same as section "Report Design" in "Example One".

Code Adding

Select cell B2 and choose Hyperlink > JavaScript, as shown in the following figure.

Use the doHyperlinkByPost code as follows:

FR.doHyperlinkByPost({
//Report path.
"url":"/webroot/decision/view/report?viewlet=GettingStartedEN.cpt",    //Parameter.
"para":{
"__pi__":true,    //Determine whether to display the parameter panel.
"Region":"California"
},
"target":"_dialog",    //Open the report in a dialog box.
"feature":{
"width":1100,
"height":800,
"isCenter":true,     //Determine whether to center the dialog box.
"title":"Title"
}
})

Show Code

Effect Display

Save the report and click Pagination Preview. The effect is the same as that shown in section "Problem."

Report Design

Same as section "Report Design" in "Example One".

Code Adding

Select cell B2 and choose Hyperlink > JavaScript, as shown in the following figure.

Use the doHyperlinkByGet code as follows:

FR.doHyperlinkByGet({
//Report path.
"url":"//webroot/decision/view/report?viewlet=GettingStartedEN.cpt",    //Parameter.
"para":{
"__pi__":true,    //Determine whether to display the parameter panel.
"Region":"California"
},
"target":"_dialog",    //Open the report in a dialog box.
"feature":{
"width":1100,
"height":800,
"isCenter":true,     // Determine whether to center the dialog box.
"title":"Title"
}
})
Show Code

Effect Display

Save the report and click Pagination Preview. The effect is the same as that shown in section "Problem."

For details, you can click to download templates Example 1.cpt, Example 2.cpt, Example 3.cpt.