JS Hide Tab Block Title

  • Last update:December 16, 2020
  • I. Overview

    1.1 Requirement

    How to customize the options of displaying different Tab blocks or hiding contents irrelevant to Tab pages?

    Before being hidden:

    After being hidden:

     

    You will learn
    • Sample 1: Hide the entire Tab block

      • Open the template

      • Add an Initialization event

      • Preview

    • Sample 2: Hide a single Tab block

      • Open the template

      • Add an Initialization event

      • Preview

    • Download the templates

    II. Sample 1: Hide the entire Tab block

    2.1 Open the template

    Open the template: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Dashboard\Insurance Dashboard.frm

     

    2.2 Add an Initialization event

    In the Widget Settings pane at the upper-right corner of the decision-making report, select tabpane0 and add an Initialization event, as shown below:

    3.png 

    if JAR package was issued after January 24, 2018, input the following JavaScript codes to hide Tab headers:

    this.element.parent().hide(); //Hide the entire Tabpane

    if JAR package was issued before January 24, 2018, input the following JavaScript codes to hide Tab headers:

    $('div:lt(1)',this.element.parent()).hide();//Hide the entire Tabpane

    Note: Add an Initialization event to tabpane block widgets instead of adding an Initialization event to all Tabs in the Tab block.


    2.3 Preview

    Save the template. The preview effect is shown as follows:

    Before being hidden:

    After being hidden:

     

    III. Sample 2: Hide a single Tab block

    3.1 Open the template

    Open the template: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Dashboard\Insurance Dashboard.frm

     

    3.2 Add an Initialization event

    In the Widget Settings pane at the upper-right corner of the decision-making report, select tabpane0 and add an After Initialization event, as shown below:

    Input the following JavaScript codes:

    this.options.form.getWidgetByName("tabpane0").setTabVisible("111", false);// Hide the Tab named 111 in tabpane0

    Note 1: Avoid overlapping names if possible. If Tab names are overlapping, tabs that were previously loaded will be overridden by tabs that are subsequently loaded when the page is initialized. As thus the Tab fetched by JavaScript is not the one you intend to display or hide.

    Note 2: Traditional JavaScript codes cannot be used to hide Tabs.

    For example: The following traditional JavaScript codes, this.options.form.getWidgetByName("Tab0").setVisible();, can only be used to hide such widgets as report0.

    Note 3: When you export the template, the hidden Tab will not be exported.

     

    3.3 Preview

    Save the template. The preview effect is shown as follows:

    Before being hidden:

     

    After being hidden:

     

    IV. Download the templates

    4.1 Sample 1

    1.frm

     

    4.2 Sample 2

    2.frm

     

    Refer to the original link: https://help.finereport.com/doc-view-2083.html

    Attachment List


    Theme: FineVis Data Visualization
    • 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