Successfully!

Error!

Use Web Frame Widget in Dashboard

  • Last update:  2022-03-04
  • I. Overview

    1. Version

    Web Frame Widget PluginAppHTML5 Mobile Display PluginNew Features
    -10.4.90
    10.4.90When previewing on the mobile terminal, the height of the web page frame adapts to the embedded template
    -10.4.97710.4.977When previewing on the mobile terminal, open the sub-template in the "Web Frame" template, the app is the same as H5, and both are opened from a new window


    2. Problem description

    In the dashboard, there is no web frame widget provided. This makes it inconvenient to embed references to other web pages or reports.


    3. Solutions

    To solve the problem of referencing other web links in dashboards, users can use the "Web Frame Widget Plugin".

    Note: The Web Frame Widget plugin does not support streaming media.

              Web Frame content does not support exporting.

    II. Plugin introduction

    1. Install the plugin

    Click to download the plugin: Web Frame Widget Plugin

    For the installation method of the designer plugin, please refer to: Designer plugin management

    For the method of installing plugins on the server, please refer to: Server Plugin Management


    2. Add web frame widget

    After the plugin is installed, create a new dashboard, click the Widget Bar, and add a Web Frame Widget, drag it to the dashbaord body interface to add it. As shown below:

    1.png


    3. Address and parameters

    Select Web Frame Widget, you can set Address, the steps are as shown below:

    2.png

    1) Address

    Two types of links are supported.

    • Template path

     Note: & symbol in the template path and name is not supported.

    "Template path" is a relative path, click "...", the template selection will appear, just select the desired template, as shown in the following figure:

    3.png

    • URL

    "URL" is an absolute path. The application scenarios and methods of "URL" are shown in the following table:

    Note: In the state of the network path formula, you can directly enter the link, and there cannot be an "=" before the link.

    Application ScenarioNotes
    Preview template

    Enter the template preview link http://IP:port number /project name,as shown below:http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt

    Preview video

    Method one:

    Enter the full video web page URL as follows:

    https://www.iqiyi.com/v_19rxqx1kww.html?vfrm=pcw_home&vfrmblk=B&vfrmrst=fcs_0_p11

    Method two:

    Save the downloaded video%FR_HOME%\webapps\webroot,and enter the linkhttp://IP:port number /project name/vedio name,as shown below:

    http://localhost:8075/webroot/6.gif

    Preview custom HTML page

    Save the customized HTML page in%FR_HOME%\webapps\webroot,enter the linkhttp://IP:port name /project name/HTML page name,as shown below: http://localhost:8075/webroot/1.html

    2) Parameters

    Example:

    • If parameters and default values are added under ""URL, the link uses the template preview link. The example link is: http://localhost:8075/webroot/decision/view/form?viewlet=Form3.frm

          is shown in the following figure:

    4.png

    Results as shown below:

    5.png

    • If the parameters are spliced at the end of the template link URL, the example link of "URL" is: 

    http://localhost:8075/webroot/decision/view/report?viewlet=doc-en/dashboard/dynamic group.cpt&salesperson=Sun Lin&Product type=Drinks&Product=Milk

    As shown below:

    6.png

    Results as shown below:

    7.png

    Note 1: The same link is configured with multiple "web frames" in the same template, which will affect each other (different parameters are regarded as different links).

    Note 2: When the BI template link is mounted in the webpage frame, the parameters need to be spliced after the link.


    4. Scroll bar

    The width and height of the "web frame" are the width and height of the cell where it is located. When the width or height of the embedded web page exceeds the width and height of the web frame, the corresponding "horizontal scroll bar" and "vertical scroll bar" will appear.

    In the attribute settings, "Horizontal scroll bar visible" and "Vertical scroll bar visible" are checked by default.

    If unchecked, when previewing the template, the scroll bar will not be visible and cannot be scrolled, and the content that exceeds the "web frame" size will be truncated and not displayed.


    5. Component size

    When the body layout method is set to absolute layout, the component size can be customized. As shown below:

    8.png


    6. Support adaptive height

    The mobile terminal adaptive rules are shown in the following table:

    Template typeTemplate layoutInline template typeInline template layout
    frm template
    Mobile terminal mobile relayout (in body/tab)FR templatecpt template is not adaptive
    cpt template horizontal adaptive
    Check the  mobile relayout under the mobile tab page of the frm template body
    The mobile terminal tab page of the frm template body does not check the mobile relayout, and the component zooming selects horizontal adaptive
    Uncheck the mobile relayout, and the zooming logic is a fixed size

    The following points should be noted:

    • Freeze does not take effect when the "Web Frame Widget" is adaptive.

    • Cross-domain links are configured in the "Web Frame", and the "Web Frame" adaptation does not take effect.

    • On the Android App, template B is embedded in the "Web Frame Control" of template A. External gestures (swipe template A) and internal gestures (swipe template B) can only respond to one at a time, and the other is disabled.

    • When previewing on the mobile terminal, when opening a sub-template in the [Web Frame] template: if the current window set by the sub-template is opened from the inside of the webpage; if a new window is set by the sub-template, it will be opened from the new window.

    III. JavaScript interface

    There is a web frame widget "rHIframe0" in the dashboard. Users can add a "button widget" and add different "click event" to achieve different effects. As shown below:

    9.png

    1. setValue(String)

    Set and refresh the address of the "Web Frame Widget" (retain the original parameters)

    1) Template path

    var Widget = _g().getWidgetByName('rHIframe0');
    Widget.setValue("${servletURL}?viewlet=GettingStarted.cpt");
    2) URL
    var Widget = _g().getWidgetByName('rHIframe0');
    Widget.setValue("http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt");


    2. reload()

    Refresh the web frame:

    var Widget = _g().getWidgetByName('rHIframe0'); 
    Widget.reload();


    3. loadUrl(String)

    Load the specified URL link address.

    1) Template path
    var Widget = _g().getWidgetByName('rHIframe0'); 
    Widget.loadUrl("${servletURL}?viewlet=GettingStarted.cpt");
    2) URL
    var Widget = _g().getWidgetByName('rHIframe0'); 
    Widget.loadUrl("http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt");

    IV. Mobile

    When the version of the App and H5 plugin is 10.4.61 and later, the "Web Frame Widget Plugin" can be used on the mobile terminal.

    Note 1: The mobile terminal does not support the JavaScript interface.

    Note 2: When previewing the template through the "Web Frame Widget Plugin", the mobile terminal does not support displaying the parameter panel in the template.


    V. Attention

    1. Errors reported in embedded BI template

    When the BI template is embedded in the "Web Frame Widget", and the preview is clicked, the following error occurs:

    10.png

    Open the FineBI server, log in with an administrator account, click Manage > Security Management > Security Protection, and close the Security Headers.

    Note: Security Headers is enabled by default.

    11.png



    Attachment List


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

    Doc Feedback