1. 概述编辑
1.1 版本
| 报表服务器版本 | APP 版本 | HTML5 移动端展现插件版本 | 功能变动 |
|---|---|---|---|
| 11.0 | V11.0 | V11.0 | - |
| 11.0 | V11.0.91 | V11.0.91 | 移动端弹窗填报支持 CPT 模板 |
1.2 应用场景
对于内容较少的超链子模板，用户希望可以直接在当前页弹窗中查看，看完后关闭弹窗继续查看主模板。
对于模板的部分内容，需要在当前页弹窗中进行注释提示，如指标的定义及计算方法、图表的含义注释等。
FineReport支持在模板中设置移动端弹窗，实现用当前页弹窗展示超链子模板、文本注释、弹窗填报。
例如，用户可以在查看地区销量分析时，点击具体地区，可在弹窗中查看该地区的销量明细数据，如下图所示：
2. 功能简介编辑
2.1 FVS可视化看板
2.1.1 功能入口
1）打开FVS模板，在模板上方的右上角切换为移动端预览。
2）选中目标组件，在右侧配置栏中选择「 交互>点击事件> 添加点击事件>网页链接/弹出框」。
3）在弹出的设置框中自定义事件名称，设置打开方式为「弹出框」，支持设置内容事件和样式，如下图所示：
2.1.2 内容事件
内容分为：网页链接、模板链接、文本提示三种类型，如下表所示：
| 内容分类 | 示例 |
|---|---|
网页链接 | 支持网页路径和模板路径、支持绝对路径与相对路径 支持在路径中设置参数，参数类型包括当前组件字段、自定义公式编辑、自定义内容 1）网页路径 说明：确保当前服务器可访问该网址，如为相对路径，资源文件需保存到工程/webapps/webroot文件夹或子文件夹下
2）模板路径 说明：确保当前服务器可访问该模板路径即可，如为相对路径，模板文件需保存到工程/webapps/webroot/WEB-INF/reportlets文件夹或子文件夹下
|
| 模板链接 | 支持选择模板添加、手动输入模板路径添加 支持在路径中设置参数，参数类型包括当前组件字段、自定义公式编辑、自定义内容 1）点击「选择模板」添加 点击「选择模板」按钮，即可选择工程/webapps/webroot/WEB-INF/reportlets文件夹下任意报表文件
2）手动输入模板路径添加 可手动输入模板路径添加模板链接， 如需在弹窗中进行普通报表的填报，需要在链接末尾添加填报参数后缀 &op=write或添加模板参数op=write
|
| 文本提示 |
|
2.1.3 样式设置
FineVis数据可视化插件V2.6.1之前版本，移动端预览FVS模板时支持弹出框，但不支持自定义弹出窗样式。
FineVis数据可视化插件V2.6.1及以上版本，移动端预览FVS模板时支持自定义弹出窗样式，支持的弹出窗样式设置如下图所示：
具体设置项说明如下表所示：
| 设置项 | 说明 |
|---|---|
| 显示位置 | 1）内容事件选择「模板链接」和「网页链接」时，不存在「显示位置」设置，弹窗默认居中显示 2）内容事件选择「文本提示」时，增加「显示位置」设置 ，可设置弹出窗的显示位置
|
| 大小 | 1）支持手机端和平板端分别设置 2）支持设置「自定义宽高」和「高度自适应」
默认为「自定义宽高」 支持设置弹出框宽度占屏幕宽度的百分比、弹出框高度占屏幕高度的百分比 支持输入1-100 的正整数
根据内容多少调整弹出框高度 支持设置弹出框宽度占屏幕宽度的百分比 支持输入1-100 的正整数 |
| 标题 |
|
| 边框背景 |
|
| 内边距 |
|
| 圆角半径 | 支持对弹出框整体设置或单个圆角分别设置圆角半径
|
2.2 普通报表、决策报表
2.2.1 功能入口
用户可在以下「超级链接」和「事件」中设置「移动端弹窗」。
注：图表暂不支持移动端弹窗。
| 分类 | 具体入口 |
|---|---|
| 超链 | 单元格>超级链接 |
| 单元格>条件属性>超级链接 | |
| 事件 | 单元格控件>事件 |
| 表单 body 控件>事件 | |
| 模板 Web 属性>分页预览&填报预览>事件设置 注：Web 事件中，不支持设置文本弹窗 | |
| 参数界面控件>事件 |
1）以「单元格>超级链接」为例
选中单元格，点击右侧属性面板中的「超级链接」按钮
点击「添加链接」旁的「+」按钮，即可选择「移动端弹窗」，如下图所示：
2）以「单元格控件>事件」为例
选中某个单元格，点击右侧属性面板中的「控件设置」按钮，选择某个控件，例如选择「文本控件」
点击「事件」，点击「+」，选择某个事件，例如选择「初始化后」
在弹出的设置框中选择「移动端弹窗」，如下图所示：
2.2.2 形式为「模板」
「形式」选择「模板」时，移动端弹窗设置界面如下图所示：
形式选择「模板」时，各属性项说明如下表所示：
| 属性 | 说明 |
|---|---|
| 模板 |
|
| 参数 |
|
| 样式 | 形式选择「模板」时，样式类型固定为居中弹窗 |
| 边框 |
|
| 背景 |
|
| 弹窗大小 | 1）支持手机端和平板端分别设置弹窗大小 2）支持设置「自定义」和「高度自适应」
默认为「自定义」 支持设置弹出框宽度占屏幕宽度的百分比、弹出框高度占屏幕高度的百分比 支持输入1-100 的正整数
根据内容大小调整弹窗高度 支持设置弹出框宽度占屏幕宽度的百分比、弹出框高度占屏幕高度的百分比 支持输入1-100 的正整数 |
2.2.3 形式为「文本」
「形式」选择「文本」时，移动端弹窗设置界面如下图所示：
「形式」选择「文本」时，各属性项说明如下表所示：
| 属性 | 说明 |
|---|---|
| 文本 |
|
| 样式 | 「形式」选择「文本」时，样式类型固定为跟随弹窗 |
| 边框 |
|
| 背景 |
|
| 弹窗大小 | 1）支持手机端和平板端分别设置弹窗大小 2）支持设置「自定义」和「高度自适应」
默认为「自定义」 支持设置弹出框宽度占屏幕宽度的百分比、弹出框高度占屏幕高度的百分比 支持输入1-100 的正整数
根据内容大小调整弹窗高度 支持设置弹出框宽度占屏幕宽度的百分比、弹出框高度占屏幕高度的百分比 支持输入1-100 的正整数 |
3. 示例一：FVS移动端弹出框查看子模板编辑
3.1 准备模板
1）点击下载准备模板：FVS移动端弹出框查看子模板（准备）.zip
2）保存至工程/webapps/webroot/WEB-INF/reportlets文件夹
3.2 设置弹出框事件
1）打开地区销量分析（准备）.fvs模板，在右上角切换至移动端
2）选中饼图组件，点击「交互>点击事件>添加点击事件>网页链接/弹出框」，如下图所示：
3）设置事件名称为「销量明细」，打开方式选择「弹出框」
4）设置内容事件
内容链接选择「模板链接」，点击「选择模板」，选择地区销量明细.fvs模板
设置参数，参数名称为「area」（与地区销量明细.fvs模板中参数名保持一致），参数类型选择「当前组件字段」，参数内容为「系列名」，如下图所示：
5）设置样式
选择「样式设置」
设置弹出框的大小、标题、边框背景、内边距、圆角半径
点击「确定」，如下图所示：
3.3 效果预览
App 及 HTML5 端效果预览如下图所示：
4. 示例二：普通报表移动端弹窗填报子模板编辑
注：本节示例为在普通报表移动端弹窗中打开子模板，进行填报。
决策报表移动端弹窗填报子模板，请参见文档：移动端弹窗在决策报表填报中的应用
4.1 准备模板
1）点击下载准备模板：普通报表移动端弹窗填报子模板（准备）.zip
2）保存至工程/webapps/webroot/WEB-INF/reportlets文件夹
4.2 设置移动端弹窗
1）打开员工信息表（准备）.cpt模板，选中A4-C4单元格
2）点击右侧属性面板的「超级链接」按钮，点击「添加链接」旁的「+」按钮，选择「移动端弹窗」，如下图所示：
3）在弹出的设置框中形式选择「模板」，点击「选择」，选择员工信息登记表.cpt模板
4）点击参数面板右上角的「+」按钮，设置参数名为「op」，值选择「字符串」，输入「write」，如下图所示：
5）设置移动端弹窗边框、背景、弹窗大小，如下图所示：
4.3 效果预览
App 及 HTML5 端效果预览如下图所示：
5. 已完成模板编辑
6. 注意事项编辑
6.1 网络请求失败
问题描述：
当移动端弹窗内传递模板参数较多或部分参数值太长时，出现报错：网络请求失败
解决方案 ：
在模板地址尾部拼接参数&_method=POST，转为 POST 传参即可，如下图所示：
注：参数中 POST 需全部大写，且只有在末尾拼接参数才会正常生效。
