# 表单设计器

目前表单设计器采用微软的infopath

# 主表单

# 主表单和其它模板的关系

一个流程有且仅有一个主表单,同时可以有多个模板(多个xsn文件),主表单上必须有所有字段全集,其它模板上的字段是主表单的子集,工作流编辑器不允许上传含有主表单中没有出现过的字段的其它模板。
工作流编辑器中有以下配置可选择模板:

  • 各步骤的显示模板、回顾模板、打印模板
  • 流程的打印模板、预览模板(办理说明页)、查看模板、管理模板 Word模板不是由infopath制作的,所以不在其列。

# 开发建议

流程中各步骤的显示模板建议共用主表单或者共用其他模板中的一个,各步骤中表单显示上的差异用表单配置中的动态来完成。这么做的目的是减少表单数量,减少后期维护成本,但同时这会明显提升开发成本。如果各步骤中的表单显示差异过于复杂用动态控制变的非常艰难时,可以采用不同步骤选择不同的显示模板来减少开发成本,这么做会让后期维护成本变高(试想以后如果需要增加一个字段,要同时维护多个xsn文件)。所以如何取舍由表单的复杂程度以及开发者的主观意愿判断决定。我们的建议是以开发的高成本为代价减少后期维护成本,即只采用一个模板。
通常预览模板和打印模板都会单独制作,因为其往往和主表单差异明显,一般无法用动态实现共用模板。

# 注意事项

# 命名规则

  • 字段命名必须以字母开头,且可由字母和数字组成,字段名称以field开头,小驼峰格式
  • 重复节表名称以group开头,小驼峰格式
  • view命名规则见视图页

# 字体

  • 设置字体大小的时候请不要使用下拉框中的字体大小:8,10,12,14,18,24,36。可以设置13,15等等相近的大小,避免不同浏览器中出现的字体大小有所差异。具体字体设置可参考表单规范

# 对齐

  • 如果希望表格行是左或者右对齐的,请选择对齐方式,否则ie下都会居中,虽然infopath里看上去是左对齐的

# 文字样式

  • 文字不要直接从word复制过来,可以先复制到notepad,再copy,否则可能复制过来不必要的样式,复制好文字后再通过infopath设置其各种样式就不会出错

# 高度

  • 表格的行高的调整需要调表格padding,不要直接设置高度,否则firefox,chrome行高度不会增高
  • 重复节的高度设为自动(清空高度)

# 表格

  • 表格不要有太多行,可以拆成多个表格,分开画

# 重复表

  • 重复表表头必须有且只能有一行
  • 每行上的弹出菜单有时和重复表的右端稍离开一些,可以稍调整一下repeatTable的宽度
  • repeatTable的新增按钮没有和重复表的左端对齐,可以将重复表放到一个表格中

# 打印

  • 如果需要在repeatSection中支持分页(即每个section前自动分页),该repeatSection必须是view的顶级元素,即必须删除infopath自动创建的最外层table,然后直接插入repeatSection
  • 视图名字决定了视图显示的次序,对于打印,每个视图前自动分页

# 视图页

  • 所谓"视图页"是指的一个xsn文件里的多个视图(View)
  • 为了和多视图/Multi View的机制区分,之后均称之为"视图页"(View Page)
  • 视图页的作用有:
  1. 打印:打印视图中使用作为分页符
  2. 标签:无特殊命名(参见后续解释)的多个视图页,会用多个标签引导用户快速定位
  3. 排序:渲染时多个页出现的顺序将按名称排序
  4. 响应时和多语言:当视图页的命名满足特定格式时,可以按语言和浏览器宽度做选择特定的页面显示
    后面主要针对第4条做详细解释。

# 视图页命名

  • 同一个表单内的每个视图页必须拥有不同的命名
  • 我们借助此表单名增加规则来对多语言(Locale)和响应时(Width)进行支持,例如:
"2. Apply[360a][zh-CN]"
1
  • 这个名称的含义是:
  1. 该视图的显示名称是Apply
  2. 该视图的排序号为2(升序排序)
  3. 至少需要360px的屏幕
  4. 其语言是zh-CN
  5. 360a的a表示“自动宽度”,具体解释参考下节"视图名后缀"
  • 命名举例:
