反馈已提交

网络繁忙

H5设置

  • 文档创建者:Wendy123456
  • 编辑次数:7次
  • 最近更新:April陶 于 2021-10-25
  • 1. 概述

    1.1 版本

    报表服务器HTML5 移动端展现插件
    11.0V11.0

    1.2 功能描述

    设置项
    应用场景功能简介
    底部首页切换用户在 HTML5 端访问报表系统时,希望通过按钮的方式实现首页和目录的切换。用户可通过「底部首页切换」按钮,实现首页和目录的切换。
    H5集成登录用户在 HTML5 端访问报表系统/单张模板时,希望实现单点登录。用户可开启「H5集成登录」设置,通过填写自定义的登录认证类和身份识别参数名,即可实现 HTML5 端单点登录。
    顶部导航栏HTML5 端访问报表工程时,不同用户有不同需求,有些用户希望使用设备自带的返回按钮,有些用户希望报表系统自带返回按钮。用户可通过「顶部导航栏」,自定义设置 HTML5 端是否显示返回导航。
    H5快速返回
    查看钻取后的模板,实现一键点击后快速返回目录

    详情参见:[H5]HTML5快速返回目录按钮

    使用 JSBridge有时 HTML5 端和帆软 App 端需要通信用户可打开「使用 JSBridge」按钮,使得 HTML5 端和原生 App 通信。
    设置资源地址HTML5 插件资源都放在报表服务器上,用户访问 HTML5 端模板请求资源时,速度受报表服务器宽带限制。用户可在平台设置资源地址,那么访问 HTML5 端模板请求资源时,速度不再受报表服务器宽带限制。
    引入 JS用户有时需要在 HTML5 端实现一些效果,比如改变元素控件和格子的样式、控件的显示或隐藏等。用户可引入外部 JS 文件和 CSS 文件,在 HTML5 端实现一些特效或效果。
    引入 CSS

    2. 插件简介

    2.1 插件安装

    如需在数据决策系统设置相关 HTML5 设置项,必须安装「HTML5 移动端展现」插件。

    点击下载插件: HTML5移动端展现插件 

    设计器插件安装方法参照 设计器插件管理 

    服务器安装插件方法参照 服务器插件管理

    2.2 界面简介

    插件安装完成后,以管理员身份登录数据决策系统,点击「管理系统>移动平台>其它」,新增「H5 设置」,如下图所示:

    2021-10-25_18-09-15.png

    3. 底部首页切换

    开启「底部首页切换」按钮,用户在 HTML5 端访问报表系统时,可通过按钮的方式实现首页和目录的切换。

    3.1 开启底部首页切换按钮

    以管理员身份进入数据决策系统,点击「管理系统>移动平台>其它」, 开启「底部首页切换」按钮,点击「保存」。如下图所示:

    2021-10-25_18-11-13.png

    3.2 效果预览

    HTML5 端输入http://IP:端口号/webroot/decision,访问报表系统,用户可通过底部实现首页与目录间的切换,效果如下图所示:

    注1:HTML5 端访问报表系统的步骤可参考 HTML5 端访问报表系统

    注2:如未设置首页,无法实现首页与目录之间的切换。具体步骤请参见 管理首页

    2020-09-13_16-50-51.png

    4. H5集成登录

    当开启「H5集成登录」后,用户通过 HTML5 端访问报表工程或单张模板,若其中含有身份识别参数名,则自动拦截进行自定义登录验证。

    注:插件更新后,需重启设计器,该功能方生效。

    4.1 上传登录认证类

    本文提供通过「用户名」进行后台单点认证的「自定义登录验证类」。

    点击下载并解压自定义登录验证类Demo.class:Demo.rar

    Demo.class上传至报表工程%FR_HOME%\webapps\webroot\WEB-INF\classes目录下,如下图所示:

    image.png

    4.2 开启 H5 集成登录

    以管理员身份进入数据决策系统,点击「管理系统>移动平台>其它」, 开启「H5集成登录」按钮,设置「身份识别参数名」和「自定义的登录认证类」。如下图所示:

    1600061681868803.png

    具体设置内容和注意事项如下:

    设置项简介
    身份识别参数名

    用户在 HTML5 端访问「报表工程/模板」时,若访问请求中带有该「身份识别参数名」,则会被拦截进行自定义登录验证

    开启「H5集成登录」后,「身份识别参数名」不可为空,否则无法保存

    该示例中设置为aaa

    自定义的登录认证类

    可选项为报表工程%FR_HOME%\webapps\webroot\WEB-INF\classes文件夹下所有类

    开启「H5集成登录」后,「自定义的登录认证类」不可为空,否则无法保存

    该示例中设置为Demo.class

    4.3 效果预览

    4.3.1 登录验证

    HTML5 端访问报表工程/模板,若访问请求中含有「身份识别参数名」,验证通过即可免登录访问,验证不通过则返回报错界面,如下图所示:

    image.png

    验证逻辑如下表所示:

    注:该验证仅对 HTML5 端访问决策报表系统/单张模板生效,App 端、微信集成、钉钉集成、PC 端等不受影响。

    场景访问链接结果
    不含参数访问http://IP:端口号/webroot/decision跳出登录页,正常输入用户名密码登录
    含参数访问用户名正常http://IP:端口号/webroot/decision?aaa=正常的报表用户名根据认证类验证用户,验证通过,免登录访问系统/模板
    用户名禁用http://IP:端口号/webroot/decision?aaa=禁用的报表用户名根据认证类验证用户,验证不通过,跳转报错页面
    用户名不存在http://IP:端口号/webroot/decision?aaa=不存在的报表用户名
    用户名为空http://IP:端口号/webroot/decision?aaa=

    4.3.2 登录超时

    若根据认证类验证通过,访问模板后,触发登录超时,提示「当前会话已超时,请重新登录」,关闭后将停留在页面,不跳转至内置登录页。如下图所示:

    image.png

    5. 顶部导航栏

    由于在不同设备、不同环境下,不确定终端是否有物理返回键,因此新增「顶部导航栏」按钮,支持用户在 HTML5 端开启「顶部返回导航」,可自定义设置导航背景、导航标题、返回按钮、生效终端等。

    5.1 开启顶部导航栏按钮

    以管理员身份进入数据决策系统,点击「管理系统>移动平台>其它」, 开启「顶部导航栏」按钮,可设置项如下图所示:

    1599989160350954.png

    具体设置内容如下表所示:

    设置项
    简介
    导航背景

    用户可自定义设置顶部返回导航栏的背景色

    默认蓝色 

    标题字号

    用户可设置导航栏标题字体大小

    设置范围为12~20号,默认17号

    注:若标题过长,显示不下,则结尾显示...

    标题颜色

    用户可自定义设置导航栏标题字体颜色

    默认白色

    字体加粗

    用户可自行选择导航栏标题字体是否加粗

    默认加粗

    对齐方式

    用户可自行选择导航栏标题文字对齐方式

    可设置居左、居中、居右,默认居中

    按钮颜色

    用户可自定义设置导航栏返回按钮颜色

    默认白色

    终端设置

    用户可自行选择导航栏生效终端

    可选择iOS、Android,默认全选

    5.2 效果预览

    HTML5 端输入http://IP:端口号/webroot/decision,访问报表系统,「顶部返回导航栏」效果如下图所示:

    注:HTML5 端访问报表系统的步骤可参考 HTML5 端访问报表系统 。

    image.png

    「返回按钮」生效范围如下表所示:

    场景
    返回按钮
    登录页无上级页面,不显示返回按钮
    首页无上级页面,不显示返回按钮
    首页超链无上级页面,不显示返回按钮
    单张模板无上级页面,不显示返回按钮
    一级目录无上级页面,不显示返回按钮
    二级及以上目录返回按钮生效,返回上级目录
    目录中的模板返回按钮生效,返回目录
    模板中的超级链接
    返回按钮生效,返回上级模板

    6. H5快速返回

    HTML5 查看多级钻取模板后,只能通过点击多次返回主目录,操作较为繁琐。

    通过「 HTML5 快速返回目录按钮」,无论查看几层钻取后的模板,一键点击后快速返回目录。

    管理员进入「管理系统>移动平台>其他」中,打开按钮「H5快速返回」,并「保存」即可生效。详情参见:[H5]HTML5快速返回目录按钮

    2021-10-25_18-17-58.png

    7. 使用 JSBridge

    「HTML5 移动端展现插件」版本为 V10.4.49 时,支持「使用 JSBridge」功能。

    H5 通过 JSBridge 与原生 App 通信,用户若需要和原生 App 通信,可打开使用 JSBridge按钮,点击保存。如下图所示:

    4.png

    8. 设置资源地址

    设置资源地址具体介绍请参见:设置资源地址

    9. 引入 JS 和 CSS 文件

    「HTML5 移动端展现插件」版本为 V10.4.49 时,支持「引入JS」和「引入CSS」功能。

    HTML5 端支持引入外部的 JS 和 CSS 文件。本章以引入外部的 JS 文件为例,说明该功能的用法。

    注1:引入 CSS 文件和引入 JS 文件操作步骤相同。

    注2:该功能仅支持在 HTML5 端使用,不支持 App 端。

    9.1 引入 JS 文件

    1)将 test.js 文件放到报表工程目录%FR_HOME%\webapps\webroot下,如下图所示:

    image.png

    2)在「引入 JS 」右侧文本框中输入 /test.js ,点击「保存」,如下图所示:

    注:H5 引用 JS 的相对路径和 PC 端有差异,H5 要在路径前面多加个「/」。6.png

    9.2 模板准备

    1)在 FineReport 设计器中,新建普通报表。

    2)在 A1 单元格中输入test,选中「A1单元格」,点击「超级链接>添加链接>JavaScript 脚本」,输入 JavaScript 代码,如下图所示:

    7.png

    JavaScript 代码如下:

    warn();

    9.3 效果预览

    保存模板,点击移动端预览,HTML5 预览效果如下图所示:

    注:HTML5 端预览模板方法请参见:HTML5 端预览

    1576648731462694.gif

    附件列表


    主题: 移动端应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