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
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy