Ecology80新表单设计器操作指南设计.docx

1、Ecology80新表单设计器操作指南设计 表单设计器1. 概述表单设计器是系统提供的一种基于Html语言的表单设计模块，除了可以满足用户对表单样式的需求之外，还弥补了图形化表单中无法支持多浏览器、加载速度慢等问题。在表单设计器中可以实现以下的功能 用户可以象在Excel中一样自由绘制表格，这些绘制的表格可以在各个节点甚至不同的系统之间调用，而且可以为手机版设计独有的显示样式； 可以在表格中插入图片、链接甚至是一段代码程序，以满足用户对表单功能的特殊要求； 与其它表格模式不同除了设置字段的编辑属性之外，还可以给每个字段都添加属性，可以是一个简单的计算公式，也可以是复杂的逻辑运算，甚至可以与SA

2、P等外部系统相结合； 而且在绘制明细表的时候，不用象模板模式一样考虑明细表由多少列，主表有多少列，在表单设计器中主表的设计和明细表的设计是分开的，只是显示的时候才会放在一起显示，列数行数互不影响。2. Html模板设计2.1. 表单格式我们选择创建Html模板之后显示如图1所示图1 在模板编辑页面我们看到了Excel编辑器一样的设计页面，我们可以在上面直接绘制表格，注意表格中需要为字段的显示名和字段本身分别留出对应的单元格； 在表格设计器中有按钮，点击后可以编辑单元格的属性，先选中单元格，在点击后显示如图2所示，我们可以和Excel表格一样设定单元格的属性，包括了单元格内容的显示方式、对齐方式

3、、边框和底色等；图2 在表格设计器中还有按钮，点击后可以选择让单元格内容是否折行显示； 其它的一些功能都是画表格的功能，当鼠标移动到快捷按钮上的时候会显示按钮的名称。2.2. 添加主字段在表格的右侧显示了主字段的显示名和字段， 先在绘制好的表格中选中某一个单元格，然后将右侧对应的显示名或字段双击后可以添加到指定的单元格中，如图3所示； 已经添加过的显示名或字段会变为灰色； 如果需要删除已经添加的字段，同样还是先选中单元格，再点击顶部的快捷按钮，就可以把这个字段清除了； 添加了字段我们可以在快捷菜单中选择需要的字体样式，包括了字体、颜色、加粗等，如果需要重新设计字体样式只要点击按钮，就可以把我们

4、设计的显示样式给清除了； 点击按钮，除了会删除字段外，还会将单元格的设置属性，包括字体、颜色、加粗、表格线框、背景色等全部清除。图32.3. 添加明细字段如果表单有明细字段的话，我们将Html设计器顶部菜单切换到明细表，显示如图4所示，先要在主表中选择将明细表放在哪一行，然后点击【明细表】，选择要添加的明细表，就可以将明细表添加到Html模板中了，添加明细表的时候注意，同一行中不能有其它字段了，包括主表显示名、字段、节点意见等。图4双击刚刚添加的明细表，如图5所示，我们需要设置明细表的详细信息了，这里看到的表格行列与主字段页面看到的行列无关图5 添加明细字段的时候注意，显示名和字段需要纵向排列

5、，明细字段尽量放在同一行中显示，如图6所示，如果这里设计成折行的话，将来用户在前端使用的时候看到的也是折行显示的，非常不方便；图6 明细字段需要表头表尾标识进行框定，只有这个标识内的行才可以在前台通过添加删除按钮增加明细行，所以如图6所示，需要先选中字段那一行，再点击上方的【表头标识】按钮，就会在显示名上方添加一个表头标识，再次选中字段那一行，添加【表尾标识】，结果如图7所示图7 在图5所示的明细表详细设计页面右下角有明细表的属性选项，用来控制当前节点是否允许添加明细内容等； 如果有多个明细表的话，直接点击上方菜单【明细表1】左右箭头可以直接切换到其它的明细编辑页面。2.4. 节点意见在图3所

