JS Stay on the Current Tab after Clicking Query

1.1 Requirement

When using the Tab block function for forms, we will encounter the following problem:

If there are multiple Tab pages in a Tab block and we are not on the first Tab page, then by clicking Query to refresh the report, it will jump to the first Tab page by default, as shown in the figure below:

The goal is to achieve: by clicking Query, the report will stay on the current Tab page, rather than jump to the first Tab page, as shown in the figure below:

1.2 Solution

Set JavaScript in the Tab block: record the current Tab page through a Tab To Switch Event, so that the recorded Tab page will be displayed after clicking Query.

2.1 Add a query widget

Add a [Parameter Pane] to the template and add a [Query] widget, as shown in the figure below:

2.2 Add a Tab To Switch Event

Select the Tab block widget, choose [tabpane0] below the selected Tab block in the widget list and add a [Tab To Switch Event], as shown in the figure below:

Input the following JS codes:

setTimeout(function(){
    //After Tab switch, get the index of the current Tab block
  window.IndexNum=_g().getWidgetByName("tabpane0").getShowIndex();
},50);

2.3 Add an After Initialization event

Select the Tab block widget, choose [tabpane0] below the selected Tab block in the widget list and add an [After Initialization] event, as shown in the figure below:

Input the following JS codes:

this.options.form.getWidgetByName("tabpane0").showCardByIndex(window.IndexNum);

2.4 Preview

Save the template and click [Form Preview]. The effect is shown below:

Stay on the Current Tab after Clicking Query in Dasboard.frm