填报页面优化技巧

1.1 问题描述

前端填报预览时，如果选中某个单元格，该单元格会出现黑色外框，比较影响整个页面的美观，如下图所示：

1.2 解决方案

1）打开需要去除黑色外框的模板，点击菜单栏「模板>模板 Web 属性>填报页面设置>为该模板单独设置」，添加加载结束事件，如下图所示：

JavaScript 代码如下：

_g().curLGP.hideSelectFrame();

2）保存模板，点击「填报预览」，此时选中单元格，可以看到没有黑色边框，如下图所示：

注1：不支持移动端。

注2：如果希望在数据分析页面实现该效果，可参见文档：去除数据分析页面选中单元格时的黑色边框 。

2.1 问题描述

填报提交和校验在成功或失败后，在填报页面的右侧会弹出提示框，如下图所示：

2.2 解决方案

以去除提交后的提示框为例，打开模板，点击菜单栏「模板>模板 Web 属性>填报页面设置>为该模板单独设置」，添加填报后事件，如下图所示：

注：如果是去除校验后的提示框，JS 代码相同，但填报后事件需要改为添加校验后事件。

JavaScript 代码如下：

return false;

3.1 应用场景

在填报提交成功后，希望页面可以立即刷新，直接看到更新后的数据，如下图所示：

3.2 实现方案

以单 sheet 填报为例，打开模板，点击菜单栏「模板>模板 Web 属性>填报页面设置>为该模板单独设置」，添加填报成功事件，如下图所示：

JavaScript 代码如下：

location.reload();

3.3 注意事项

对于多 sheet 填报表，若对 sheet2 进行填报，使用此方案刷新后会跳转到 sheet1，希望实现哪个 sheet 填报成功，刷新后就显示哪个 sheet ，则需要将此方案的代码修改为： 

this.refreshAllSheets();

4.1 应用场景

希望填报成功后自动关闭填报页面，如下图所示：

4.2 实现方案

打开填报模板，点击菜单栏「模板>模板 Web 属性>填报页面设置>为该模板单独设置」，添加填报成功事件，如下图所示：

JavaScript 代码如下：

window.close();

5.1 应用场景

• 对一组报表进行填报时，希望填报成功后可以自动跳转到下一个报表进行填报。

• 填报提交后，如果填报失败，希望可以跳转到指定的失败页面。

5.2 实现方案

打开填报模板，点击菜单栏「模板>模板 Web 属性>填报页面设置>为该模板单独设置」，添加填报成功事件和填报失败事件，如下图所示：

填报成功 JavaScript 代码如下：

window.open("/webroot/decision/view/report?viewlet=doc%2FForm%2FFreeFrom%2FFreeForm.cpt&op=write");//示例模板链接，用户可自行更换

填报失败 JavaScript 代码如下：

window.open("/webroot/WEB-INF/resources/error.html");//示例页面链接，用户可自行更换

6.1 应用场景

希望实现点击超链可以跳转到填报模板，直接进行填报呢，如下图所示：

6.2 实现方案

如果链接的是填报模板，希望点击超链后模板以填报预览方式打开，此时需要在报表的路径后面加参数&op=write，如下图所示：

7.1 应用场景

前端填报时，希望根据用户录入的其他单元格数据，自动计算出另外一些单元格的值，从而简化用户的输入，同时避免人工计算可能导致的错误，如下图所示：

7.2 实现方案

在公式编辑界面，勾选「填报/分析时，保留公式用于计算」即可，如下图所示：

注：填报设置自动计算后，计算时会与服务器进行交互，计算过程是由后台服务器进行的，因此自动计算一定程度上影响了填报效率，若用户不需要自动计算，尽量不设置自动计算以提高填报效率。

8.1 应用场景

填报区域和浏览器整体背景都是白色时，视觉上很难区分，影响填报体验。希望对填报区域进行视觉突出，如下图所示：

8.2 实现方案

在设计器里面直接修改浏览器背景色，跟填报区域区分开形成视觉差，如下图所示：