Hiding the Small Arrow of the Parameter Panel

Version

Expected Effect

When there is a parameter panel in the report, the parameter panel will display a small arrow by default. To achieve a seamless connection between the parameter panel and the main body of the report, you need to hide the triangular arrow at the junction of the parameter panel and the report body. The following figure shows the effect.

Implementation Method

After the template is loaded, get the DOM element of the small arrow of the parameter panel through JavaScript (JS), and then set the DOM element to be hidden or remove it directly.

(1) Hide button

$('.parameter-container-collapseimg-up').hide();//When the report is of the
FR11 style, use $(".x-icon.b-font.horizon-center.display-block.report-main-parameter-container-collapseimg-up").hide().

(2) Delete button

$('.parameter-container-collapseimg-up').remove();//When the report is of the
FR11 style, use $(".x-icon.b-font.horizon-center.display-block.report-main-parameter-container-collapseimg-up").remove().

Note:

1. The effect cannot be previewed on mobile terminals.

2. The FRM reports cannot implement the effect.

Template Preparation

Create a new general report template, and add two widgets to the parameter panel to display the parameter panel, as shown in the following figure.

Event Adding

Click the parameter panel editing page, select para in the Component Setting area on the right, and add an After Initialization event on the Event tab page, as shown in the following figure.

For the report of the Classic style, the JS code is as follows:

//Delay the execution.
setTimeout(function() {
   //Hide the small arrow of the parameter panel.
   $('.parameter-container-collapseimg-up').hide();  
}, 10);  
//Delete the small arrow of the parameter panel.
//$('.parameter-container-collapseimg-up').remove();

For the report of the FR11 style, the JS code is as follows:

//Delay the execution.
setTimeout(function() {
   //Hide the small arrow of the parameter panel.
   $('.report-main-parameter-container-resizable').hide();  
}, 10);  
//Delete the small arrow of the parameter panel.
//$('.report-main-parameter-container-resizable').remove();  

Note:

If the DOM element becomes invalid due to frontend changes caused by installing plugins, you can refer to the following modification methods.

Preview the report, press F12 or find the developer options of the browser, click the find element, select the triangle button, and view its class attribute value, as shown in the following figure.

Effect Display

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

Note: The effect cannot be previewed on mobile terminals.

Download the template by clicking: Hiding the Small Arrow of the Parameter Panel.cpt.