6、示的添加字段的页面，我们将主表字段页面切换到流程节点，显示如图8所示，我们可以如添加字段的方法一样，将节点的签字意见添加到表单中去。图83. 字段属性1、添加了字段之后前端的用户需要能够操作这些字段，所以点击编辑菜单的【字段属性】我们需要给每个字段设置查看、编辑和必填属性，如图9所示，选中字段后选择对应属性即可，明细字段一样的操作方法；图92、除了查看、编辑、必填三个基本属性之外，我们在Html模板中可以对单个字段添加Sql操作，这也是Html模板表单的一大特色，如图10所示，在后面第六节中介绍了一些使用方法。图103、在字段属性中还有一个【更多属性】按钮，点击后显示如图11所示，这里是针对S

7、AP集成进行的字段属性设置。图114. 插入内容1、为了美化Html表单，我们可以点击Html模板编辑器的菜单【插入】，显示如图12所示，图12 我们可以在指定的位置插入图片，如图13所示， 单元格：在选定的单元格中插如图片； 背景图：整个Html模板表单的背景图片，不局限于单元格了； 浮动：插入的图片会在表单中浮动； 图片来源可以分为本地和网络。图13 点击【链接】按钮后我们可以插入一个链接地址，用户在前端访问这个表单的时候点击可以到指定的链接地址； 点击【代码】是在Html模板中插入一段js代码，完成某个动作。5. 模板管理1、最后回到模板管理页面，如图14所示，在这里我们直接对流程中所有

8、的节点进行Html显示模板、打印模板及Mobile模板进行设计。图14 使用左侧的模板导入模板导出功能，我们可以将设计的Html模板导出后在其它系统中进行导入； 点击节点后的同步按钮，显示如图15所示，选择需要同步的节点，可以将当前节点的模板设计同步到其它节点中，注意，这里选择完节点之后，必需回到图1所示的表单编辑页面点击【保存】之后才会同步，否则是不会同步的。图152、对于不擅长Html语言的用户来说，初始化模板是一个好用的工具，它可以帮助用户快速设计一个美观的Html表单模板 点击【初始化模板】按钮后显示如图16所示，我们在这里直接设置表单字段的编辑、必填属性，最重要的是不要忘记设置每行显

9、示几个字段；图16 设置完成后点击【下一步】后显示如图17所示，我们选择Html模板的配色，选中需要使用的颜色后点击【完成】，一个Html模板就制作完成了，非常方便。图176. 实战案例1、概述为了更加清晰了解表单设计器的功能，将通过以下3个实例来了解表单的设计步骤。2、案例一案例一介绍的是一个最简单的留言流程，我们通过初始化模板的方式来自动创建一个Html表单，文档介绍的是模板的制作过程，表单字段管理、节点设置、出口设置这里就不做介绍了，详细的设计步骤见文档自动生成Html模板。通过文档的学习，我们看到使用初始化模板的方式就算不懂Html语言，不会设计表格都没有关系，我们只要简单的两步就可以

10、设计一个美观的Html显示模板。3、案例二案例二介绍的是一个发文流程的显示模板，通过文档我们可以了解以下内容 如何在表单设计器中手动绘制表格； 如何添加字段及设计字段的编辑属性； 如何将表单引用到其它节点中； 显示模板和打印模板的区别。详细的设计步骤见文档手动创建Html模板。4、案例三案例三介绍的是一个资产采购流程的显示模板，通过文档我们可以了解以下内容 如何在表单设计器中添加明细表； 如何在表单设计器中进行字段间的计算；详细的设计步骤见文档Html模板的扩展设计。7. 字段属性案例1、金额转换功能在涉及财务方面的流程经常会用到两种样式，一个是金额千分位显示，另外一个是金额大写显示，所以在设

11、置Html显示模板的时候需要进行设置。在Html显示模板编辑页面中，选中需要千分位显示或者金额大写显示的字段进行设置，当然这个字段是有要求的。 必需是单行文本框-浮点类型的字段； 字段在表单中必需是只读，不能是可编辑； 明细字段不支持此功能。在图18所示的字段属性设置页面，我们需要将【总价】这个字段进行金额转换显示图18 首先点击【字段赋值设置】，会在下面的白框中增加一个公式doFieldMath( )； 将光标点中公式的两个引号中间，然后双击表单字段中选择要显示为金额大写的字段； 在显示方式中选择【金额转换显示】 比如图示的例子，我要在“总价（大写）”这个字段以财务大写的方式进行显示，所以我

