Refreshing the Main Page After Data Entry on the Sub-page by JS

Problem

During data entry in the sub-report, you want the entered data to be displayed in the main report immediately after successful data entry in the sub-report. The common method is to refresh the main report. So how to set the main report to be refreshed after successful data entry in the sub-report?

The following figure shows the effect.

Implementation Method

You can add a Successful Data Entry event, which is to reload the main template.

Template Preparation

The main template: the built-in template Hyperlink5.cpt in FineReport installation directory\webapps\webroot\WEB-INF\reportlets\doc-EN\SpecialSubject\HyperlinkReport.

The sub-template: the built-in template Hyperlink6.cpt in FineReport installation directory\webapps\webroot\WEB-INF\reportlets\doc-EN\SpecialSubject\HyperlinkReport.

You can also download the templates directly:

HyperLink5.cpt  

HyperLink6.cpt

Design the report style in the main template, as shown in the following figure.

Design the report style in the sub-template, as shown in the following figure.

In this example, a hyperlink to the sub-template is already added to cell A1 in the main template. When referring to the document, you can add the hyperlink according to your actual needs. Ensure that the hyperlink needs to pass the data entry preview parameter op=write to the sub-template, as shown in the following figure.

Adding an Event to the Sub-template

Open the sub-template Hyperlink6.cpt, choose Template > Web Attribute > Data Entry Setting, select Set for This Template Separately in Following Settings, and add a Successful Data Entry event to the sub-template, as shown in the following figure.

The JavaScript code is as follows:

window.parent.location.reload();
//Refresh the main window.

window.parent returns the object of the main window, which is equivalent to executing relevant methods in the main window. For example, if you want to assign a value to the widget A on the parameter panel of the main window, the JS code is window.parent._g().getParameterContainer().getWidgetByName("A").setValue().

When refreshing the main window, if you want to retain the selected widget value on the parameter panel, you can use the parameterCommit API with the following code.

window.parent._g().parameterCommit();
//Re-query data in the main window.

Effect Display

Open the main template Hyperlink5.cpt, click Pagination Preview, click an order ID in the main report, and modify the data in the pop-up dialog box of the sub-template. After you click Submit, the main report will be refreshed automatically. The effect is the same as that shown in section "Problem."

Note:

The effect cannot be previewed on mobile terminals.