Clicking the Button on the Parameter Panel to Display or Hide Data by JS

Version

Problem

When a report contains excessive list data, you may want to use a display button to hide the detailed data and display only the statistics, as shown in the following figure. How to achieve the effect?

Implementation Method

You can use JavaScript to modify the value of the parameter widget and add a condition attribute to the cell to display or hide the corresponding row according to the parameter value.

Template Preparation

Prepare the built-in template Group_Summary.cpt in %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Primary\GroupReport.

For details, you can download the template Group_Summary.cpt.

The following figure shows the template style.

Widget Adding

1. Add a label widget to the parameter panel, set Widget Name to label, deselect Visible, and set Widget Value to show, as shown in the following figure.

2. Add a button widget to the parameter panel, set Widget Name to button, and set Button Name to Only show total data, as shown in the following figure.

Event Adding

Select the button widget, and add a Click event for the widget. The content of the event is to change the value of the label widget and modify the button name when you click the button, as shown in the following figure.

The JavaScript code is as follows.

/* Obtain the value of the hidden label widget */
var label= this.options.form.getWidgetByName("label").getValue();
/* Check the value of the label widget */
if (label == 'show') {
{
/*Modify the value of the label widget to hide when the widget value is show, and modify the button name to show all data.*/
this.options.form.getWidgetByName("label").setValue("hide");
this.options.form.getWidgetByName("button").setValue("show all data");
}
else
{
/*Modify the value of the label widget to show when the widget value is not show, and modify the button name to only show total data.*/
this.options.form.getWidgetByName("label").setValue("show");        
this.options.form.getWidgetByName("button").setValue("only show total data");
}
/* Execute the query */
_g().parameterCommit();

Adding a Condition Attribute

Return to the report design page, right-click cell B3, and select Condition Attribute. To add a condition attribute for cell B3, set Row Height to 0 mm and add the formula condition $label = 'Hide'. The formula condition means to hide cell B3 when the value of the label widget is hide. Otherwise, cell B3 will be displayed, as shown in the following figure.

Effect Display

Click the blank area of the parameter panel, and deselect Display Nothing Before Query. In this case, the report content is displayed upon initialization without clicking Query.

Save the template and click Pagination Preview. The following figure shows the effect on the PC.

Note:

The effect cannot be previewed on mobile terminals.

For details, you can download the template Clicking the Button on the Parameter Panel to Display or Hide Data by JS.cpt.