Button Click to Open a Report in a Dialog Box by JS

Expected Effect

How to embed a report in an iframe? The following figure shows the effect.

Implementation Method

You can add a click event for a button widget. The event is used to add an iframe pop-up box, embed a template in the box, and use remoteServletURL to obtain the template path.

Button Widget Adding

Create a general report, click the Widget Setting icon on the right attribute panel, add a button widget, and name the button Click the Pop-up Box, as shown in the following figure.

Click Event Adding

Select the button widget, click the Widget Setting icon on the right attribute panel, click Event, click +, and select Click.

Add the parameter cc, select Formula in Value, enter the formula remoteServletURL to obtain the template path, and enter the JavaScript code, as shown in the following figure. With this event, you can click the button to preview the template GettingStartedEN.cpt in the pop-up box.

The JavaScript code is as follows:

Note:

The suffix of src needs to be modified based on the corresponding URL. If you are redirected to an FRM report, you can modify the suffix to ?viewlet=Template name.frm.

var iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='yes' frameborder='0'>");
// Name the iframe parameter in the dialog box. The template is displayed in 100% width and height by default. Scrolling down is allowed.
iframe.attr("src", cc+"?reportlet=GettingStartedEN.cpt");
// Add the src attribute for the iframe.
var o = {
width : 700,// Width of the dialog box  
height: 500// Height of the dialog box
};
FR.showDialog("Add", o.width, o.height, iframe,o);// The dialog box pops up.

If the opened template is in the subfolders of the reportlets folder in FineReport installation directory\webapps\webroot\WEB-INF, you can modify the code like this:

iframe.attr("src", cc+"?reportlet=demo/Report/Group Report/Group Summary.cpt");

Effect Display

Save the report and click Data Entry Preview. The effect is the same as that shown in section "Expected Effect."

Note: 

The effect cannot be previewed on mobile terminals.

For details, you can download the template Embedding a Report in an Iframe.cpt.