JS Dynamic Hidden Parameters and Control Panel Height-FineReport Help Document

Last update： 2020-12-28

I. Overview

1.1 Problem description

When we develop reports, a situations that is often encountered is that there are a number of widgets on the parameter pane. You can hide some of the widgets and control the height of the parameter pane to hide unnecessary ones.

1.2 Implementation ideas

The solution is to add two button widgets, one to view all widgets and the other to hide part of the widgets. Therefore, clicking these two buttons can increase or decrease the widgets on the parameter pane.

II. Example

2.1 Add parameters

In the FineReport designer, create a new report and add a number of widgets on the parameter panel, as shown in the figure below:

2.2 Modify the widget name

1) Select button1 and button3 on the parameter pane. In the attribute panel on the right, add names for these two buttons, and define the names as "view all parameters" and "hide all parameters" respectively. The following figure only shows the effect of adding the name to button1:

2) Select the widgets in the last row of the parameter pane, and set their names to a, b, c, d, e, f in respectively. The following figure shows only one of the widgets after setting the widget name:

2.3 Add event

1) Add a Click event to the "view all parameters" button.

Select this button and add a Click event, as shown in the following figure:

The JS code is as follows:

var a = this.options.form.getWidgetByName("a"); //Get the widget named a, and the following lines get the widget named b, c, d, e and f
var b = this.options.form.getWidgetByName("b");
var c = this.options.form.getWidgetByName("c");
var d = this.options.form.getWidgetByName("d");
var e = this.options.form.getWidgetByName("e");
var f = this.options.form.getWidgetByName("f");


//Make these widgets visible
a.setVisible(true);
b.setVisible(true);
c.setVisible(true);
d.setVisible(true);
e.setVisible(true);
f.setVisible(true);

//After 1000 milliseconds (1 second), the parameter pane becomes high, and all the widgets on the parameter panel can be viewed at the same time
setTimeout(function() {
 $('.parameter-container').css('height', '160px');
 $('#content-container').css('top', '160px');
 }, 1000)

2) Add a Click event to the "hide all parameters" button.

Select this button and add a Click event, as shown in the following figure:

The JS code is as follows:

var a = this.options.form.getWidgetByName("a");
var b = this.options.form.getWidgetByName("b");
var c = this.options.form.getWidgetByName("c");
var d = this.options.form.getWidgetByName("d");
var e = this.options.form.getWidgetByName("e");
var f = this.options.form.getWidgetByName("f");
a.setVisible(false);
b.setVisible(false);
c.setVisible(false);
d.setVisible(false);
e.setVisible(false);
f.setVisible(false);
//After 1 second, the parameter panel becomes shorter, and some widgets on the parameter panel are hidden
setTimeout(function() {
$('.parameter-container').css('height', '105px');
  $('#content-container').css('top', '105px');
  }, 1000);