Use Custom Button in Toolbar to Control the Display and Hide of Widgets

The Pagination Preview of FineReport displays the parameter pane by default. If you want to click a button on the toolbar to directly control the display and hide of the parameter pane, how to achieve it?

Add a custom button to the toolbar of the Pagination Preview mode, and add a User Defined Event of the custom button to control the display and hide of the parameter pane.

Script to hide the parameter pane:

$('.parameter-container').css('visibility','hidden');

Script to display the parameter pane:

$('.parameter-container').css('visibility','visible');

1) Open the report: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\query\customize query period.cpt

Click Template > Web Attributes > Pagination Preview, choose Individually set for the template, and add a custom button to the toolbar, as shown below:

2) Double-click the added custom button to enter the toolbar settings, and set the name of this custom button as closing parameter interface. Click on the User Defined Event and add JS code, as shown in the figure:

script:

$('.parameter-container').css('visibility','visible');

3) In the same way, add a custom button named hide parameter interface, as shown in the figure:

JS script:

$('.parameter-container').css('visibility','hidden');

Save the template, select Pagination Preview, and the effect is as shown at the beginning.

Note: The mobile terminal does not support this effect.

Customize Query Period.cpt