12、在图5-1中选中的是“总价”字段进行【字段属性】设置； 总价（大写）字段显示的数值是哪里来的呢，选择的就是“总价”这个字段，简单说就是将将“总价”这个字段的数值在“总价（大写）”字段中以财务大写的方式进行显示； 注意，这里不能选择“总价（大写）”本身哦，必需选择其它字段；添加的字段支持计算公式，如图19所示图192、日期时间计算在使用系统的时候，我们经常需要对时间进行计算，这个是在一般模式或者图形化模式中非常困扰管理员的一件事情，但是在Html表单中就很好的解决了这个问题。同样，我们先选择一个存放时间计算结果的字段，点击右键进入【字段属性】后选择【时间日期计算】，显示如图20所示，时间的计算都

13、是后面的时间减去前面的时间得到一个值，所以如图20所示，应该就是到达的日期时间减去出发的日期时间，所以我们就在公式的双引号中添加“出发日期”，然后点击【插入日期时间合并符】，再点击“出发时间”，这样出发的日期时间就被合并了，然后继续输入减号，再按前面的办法输入“到达日期”【插入日期时间合并符】“到达时间”，这样一个计算公式就做好了，最终结果如图21。图20图21除了以上介绍的最常用的时间计算方法，还可以做如下一些时间计算 表单中的两个日期进行计算doFieldDate($日期1$ $datetime$时间1$日期2$ $datetime$时间2$) 表单中的日期时间与系统当前日期的某个时间进行

14、计算，$currentdate$是指系统当前日期，需要说明的是只能取系统日期，没有办法取系统时间doFieldDate($日期1$ $datetime$时间1$currentdate$ $datetime$时间2$) 系统日期与表单日期进行计算doFieldDate($日期1$ $currentdate$ ) 系统日期与表单某个整数进行计算，必需是整数，不能是浮点数doFieldDate($currentdate$ + $整数1$)如果设置了一般时间我们还可以设置时间的计算是否跳过非工作时间，只要将图5-4中的【日期计算排除非工作日】即可。8. 插入代码案例1、概述在第四节插入内容中我们了解到

15、可以在模板中插入一些代码，用来执行一些操作或完成一些动作。注：以下说明中看到的代码是截图，如果需要使用的话可以到本文档的附件中提取，附件号码与图片号码一致。2、字段联动案例明细表中当某字段值为相关值时，选择框字段自动为是或否，如图22所示，当“总分”字段小于15的时候，选择框字段显示“否”，“总分”字段大于等于15的时候，选择框字段显示“是”。图22假设“总分”字段的ID号为6407，选择框字段的ID号为6408，实际操作过程中字段的ID号可以在Html编辑页面中查看。图233、时间脚本判断在表单中经常会用到一些日期类型的字段，填写的日期必需有一个标准，例如结束时间不能早于开始时间等，以下两个

16、案例可以做为参考 请假开始日期=请假结束日期，7241是请假开始日期的字段ID，7242是请假结束日期的字段ID，实际使用过程中，请用实际的ID进行替换，alert后面的内容为前台表单提示内容；图24 项目实际开工日期=填写日期=项目结束日期，7243是开工日期的字段ID，7244是填写日期的字段ID，7245是结束日期的字段ID，实际使用过程中，请用实际的ID进行替换，alert后面的内容为前台表单提示内容；图25 在填写表单的时候，需要对输入的数字进行控制，比如电话号码只能输入11位，只能输入数字控制等； 字段只能输入数字，alert后面的内容为前台表单提示内容；图26 手机号码只能为11位；图27 分值必需小于100分。图289. 附件下载1. 23-字段联动案例.txt2. 24-时间脚本判断1.txt3. 25-时间脚本判断2.txt4. 26-数字输入.txt5. 27-手机号码11位.txt6. 28-分值小于100分.txt