在决策报表中使用网页框控件

  • 文档创建者:漩涡
  • 编辑次数:24次
  • 最近更新:cherishdqy 于 2020-10-20
  • 1. 概述

    1.1 版本

    网页框控件插件AppHTML5 移动端展现插件新增功能
    -10.4.90
    10.4.90移动端预览时,网页框根据内嵌的模板自适应高度

    1.2 问题描述

    决策报表中,没有提供网页框控件。这使得在嵌入引用其他网页或者报表的时候,很不方便。

    1.3 解决方案

    为了解决在决策报表中引用其他 Web 链接的问题,用户可以使用网页框控件插件

    注:网页框控件不支持流媒体。

    2. 插件介绍

    2.1 安装插件

    点击下载插件: 网页框控件插件

    设计器插件安装方法请参见:设计器插件管理

    服务器安装插件方法请参见:服务器插件管理

    2.2 添加网页框控件

    插件安装完毕后,新建决策报表,点击控件栏,新增了网页框控件,拖动到决策报表 body 界面,即可添加。如下图所示:

    1583824374518615.png

    2.3 地址和参数

    2.3.1 地址

    选中网页框控件,可以设置地址和参数,支持添加两种类型的链接。

    模板路径:

    模板路径为相对路径,如下图所示:

    2.png

    网络路径:

    网络路径为绝对路径。如下图所示:

    2.png

    「网络路径」的应用场景及方法如下表所示:

    注:网络路径公式状态下,直接输入链接即可,链接前不能有「=」。

    应用场景备注
    预览模板

    输入 模板预览链接 ,如下所示:http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt

    预览视频

    方法一:

    输入完整视频网页 URL ,如下所示:

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

    方法二:

    将下载后的视频保存在%FR_HOME%\webapps\webroot,输入链接http://IP:端口号/工程名/视频名称,如下所示:

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

    预览自定义 HTML 页面

    将自定义的HTML页面保存在%FR_HOME%\webapps\webroot,输入链接http://IP:端口号/工程名/HTML页面名称,如下所示:

    http://localhost:8075/webroot/1.html

    2.3.2 参数

    选中网页框控件,可以设置地址和参数,如下图所示:

    18.png

    需要注意以下几点:

    • 同模板多个网页框配置同一个链接,会相互影响(不同参数视为不同链接)。

    • 网页框里挂载 BI 模板链接时,参数需要拼接到链接后 。

    2.4 滚动条

    当嵌入的网页的宽或高超过网页框的宽高值时,就会出现相应的水平滚动条与垂直滚动条。

    水平滚动条可见垂直滚动条可见默认勾选。网页框控件插件若取消勾选水平滚动条可见垂直滚动条可见,预览模板时,仍可见滚动条。

    2.5 组件大小

    当 body 布局方式设置为绝对布局时,可自定义组件大小。如下图所示:

    1593417893787527.png

    2.6 支持自适应高度

    移动端自适应规则如下表所示:

    所在模板类型所在模板布局内嵌模板类型
    内嵌模板布局
    FR 模板
    重布局(body 内/ Tab 内)FR 模板cpt 不自适应
    cpt 横向自适应
    body 的移动端 Tab 页下勾选 手机重布局
    body 的移动端 Tab 页下不勾选 手机重布局 ,且 组件缩放 选择横向自适应
    不勾选 手机重布局,且缩放逻辑为固定大小

    需注意以下几点:

    • 网页框控件自适应时,冻结不生效。

    • 网页框内配置跨域的链接,网页框自适应不生效 。

    • Android App 上,模板 A 的网页框控件中内嵌模板 B ,外部手势(滑动模板 A )与内部手势(滑动模板 B ),每次只能响应一个,另一个禁用。

    2.7 注意点

    1)「网络路径」下若添加了参数及默认值,链接使用 模板预览 链接,示例链接为:http://localhost:8075/webroot/decision/view/report?viewlet=doc%252Fphone%252F%25E5%258A%25A8%25E6%2580%2581%25E5%2588%2586%25E7%25BB%2584.cpt。如下图所示:

    1600138821173421.png

    效果如下图所示:

    8.png

    2)若参数拼接在模板链接 URL 尾部,示例链接为:http://localhost:8075/webroot/decision/view/report?viewlet=doc/phone/动态分组.cpt&销售员=孙林&产品类型=饮料&产品=牛奶

    「网络路径」链接为该链接。如下图所示:

    1600139117646099.png

    效果如下图所示:

    9.png

    3. JavaScript 接口

    决策报表里有一个网页框控件 rHIframe0,用户可新增按钮控件,添加不同的点击事件,以达到不同的效果。如下图所示

    1583825609540650.png

    3.1 setValue(String)

    设置并刷新网页框控件的地址(保留原参数)

    3.1.1 模板路径

    var Widget = this.options.form.getWidgetByName('rHIframe0');
    Widget.setValue("${servletURL}?viewlet=GettingStarted.cpt");

    3.1.2 网络路径

    var Widget = this.options.form.getWidgetByName('rHIframe0');
    Widget.setValue("http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt");

    3.2 reload()

    重新刷新网页框:

    var Widget = this.options.form.getWidgetByName('rHIframe0'); 
    Widget.reload();

    3.3 loadUrl(String)

    加载指定的 URL 链接地址。

    3.3.1 模板路径

    var Widget = this.options.form.getWidgetByName('rHIframe0'); 
    Widget.loadUrl("${servletURL}?viewlet=GettingStarted.cpt");

    3.3.2 网络路径

    var Widget = this.options.form.getWidgetByName('rHIframe0'); 
    Widget.loadUrl("http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt");

    4. 移动端

    App 和 H5 插件版本在 10.4.61 及之后时,网页框控件插件支持在移动端使用。

    注1:移动端不支持 JavaScript 接口。

    注2:通过网页框控件插件预览模板时,移动端不支持显示模板中的参数面板。

    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!