JS Show or Hide Parameter Widget by Switching Tabs-FineReport Help Document

Last update：January 06, 2021

I. Overview

1.1 Requirement

Produce a tab-type report. In the tab-type report, some parameters displayed in the parameter pane may be hidden by clicking a certain tab.

Click TITLE 1 to display the parameters of ORDER ID only; and click TITLE 0 to display the parameters both of ORDER ID and SHIPPER:

1.2 Solution

Add an After Initialization Event on the body component, and use the setTimeout function in the JavaScript to monitor the event status of the tab. Due to failure to get the tab, we use eq to bind the Tab component to the Click Event by using jQuery class selector.

II. Sample

2.1 Add parameters

1) Click Template>Template Parameter to add two parameters. Name them as ORDER ID and SHIPPER respectively, as shown below:

2) Drag the parameter pane into the report body, click the white space of the parameter pane, and select [ADD ALL] in the right pane of Widget Setting:

2.2 Add a tab

Drag the Tab block into the report body and add a Tab:

2.3 Add an After Initialization Event

1) Click the second Tab to hide the SHIPPER Widget and click the first Tab to show the SHIPPER Widget.

Select the body widget at the upper right corner to add an After Initialization Event:

Input the JS code:

setTimeout(function() {
       $(".fr-widget-click").eq(2).bind("click", function() {
              $("div[widgetname$='SHIPPER']").show();
       });
       $(".fr-widget-click").eq(3).bind("click", function() {
              $("div[widgetname$='SHIPPER']").hide();
       });
}, 100);

Note

If the Widget Name is in English, it should be capitalized, otherwise it cannot be recognized.

2) Select tabpane and add a Tab Switch Event, as shown below:

Input the JS code:

var tabpane = this.getWidgetByName("TABPANE0");
switch (tabpane.mouseInTab) {
       case 0:
              $("div[widgetname$='SHIPPER']").show();
              break;
       case 1:
              $("div[widgetname$='SHIPPER']").hide();
              break;
       default:
              break;
}