Direct Auto Query by JS

Version

Expected Effect

On the built-in query page, you can view the data by clicking the query button. How can you view the result automatically after entering the parameter without clicking the query button or re-triggering the query after filling, as shown in the following figure? The following figure shows the effect.

Implementation Method

You can achieve this effect by unchecking the Display Nothing Before Query button, or adding the JS event.

You can uncheck the Display Nothing Before Query to view the data without clicking the button at the first query. For details about unchecking the button, see the corresponding section of Parameter Panel Overview.

You can add the JS script _g().parameterCommit() to the template to trigger the query event, after which you can query the data automatically by modifying the parameter, as shown in this document.

Note: 

1. The implementation method is also applicable to dashboards.

2. The solution introduced in this document is a global refresh. For details about refreshing the specified objects, see Linkage Between a Drop-down Box and a Chart.

Template Preparation

Prepare a template that requires a parameter query, without a query button on the parameter panel.

Open the template GettingStartedEN.cpt in %FR_HOME%\webapps\webroot\WEB-INF\reportlets, and delete the Query button on the parameter panel, as shown in the following figure.

Click to download the template: GettingStartedEN.cpt

Event Adding

Click the drop-down box widget on the parameter panel, and add an After Editing event to the widget, after which you can query the report after selecting a value from the drop-down box, as shown in the following figure.

The JavaScript code is as follows:

Note:

If an error occurs due to the inability to read undefined properties, you can add a delay function to postpone the execution. 

_g().parameterCommit(); 

Effect Display

Save the report, and click Pagination Preview, after which you can query the data automatically by selecting a value from the drop-down box widget. The effect on PC is the same as that shown in section "Expected Effect."

The following figure shows the preview effect on the DataAnalyst app and the HTML5 terminal.

 For details, you can download the template Direct Auto Query by JS.cpt