# 表单设计

# 设计器介绍

表单设计器分为左、中、右三段布局结构：

左：可选字段（组件）区域，可将字段通过拖拽的方式添加到中间的设计区域。左侧字段又分为三类：
- 基础字段：基础的表单组件元素
- 高级字段：系统定制的与文档、组织用户、分类等相关的高级组件
- 布局字段：用于表单布局，用于将表单的一行分割成若干个布局区域
中：表单设计区域，设计区域采取所见即所得的方式，可以通过拖拽调整已有字段的布局，也可以对字段进行复制、删除等操作。点击选择字段后，在右侧将显示该字段的属性。
右：属性区域，分为字段属性与表单属性
- 字段属性：设计区域选择字段后，右侧显示该字段属性。可直接修改属性值，设计区域将实时响应修改变化
- 表单属性：表单的整体属性，以及表单的版本信息

# 栅格布局

设计器采用24栅格布局系统，将整个设计建议区域按照 24 等分的原则进行划分。划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。

关于栅格系统的详细介绍可参考：Grid 栅格 (opens new window)

# 表单属性

表单名称：表单与流程是深度关联的，因此建议采用 “流程名称” + “表单” 的命名格式，例如：文件发布表单
表单ID：系统中表单ID需唯一，建议采用 “form_” + "流程ID" 的命名格式，例如： form_approve
表单布局：
- 水平排列：字段中的文字标签与组件将水平排列
- 垂直排列：字段中的文字标签与组件将垂直排列
- 内联：字段的宽度采用默认宽度，不会自适应占据一整行
标签对其方式：文字标签中，文字的对齐方式，仅在表单布局为“水平排列”时生效
标签布局：填写1~24的数字，代表占据的栅格数。例如宽度填24，代表标签宽度占据一整行（一行为24栅格），此时即使设置表单布局为水平排列，文字标签与组件也将各占据一行。
组件尺寸：组件的高度尺寸，建议使用默认值
隐藏必选标记：默认情况下，字段的操作属性如果选择必填，则标签左侧会显示红色星号，建议采用默认设置

# 字段属性

不同的字段类型，字段属性可能会有差异。

# 常用属性

字段标识：关联数据模型中定义的属性，字段的值将会保存在选择的属性中
标题：字段中的文字标签显示的内容
宽度：字段中组件宽度，可填百分比或具体px的数值，例如：100%、200px
占位内容：当字段没有输入内容时，显示的占位文字，一般为输入提示语
默认值：当表单初始化创建时，默认给字段的值
操作属性：设置字段的必填、只读、禁用等属性

# 高级属性

条件显示：可以指定一段Javascript脚本函数，当函数返回true：显示字段；函数返回false：不显示字段；一直显示请留空。在函数中可使用formData来获取表单中其他字段的值；除了表单中定义的字段变量，还可使用以下默认变量：
- formData.taskName：流程在审批中时（非开始或结束状态），可通过taskName来获知当前流程进度
- taskName取值：未提交（undefined）、审批中（流程图中的任务名）、审批完成（completed）
- formData.myTask：当前用户是否任务处理者（true:是；false：否）
- formData.isStart：是否未保存草稿也未发起申请（true:是；false：否）
- formData.isDraft：是否草稿（true:是；false：否）
- formData.wf_status：当前流程状态（需配合流程的执行监听器或任务监听器来使用，在监听器中改变bpm_package.properties["idoc:wfstatus"]的值）

说明

在编写条件显示、条件激活、事件属性等脚本时，可使用脚本编辑器中的插入脚本功能，在默认函数基础上进行修改。

条件激活：提交审批后，默认所有表单项都将被禁用。可以指定一段Javascript脚本函数，此函数返回true将激活该表单项。在函数中可使用formData来获取表单中其他字段的值；除了表单中定义的字段变量，还可使用预置的默认变量，具体请参考上方的“条件显示”部分
事件属性：
- onChange：字段的值发生变化的时候触发的事件。常用场景：文件选择字段，当选择文件后，需要读取文件属性，自动填入到表单相应字段中。
  - 读取文件属性：getNodesInfo
    - 接收两个参数：val（变化后的值，一般为nodeRef或uuid的数组），json对象（key为要获取的属性名，value为默认值）
    - 返回值：以jsonArray格式返回属性值，例如获取第一个文件的cm_name属性值，可使用：res[0]['cm_name']