Name Title Width Locale Explained
View View 默认 默认
[360] 空串 360 默认
View[360] View 360 默认
View[zh-CN] View 默认 zh-CN
View[zh][360] View 360 zh
View[360][en-US] View 360 en-US 语言、宽度的顺序可以交换
View[zh,en;q=0.4;fr-FR] View 默认 zh,en,fr-FR 支持Accept-Language (opens new window)格式的语言范围,但q参数会被忽略
View[] View[] 默认 默认 []内容不合法,需是数字或Language Tag (opens new window)
View[中文] View[中文] 默认 默认 同上
View[360]Ex View[360]Ex 默认 默认 []必须在最后

# 视图名前缀

20190124版开始支持

  • 以 "[0-9]+.(空格)" 作为前缀的视图名,此部分会被移除并解析为排序号,增序。
  • 例如:"1. 基本信息" 的视图名只会显示为"基本信息",1作为排序号。
  • 对于无排序号的视图页,会被排在有排序号的视图页后面
  • 无排序号的视图页之间,按照字符串排序(Unicode排序)

# 视图名后缀

  • 所有后缀均仅对移动版有效
  • 后缀需增加在宽度上,或单独使用,比如:[360m] 或 [v]
Suffix Meaning Explained
a 自适应宽度 宽度在view宽度的90%到110%之间的table和div,宽度拉伸到98%
m 移动字体单位 包括a的全部功能,且字体单位由px调整为rem,800宽度以内,base字体高度在16-20动态计算
[v] 移动视图转化 抛弃 InfoPath 绘制的视图布局,按照控件顺序、Label等配置重新自动布局

# 匹配规则

  • 对于设置了本地化/响应时的视图,并非所有的视图页都会被展示
  • InfoPlus会根据用户偏好的语言和屏幕尺寸来筛选所需的视图页
  • InfoPlus优先按照语言筛选,在语言筛选的结果中,再筛选宽度
  • 最终匹配的视图页集合:一般来说后缀会完全相同(除默认宽度和设置宽度相等的情况后缀不同但视为相同);且,后缀完全相同的一定会被都选出或都不选出

# 本地化逻辑(Localize)

  • 用户的语言偏好来自两方面:
    a)用户主动切换的语言(尚不支持)
    b)来自浏览器提供的Accept-Language头
  • 这种语言偏好的格式形如:
"en-US;q=0.8,en;q=0.6,zh-CN;q=0.4,fr;q=0.2"
1

更多细节参见:

视图页Locale集合 匹配的视图页Locale 入选理由
默认 默认
默认,en-US en-US
默认,en,en-US en-US 首先按en-US, en-US不中才考虑后者
默认,en,en-GB,zh-CN en en-US无精确匹配,但en-US上级(en)匹配成功
默认,en-GB,zh-CN zh-CN zh-CN之前的都无法命中
默认,en-GB,zh-TW 默认 所有偏好均无法命中,使用默认
默认,zh zh zh-CN上级命中
默认,jp 默认 所有偏好均无法命中,使用默认
jp,zh-CN zh-CN zh-CN直接命中
jp,zh-TW jp 所有偏好均无法命中且无默认,则会优先按服务器Locale选择,如依然无法命中,则会随机选择一个(一般是第一个)
  • 注意:无法被语言匹配的到的试图页将直接被排除,不参与后续匹配

# 响应时逻辑(Mobilize)

  • 用户偏好的宽度,来自浏览器的页面的宽度
  • 此宽度仅在表单第一次渲染时获得,之后浏览器窗口的resize不会被响应到
  • "默认"宽度按640计算,此数字为InfoPath新建视图后的默认宽度(实际上是629)
  • InfoPlus会统计经过语言筛选后的所有宽度,并按"小于偏好宽度且最接近的"的原则选择1个宽度,如所有均无法容纳,选择超出最少的一个
  • 仅有上一步选中的"1个宽度"的对应的视图被最终选择,即不同宽度的试图页可能拥有不同的页数,例:
视图页集合 偏好宽度 选择结果 理由
V1[200],V1[300],V2[300] 250 V1[200]
V1[200],V1[300],V2[300] 300 V1[300],V2[300]
V1,V2,V1[300],V2[200] 480 V1[300] V1,V2按640计算
V1,V2,V1[300],V2[200] 1024 V1,V2 同上
V1,V2,V1[300],V2[200] 240 V2[200]
V1,V2[640] 240 V1,V2[640] 选择超出最小的
V1,V2[640],V3[320] 240 V3[320]
V1,V2[1024] 800 V1