Dynamic Parameter Hiding and Parameter Panel Height Control by JS

Version

Expected Effect

When developing reports, you often need to use multiple parameter widgets in a report. In this case, you can hide some widgets that are not commonly used or do not need to be displayed, and display them when they need to be displayed, as shown in the following figure.

Note:

1. When the report is frozen, this solution does not have a good adaptive effect in Pagination Preview. You are recommended to use other preview methods.

2. When multiple sheets exist in data entry, the code for hiding parameters will cause the sheet label to move up, which will affect the aesthetics. You are not recommended to use this solution in this scenario.

 Implementation Method

Add a Click event for Button Widget to hide or show the specified other type of widgets when the button is clicked.

Widget Adding

Create a template and add multiple widgets on the parameter panel, as shown in the following figure.

Widget Name Modifying

1. Change the button names of button1 and button3 on the parameter panel to View All Parameters and Hide All Parameters respectively, as shown in the following figure.

2. Set Widget Name to a, b, c, d, e, f of the widgets in the last row of the parameter panel respectively to simplify the JS code added later, as shown in the following figure.

Note:

You can make no changes here, and just add the corresponding widget name in the JS code added later.

Click Event Adding

1. Add a Click event for the View All Parameters button. Select the button and add a Click event under Widget Settings > Event on the right, as shown in the following figure.

The JavaScript codes are 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(true);
b.setVisible(true);
c.setVisible(true);
d.setVisible(true);
e.setVisible(true);
f.setVisible(true);
if (!window.originalParameterContainerHeightBackup) {
	window.originalParameterContainerHeightBackup = FR.parameterContainerHeight;
	window.originalContentContainerHeightBackup = $('#content-container').height();
	FR.tempParameterContainerHeight = 105;
	window.tempContentContainerHeightBackup = window.originalContentContainerHeightBackup + window.originalParameterContainerHeightBackup - FR.tempParameterContainerHeight;
}
setTimeout(function() {
	$('.parameter-container').css('height', window.originalParameterContainerHeightBackup);
	$('#content-container').css('top', window.originalParameterContainerHeightBackup);
	$('#content-container').css('height', window.originalContentContainerHeightBackup);
	FR.parameterContainerHeight = window.originalParameterContainerHeightBackup;
	if (contentPane) {
		var $frozen;
		var $tempContentPane;
		if (contentPane.$contentPane) {
			$tempContentPane = contentPane.$contentPane;
		}
		if (contentPane.curLGP && contentPane.curLGP.$sheet_container) {
			$tempContentPane = contentPane.curLGP.$sheet_container;
		}
		if ($tempContentPane) {
			$frozen = $(".frozen-table", $tempContentPane);
		}
		if ($frozen && $frozen.length > 0) {
			FR.layoutFrozen($tempContentPane, $tempContentPane.offset().top);
		}
	}

}, 1000);
Show Code

2. Add a Click event for the Hide All Parameters button. Select the button and add a Click event under Widget Settings > Event on the right, as shown in the following figure.

The JavaScript codes are as follows:

Note:

When multiple sheets exist in data entry, the code for hiding parameters will cause the sheet label to move up, which will affect the aesthetics. You are not recommended to use this solution in this scenario.

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);
if (!window.originalParameterContainerHeightBackup) {
	window.originalParameterContainerHeightBackup = FR.parameterContainerHeight;
	window.originalContentContainerHeightBackup = $('#content-container').height();
	FR.tempParameterContainerHeight = 105;
	window.tempContentContainerHeightBackup = window.originalContentContainerHeightBackup + window.originalParameterContainerHeightBackup - FR.tempParameterContainerHeight;
}
setTimeout(function() {
	$('.parameter-container').css('height', FR.tempParameterContainerHeight);
	FR.parameterContainerHeight = FR.tempParameterContainerHeight;
	$('#content-container').css('top', FR.tempParameterContainerHeight);
	$('#content-container').css('height', window.tempContentContainerHeightBackup);
	if (contentPane) {
		var $frozen;
		var $tempContentPane;
		if (contentPane.$contentPane) {
			$tempContentPane = contentPane.$contentPane;
		}
		if (contentPane.curLGP && contentPane.curLGP.$sheet_container) {
			$tempContentPane = contentPane.curLGP.$sheet_container;
		}
		if ($tempContentPane) {
			$frozen = $(".frozen-table", $tempContentPane);
		}
		if ($frozen && $frozen.length > 0) {
			FR.layoutFrozen($tempContentPane, $tempContentPane.offset().top);
		}
	}
}, 1000);
Show Code

Preview Effect

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

Note:

The effect cannot be previewed on mobile terminals.

Click to download the template Dynamic Parameter Hiding and Parameter Panel Height Control by JS.cpt.