Successfully!

Error!

JS Click on Hyperlink to Switch TAB Page

  • Last update:  2020-12-16
  • 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: Dashboard
    Already the First
    Already the Last
    • Helpful
    • Not helpful
    • Only read

    Doc Feedback