历史版本28 :[通用]移动端弹窗 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

报表服务器版本APP 版本HTML5 移动端展现插件版本功能变动
11.0V11.0V11.0-
11.0V11.0.91V11.0.91移动端弹窗填报支持 CPT 模板

1.2 应用场景

在普通报表、决策报表中,对于内容较少的超链子模板,用户希望可以直接在当前页弹窗中查看,看完后关闭弹窗继续查看主模板。

对于模板的部分内容,需要在当前页弹窗中进行注释提示,如指标的定义及计算方法、图表的含义注释等。

FineReport 支持在模板中设置移动端弹窗,实现用当前页弹窗展示超链子模板、文本注释、弹窗填报。

例如,用户可以在查看地区销量分析时,点击具体地区,可在弹窗中查看该地区的销量明细数据,如下图所示:

1715567233BvHr.gif

2. 功能简介编辑

2.1 功能入口

用户可在以下「超级链接」和「事件」中设置「移动端弹窗」。

注:图表暂不支持设置移动端弹窗。

分类具体入口
超级链接单元格>超级链接
单元格>条件属性>超级链接
事件单元格控件>事件
表单 body 控件>事件
模板 Web 属性>分页预览&填报预览>事件设置
注:Web 事件中,不支持设置文本弹窗
参数界面控件>事件

1)以「单元格>超级链接」为例

  • 选中单元格,点击右侧属性面板中的「超级链接」按钮

  • 点击「添加链接」旁的「+」按钮,即可选择「移动端弹窗」,如下图所示:

2)以「单元格控件>事件」为例

  • 选中某个单元格,点击右侧属性面板中的「控件设置」按钮,选择某个控件,例如选择「文本控件」

  • 点击「事件」,点击「+」,选择某个事件,例如选择「初始化后」

  • 在弹出的设置框中选择「移动端弹窗」,如下图所示:

2.2 形式为「模板」

「形式」选择「模板」时,移动端弹窗设置界面如下图所示:

形式选择「模板」时,各属性项说明如下表所示:

属性说明
模板
  • 支持选择移动端弹窗链接到的模板

  • 支持链接到普通报表、决策报表、FVS可视化看板

参数
  • 支持设置移动端弹窗的模板参数

  • 支持传递模板参数

样式形式选择「模板」时,样式类型固定为居中弹窗
边框
  • 支持设置边框线条类型

  • 支持设置边框线条颜色

  • 支持设置边框圆角,设置范围为0-24的正整数,默认为4

背景
  • 支持自定义弹窗背景颜色

  • 支持设置背景颜色的不透明度,设置范围为0%-100%,默认为100%

弹窗大小

1)支持手机端和平板端分别设置弹窗大小

2)支持设置「自定义」和「高度自适应」

  • 自定义

默认为「自定义」

支持设置弹出框宽度占屏幕宽度的百分比、弹出框高度占屏幕高度的百分比

支持输入1-100 的正整数

  • 高度自适应

根据内容大小调整弹窗高度

支持设置弹出框宽度占屏幕宽度的百分比、弹出框高度占屏幕高度的百分比

支持输入1-100 的正整数

2.3 形式为「文本」

「形式」选择「文本」时,移动端弹窗设置界面如下图所示:

「形式」选择「文本」时,各属性项说明如下表所示:

属性说明
文本
  • 支持自定义文本内容

  • 支持公式输入

  • 支持换行符 \n 

  • 支持设置文本字号、颜色、是否加粗、是否有下划线、是否斜体

样式「形式」选择「文本」时,样式类型固定为跟随弹窗
边框
  • 支持设置边框线条类型

  • 支持设置边框线条颜色

  • 支持设置边框圆角,设置范围为0-24的正整数,默认为4

背景
  • 支持自定义弹窗背景颜色

  • 支持设置背景颜色的不透明度,设置范围为0%-100%,默认为100%

弹窗大小

1)支持手机端和平板端分别设置弹窗大小

2)支持设置「自定义」和「高度自适应」

  • 自定义

默认为「自定义」

支持设置弹出框宽度占屏幕宽度的百分比、弹出框高度占屏幕高度的百分比

支持输入1-100 的正整数

  • 高度自适应

根据内容大小调整弹窗高度

支持设置弹出框宽度占屏幕宽度的百分比、弹出框高度占屏幕高度的百分比

支持输入1-100 的正整数

3. 示例:普通报表移动端弹窗填报子模板编辑

注1:本节示例为在普通报表移动端弹窗中打开子模板,进行填报。

注2:决策报表移动端弹窗填报子模板,详情参见:移动端弹窗在决策报表填报中的应用 。

注3:若想在 FVS 中实现移动端弹窗的效果,详情参见:FVS跳转网页链接/弹出框事件

3.1 准备模板

1)点击下载准备模板:普通报表移动端弹窗填报子模板(准备).zip 。

2)保存至工程/webapps/webroot/WEB-INF/reportlets文件夹 。

3.2 设置移动端弹窗

1)打开员工信息表(准备).cpt模板,选中 A4-C4 单元格。

2)点击右侧属性面板的「超级链接」按钮,点击「添加链接」旁的「+」按钮,选择「移动端弹窗」,如下图所示:

3)在弹出的设置框中形式选择「模板」,点击「选择」,选择员工信息登记表.cpt模板

4)点击参数面板右上角的「+」按钮,设置参数名为「op」,值选择「字符串」,输入「write」,如下图所示:

注:在移动端弹窗中进行普通报表的填报,需要在链接末尾添加填报参数后缀 &op=write 或添加模板参数 op=write

5)设置移动端弹窗边框、背景、弹窗大小,如下图所示:

3.3 效果预览

App 及 HTML5 端效果预览如下图所示:

4. 已完成模板编辑

点击下载已完成模板:普通报表移动端弹窗填报子模板.zip

5. 注意事项编辑

5.1 网络请求失败

问题描述:

当移动端弹窗内传递模板参数较多或部分参数值太长时,出现报错:网络请求失败

解决方案 :

在模板地址尾部拼接参数&_method=POST,转为 POST 传参即可,如下图所示:

注:参数中 POST 需全部大写,且只有在末尾拼接参数才会正常生效。