Successfully!

Error!

You are viewing 10.0 help doc. More details are displayed in the latest help doc

JS Click on Hyperlink to Switch TAB Page

I. Overview

1.1 Requirement

How to switch between tabs by clicking the hyperlinks in cells in the report block?

1.png 

 

1.2 Solution

Switch between tabs through JavaScript interface showCardByIndex and by inputting the following JavaScript codes:

this.options.form.getWidgetByName('cardlayoutname').showCardByIndex(index); //Switch to display tabs
You will learn
  • Sample

    • Create a new template

    • Settings of hyperlinks

    • Preview

  • Download the template

II. Sample

2.1 Create a new template

Create a new dashboard and drag a report block and a Tab block into it. Add three Tab titles. The template is to be designed as shown below:

 

2.2 Settings of hyperlinks

Add hyperlinks to B4, B5 and B6. Click A4 and then click the Hyperlink icon. Add JavaScript and input JavaScript codes as shown below:

 

JavaScript codes for hyperlinks in B4, B5 and B6 are described as below:

Cell

Codes

B4

_g().options.form.getWidgetByName("tabpane0").showCardByIndex(0)

B5

_g().options.form.getWidgetByName("tabpane0").showCardByIndex(1);

B6

_g().options.form.getWidgetByName("tabpane0").showCardByIndex(2)

Note: tabpane0 refers to the complete tabpane0 object, and index refers to indexes starting with 0.

 

2.3 Preview

Save the template and click [Preview]. The preview effect is as shown in 1.1 Requirement.

4.gif 

 

III. Download the template

Attachment List


Theme: Secondary Development
Already the First
Already the Last
  • Helpful
  • Not helpful
  • Only read

Doc Feedback