流程设计－表单的创建与设计
一、创建表单
按照流程设计流程的一般过程，我们可以先来创建表单。
在应用设计界面选中“表单”导航，在点击新建按钮，可新建一个表单，如下图：
点击新建表单后，会弹出模板选择，您可以根据您要创建的流程，选择一个相对符合您的业务的表单模板。如下图：
一般情况下，我们可以选择“通用表单模板”，点击后打开表单设计界面，如下图：
二、表单设计器介绍
表单元素区：存放表单设计元素的区域，通过拖拽，可以将设计元素添加到表单设计区。
表单工具栏：保存表单、预览表单等操作按钮。
表单设计区：表单的可视化编辑区域。
表单元素列表：表单中所有的设计元素在列表中按层次结构列出。当此区域中的元素被选中时，表单设计区中的相应元素也被选中，反之亦然。
表单属性区：表单和设计元素的属性可以在此编辑。当在表单设计区中选中设计元素时，此区域显示所选设计元素的属性；当表单设计区中未选择任何设计元素时，此区域显示当前表单的属性。
接下来，是对表单的编辑，可以按以下步骤进行：
1. 设置表单名称 在表单属性区中，找到“名称”，填写您要给表单起的名字（同一个应用中，表单名称不同重名）。
2. 编辑表单内容 您可以将元素区的设计元素拖动到表单的指定位置。当某个元素被选中是时，状态如图：，三个操作按钮分别是：移动、复制和删除。
3. 保存表单。
三、表单设计基本操作
1、创建表单元素
要创建表单元素，只需要将元素区的表单组件拖动到表单设计区的合适位置即可。
拖动元素时，将鼠标移动到非容器组件（如文本、输入框、编辑器等）时，会在鼠标移动到的组件前面插入新创建的组件。将鼠标移动到容器组件（如容器、单元格等）时，会在鼠标移动到的组件前面，或者容器内底部新创建的组件。您也可以在释放鼠标左键时按住Ctrl键，出现创建组件定位按钮，选择要创建新组件的位置。
2、移动、复制和删除表单元素
在表单设计区选择要操作的表单元素，出现元素操作条：
鼠标拖动“移动元素”按钮，来移动元素；
鼠标拖动“复制元素”按钮，复制一个新元素；
鼠标左键点击“删除元素”按钮，来删除元素；
3、工具栏
介绍一下以下几个按钮：
保存为模板：将当前表单保存为一个模板，在下次新建表单时，可在模板列表中选择到。
格式刷：先选中调整好样式的元素，点击“格式刷”按钮，再点击要调整的元素，即可复制样式。再次点击“格式刷”按钮，取消格式刷。
导出：点击“导出”按钮展现表单json数据，您可以将json数据拷贝出来，在别的表单中导入。
导入：可以通过“O2数据导入”（就是导出的json数据）以及html和word文件导入。
表单历史版本：表单每次保存都会创建一个历史版本，点击“表单历史版本”按钮弹出表单历史版本列表，您可以选择将表单设计恢复到某个以前的版本。
清除无效格式：在一些意外的情况下，表单数据出现损坏，导致表单无法展现，您可以点击“清除无效格式”按钮进行修复。
4、表单元素区
四、表单属性
创建一个表单时，默认会在属性区显示当前表单的属性。如果您已经选中了其它的设计元素，在表单空白处点击鼠标左键，会选中当前表单；或在表单元素列表中选中表单。如图：
属性区显示如下图：
表单属性包括五个标签：基本、提交、事件、HTML和JSON。
基本：表单的基本属性配置，名称、样式、描述等。
提交：完成流程待办处理是的提交模式配置，包括提交的界面、表单的校验以及手写签批等配置
事件：配置表单的事件，可以编写事件脚本。
HTML：可以在此处查看表单的HTML内容。
JSON：表单和设计元素都是通过json数据格式来描述的，这里可以查看表单的json数据。
1、“基本”属性
表单基本属性如下表：
属性 | 描述 | 备注 |
标识 | 表单的唯一标识 | 自动生成 |
名称 | 表单的名称 | 必填，同一个应用内不可重名 |
描述 | 表单的描述 | |
分类 | 表单的分类 | 可在表单列表页面分类查看 |
是否只读 | 设置表单是否只读 | 设置为“是”表单上的所有元素都不可编辑 |
表单样式 | 内置的表单样式 | 可选值： 传统样式 蓝色简洁 红色简洁 手机样式（用于手机表单） |
图标 | 可以为表单设置一个图标 | |
打印表单 | 当当前表单执行打印操作时，可以使用另一个表单来展现当前的业务数据，可在此处指定打印时要使用的表单。如不指定，就为当前表单 | 可选本应用内的任意表单 |
预加载脚本 | 表单加载时运行的脚本 | 可以选择任何平台、任何应用中的脚本库，可选择多个脚本库。这里的脚本在所有表单事件之前运行，当然要注意：当你选择多个预加载脚本时，它们是按你的选择顺序运行的。 |
样式 | 可以为表单定制CSS样式 | 表单可以是看作是一个容器，它对应HTML的一个DIV对象，您可以为这个DIV对象设置CSS样式和HTML属性。 |
属性 | 可以为表单设置HTML属性 | |
CSS | 表单要使用的CSS内容 | |
语言包 | 表单使用的语言包 | 您可以使用数据字典或叫脚本库作为表单的语言包，（按照 "lp-"+o2.language 的命名方式，如“lp-zh-cn”或“lp-en”）；也可以通过脚本，返回一个json格式的对象作为语言包。然后在表单其他设计元素中，可以使用{{$.lp.xxx}}方式使用语言包。 |
校验意见 | 可以在此编写校验脚本，在表单流转提交时执行 | 在意见和决策窗口确定后执行。如果校验成功返回true；如校验失败，返回失败信息，系统会在相应的位置，提示校验失败信息 |
校验路由 | 可以在此编写校验脚本，在表单流转提交时执行 | |
流转校验 | 可以在此编写校验脚本，在表单流转提交时执行 | 在点击“继续流转”按钮时，填写意见和选择决策窗口未弹出时执行。脚本返回布尔型：返回true时继续执行流转；返回false时中断执行。 |
2、“提交”属性
表单提交属性如下表：
属性 | 描述 | 备注 |
提交界面 | 完成待办处理，点击“继续流转”按钮后使用的提交窗口界面 | 可以使用“系统默认”或使用子表单。（在新建表单的模板窗口，有提交表单的模板） |
手写意见设置 | ||
手写 | 是否允许在填写流程意见时进行手写签批 | |
手写板宽度 | 设置手写板宽度，单位px | 仅PC端有效，移动端横向全屏 |
手写板高度 | 设置手写板高度，单位px | 仅PC端有效，移动端横向全屏 |
操作条 | 定义手写板操作条 | 仅PC端有效 |
流转后提示框 （仅在浏览器新窗口中打开时有效） | ||
流转后提示框 | 选择是否在流转成功后显示提示框 |
|
提示框位置 | 选择提示框出现的位置 | |
关闭时间 | 设置提示窗口自动关闭的时间 | |
流转后 | 配置流转结束后进行的操作：关闭窗口或重定向 | 如果选择“重定向”可在重定向脚本中返回一个URL，窗口将重定向到此RUL。 |
校验 | ||
校验意见 | 可以在此编写校验脚本，在表单流转提交时执行 | 在意见和决策窗口确定后执行。如果校验成功返回true；如校验失败，返回失败信息，系统会在相应的位置，提示校验失败信息 |
校验路由 | 可以在此编写校验脚本，在表单流转提交时执行 | |
流转校验 | 可以在此编写校验脚本，在表单流转提交时执行 | 在点击“继续流转”按钮时，填写意见和选择决策窗口未弹出时执行。脚本返回布尔型：返回true |
3、表单事件
表单的事件包含两种：一种是表单容器对应的DIV对象的DOM事件，一种是表单系统事件。
表单系统事件如下表：
事件名 | 描述 |
beforeLoad | 表单被载入之前执行。 |
afterLoad load postLoad | 表单被完全载入之后执行 |
beforeSave | 在用户点击“保存”按钮，或执行this.form.save方法，而数据没有真正被保存之前。在表单执行流转的过程中，会先对表单数据进行保存，所以也会触发beforeSave事件。 |
afterSave | 在用户点击“保存”按钮，或执行this.form.save方法，数据被保存成功之后。在表单执行流转的过程中，会先对表单数据进行保存，所以也会触发afterSave事件。 |
beforeClose | 表单窗口被关闭之前。 |
submit beforeProcess | 在表单继续流转之前执行（已经填写意见和选择决策）。点击“继续流转”按钮，或执行this.from.process方法，都会触发此事件。 |
beforeProcessWork | 在表单继续流转之前执行，与submit和beforeProcess不同的是，beforeProcessWork是在填写意见和选择决策窗口弹出之前执行的。 |
afterLoadProcessor | 加载弹出的提交界面以后执行 |
afterProcess | 在表单执行流转成功之后执行。 |
beforeReset | 在执行重置处理人操作之前执行。 |
afterReset | 在执行重置处理人操作之后执行。 |
beforeRetract | 在执行撤回操作之前执行。 |
afterRetract | 在执行撤回操作之后执行。 |
beforeReroute | 在执行调度操作之前执行。 |
afterReroute | 在执行调度操作之后执行。 |
beforeModulesLoad | 在表单已载入,但表单中的元素未载入之时执行。 |
afterModulesLoad | 在表单中的所有元素载入之后执行。实际执行时间与afterLoad、load、postLoad相同。 |
beforeDelete | 在执行删除操作之前执行。 |
详细的表单事件请可参考：API文档
表单容器的DOM事件请参考相关HTML规范。可参考：MDN: HTMLDivElement
本章节我们详细介绍了表单的设计，以及每个设计元素，下一章我们将详细介绍流程的设计。
下一篇：表单-页面-平台应用配置
浙公网安备 33010602009829号