JS Show and Hide the Widgets of Parameter Pane

  • Last update:  2021-01-19
  • I. Overview

    1.1 Problem description

    Sometimes we want to hide some widgets of the parameter pane when switching the sheet. This article takes hidig the query button as an example to illustrate the implementation steps. The final effect is as follows:


    1.2 Implementation ideas

    In the Loading End event of the reporting page, bind a click event to a sheet and determine whether there are widgets in the sheet that need to be hidden. In the click event, the widgets are hidden or displayed by code.

    II. Operation steps

    2.1 Open the template

    Open the report %FR_HOME%\webapps\webroot\WEB-INF\reportlets\GettingStartedEN.cpt and create a new sheet named sheet2, as shown below:

     

    2.2 Add event

    Click Template > Web Attributes > Data Entry Settings (choose according to the preview mode), check Indivisually set for the template, and then add a Loading End event, as shown in the figure below.

    image.png

    Note: Since the Loading End event is added here, you need to click the query button to let the report to complete the loading process before the code is effective. If you don't want to click the query button before realizing the effect, you can uncheckDisplay Nothing Before Query in the attribute settings of the parameter pane.


    The JavaScript code in the Loading End event is as follows:

    $(".fr-sheetbutton-container").click(function() //When switching sheets
    {
        var a = contentPane.$contentPane.data('TabPane').tabBtns[contentPane.selectedIndex].options.name; //Get the name of the current sheet
        if(a == "sheet2") {
     contentPane.parameterEl.getWidgetByName("widget3").setVisible(false); //Hide the query button. widget3 is the name of the query button
        } else {
     contentPane.parameterEl.getWidgetByName("widget3").setVisible(true); //Display query button
        }
    });

     

    2.3 Preview effect

    Save the template, click the Data Entry Preview, click the query button, and then switch the sheet to see the above effect.

    Note: Mobile terminal is not supported.

    III. Completed template

    Attachment List


    Theme: Parameter
    • 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