E-cology8.0新表单设计器操作指南

表单设计器

1.概述

表单设计器是系统提供的一种基于Html语言的表单设计模块，除了可以满足用户对表单样式的需求之外，还弥补了图形化表单中无法支持多浏览器、加载速度慢等问题。

在表单设计器中可以实现以下的功能

•用户可以象在Excel中一样自由绘制表格，这些绘制的表格可以在各个节点甚至不同的系统之间调用，而且可以为手机版设计独有的显示样式；

•可以在表格中插入图片、链接甚至是一段代码程序，以满足用户对表单功能的特殊要求；

•与其它表格模式不同除了设置字段的编辑属性之外，还可以给每个字段都添加属性，可以是一个简单的计算公式，也可以是复杂的逻辑运算，甚至可以与SAP等外部系统相结合；

•而且在绘制明细表的时候，不用象模板模式一样考虑明细表由多少列，主表有多少列，在表单设计器中主表的设计和明细表的设计是分开的，只是显示的时候才会放在一起显示，列数行数互不影响。

2.H tml模板设计

2.1.表单格式

我们选择创建Html模板之后显示如图1所示

图1

•在模板编辑页面我们看到了Excel编辑器一样的设计页面，我们可以在上面直接绘制表格，注意表格中需要为字段的显示名和字段本身分别留出对应的单元格；

•在表格设计器中有按钮，点击后可以编辑单元格的属性，先选中单元格，在点击后显示如图2所示，我们可以和Excel表格一样设定单元格的属性，包括了单元格内容的显示方式、对齐方式、边框和底色等；

图2

•在表格设计器中还有按钮，点击后可以选择让单元格内容是否折行显示；

•其它的一些功能都是画表格的功能，当鼠标移动到快捷按钮上的时候会显示按钮的名称。

2.2.添加主字段

在表格的右侧显示了主字段的显示名和字段，

•先在绘制好的表格中选中某一个单元格，然后将右侧对应的显示名或字段双击后可以添加到指定的单元格中，如图3所示；

•已经添加过的显示名或字段会变为灰色；

•如果需要删除已经添加的字段，同样还是先选中单元格，再点击顶部的快捷按钮，就可以把这个字段清除了；

•添加了字段我们可以在快捷菜单中选择需要的字体样式，包括了字体、颜色、加粗等，如果需要重新设计字体样式只要点击按钮，就可以把我们设计的显示样式给清除了；

•点击按钮，除了会删除字段外，还会将单元格的设置属性，包括字体、颜色、加粗、表格线框、背景色等全部清除。

图3

2.3.添加明细字段

如果表单有明细字段的话，我们将Html设计器顶部菜单切换到明细表，显示如图4所示，先要在主表中选择将明细表放在哪一行，然后点击【明细表】，

选择要添加的明细表，就可以将明细表添加到Html模板中了，添加明细表的时候注意，同一行中不能有其它字段了，包括主表显示名、字段、节点意见等。

图4

双击刚刚添加的明细表，如图5所示，我们需要设置明细表的详细信息了，这里看到的表格行列与主字段页面看到的行列无关

图5

•添加明细字段的时候注意，显示名和字段需要纵向排列，明细字段尽量放在同一行中显示，如图6所示，如果这里设计成折行的话，将来用户在前端使用的时候看到的也是折行显示的，非常不方便；

图6

•明细字段需要表头表尾标识进行框定，只有这个标识内的行才可以在前台通过添加删除按钮增加明细行，所以如图6所示，需要先选中字段那一行，再点击上方的【表头标识】按钮，就会在显示名上方添加一个表头标识，再次选中字段那一行，添加【表尾标识】，结果如图7所示

图7

•在图5所示的明细表详细设计页面右下角有明细表的属性选项，用来控制当前节点是否允许添加明细内容等；

•如果有多个明细表的话，直接点击上方菜单【明细表1】左右箭头可以直接切换到其它的明细编辑页面。

2.4.节点意见

在图3所示的添加字段的页面，我们将主表字段页面切换到流程节点，显示如图8所示，我们可以如添加字段的方法一样，将节点的签字意见添加到表单中去。

图8

3.字段属性

1、添加了字段之后前端的用户需要能够操作这些字段，所以点击编辑菜单的【字段属性】我们需要给每个字段设置查看、编辑和必填属性，如图9所示，选中字段后选择对应属性即可，明细字段一样的操作方法；

图9

2、除了查看、编辑、必填三个基本属性之外，我们在Html模板中可以对单个字段添加Sql操作，这也是Html模板表单的一大特色，如图10所示，在后面第六节中介绍了一些使用方法。

图10

3、在字段属性中还有一个【更多属性】按钮，点击后显示如图11所示，这里是针对SAP集成进行的字段属性设置。

图11

4.插入内容

1、为了美化Html表单，我们可以点击Html模板编辑器的菜单【插入】，显示如图12所示，

图12

•我们可以在指定的位置插入图片，如图13所示，

➢单元格：在选定的单元格中插如图片；

➢背景图：整个Html模板表单的背景图片，不局限于单元格了；

➢浮动：插入的图片会在表单中浮动；

➢图片来源可以分为本地和网络。

图13

•点击【链接】按钮后我们可以插入一个链接地址，用户在前端访问这个表单的时候点击可以到指定的链接地址；

•点击【代码】是在Html模板中插入一段js代码，完成某个动作。5.模板管理

1、最后回到模板管理页面，如图14所示，在这里我们直接对流程中所有的节点进行Html显示模板、打印模板及Mobile模板进行设计。

图14

•使用左侧的模板导入模板导出功能，我们可以将设计的Html模板导出后在其它系统中进行导入；

•点击节点后的同步按钮，显示如图15所示，选择需要同步的节点，可以将当前节点的模板设计同步到其它节点中，注意，这里选择完节点之后，必需回到图1所示的表单编辑页面点击【保存】之后才会同步，否则是不会同步的。

图15

2、对于不擅长Html语言的用户来说，初始化模板是一个好用的工具，它可以帮助用户快速设计一个美观的Html表单模板