JS Show or Hide Data by Clicking the Parameter Pane Button

1.1 Requirement

When too many tabular data are present in the report, how to hide detailed data and only display statistics by using button widget?

1.2 Solution

Use JavaScript to modify the value of parameter widget. Show or hide corresponding rows by setting the conditional formatting.

2.1 Design a template

1) Add a label widget and set the Widget Name as label and uncheck Visible. Set the Widget Value as Show.

2) Add a button widget, and set the Widget Name as button and the Widget Value as “Only show total data”.

3) Select the button widget and add a click event, as shown in the figure below:

Input the JS code:

/*Get the value of hidden label widget */
var label = this.options.form.getWidgetByName("label").getValue();
/* Define the value of label widget*/
if (label == 'show') {
       /* When the value of label widget is set as Show, modify it to Hide, and set the Button Name as Show All Data*/
       this.options.form.getWidgetByName("label").setValue("hide");
       this.options.form.getWidgetByName("button").setValue("show all data");
} else {
       /* When the value of label widget is set as Hide, modify it to Show, and set the Button Name as Only Show Total Data*/
       this.options.form.getWidgetByName("label").setValue("show");
       this.options.form.getWidgetByName("button").setValue("only show total data");
}
/*Execute query*/
_g().parameterCommit();

4) Click the white space of the parameter pane, and uncheck Display Nothing Before Query.

5) Return to the design interface and right click B3 to add conditional formatting. Set the Row Height as 0mm, and define the Formula as $label = 'hide'.

2.2 Preview

Save the template and click [Pagination Preview]. The preview effect on a PC is shown as below:

2.3 Download the template

Show or Hide Data by Click the Parameter Pane Button.cpt