E-cology80新表单设计器操作指南.docx

表单设计器概述表单设计器是系统提供的一种基于Html语言的表单设计模块，除了可以满足用户对表单样式的需求之外，还弥补了图形化表单中无法支持多浏览器、加载速度慢等问题。在表单设计器中可以实现以下的功能用户可以象在Excel中一样自由绘制表格，这些绘制的表格可以在各个节点甚至不同的系统之间调用，而且可以为手机版设计独有的显示样式；可以在表格中插入图片、链接甚至是一段代码程序，以满足用户对表单功能的特殊要求；与其它表格模式不同除了设置字段的编辑属性之外，还可以给每个字段都添加属性，可以是一个简单的计算公式，也可以是复杂的逻辑运算，甚至可以与SAP等外部系统相结合；而且在绘制明细表的时候，不用象模板模式一样考虑明细表由多少列，主表有多少列，在表单设计器中主表的设计和明细表的设计是分开的，只是显示的时候才会放在一起显示，列数行数互不影响。Html模板设计表单格式我们选择创建Html模板之后显示如图1所示图1在模板编辑页面我们看到了Excel编辑器一样的设计页面，我们可以在上面直接绘制表格，注意表格中需要为字段的显示名和字段本身分别留出对应的单元格；在表格设计器中有按钮，点击后可以编辑单元格的属性，先选中单元格，在点击后显示如图2所示，我们可以和Excel表格一样设定单元格的属性，包括了单元格内容的显示方式、对齐方式、边框和底色等；图2在表格设计器中还有按钮，点击后可以选择让单元格内容是否折行显示；其它的一些功能都是画表格的功能，当鼠标移动到快捷按钮上的时候会显示按钮的名称。?添加主字段在表格的右侧显示了主字段的显示名和字段，先在绘制好的表格中选中某一个单元格，然后将右侧对应的显示名或字段双击后可以添加到指定的单元格中，如图3所示；已经添加过的显示名或字段会变为灰色；如果需要删除已经添加的字段，同样还是先选中单元格，再点击顶部的快捷按钮，就可以把这个字段清除了；添加了字段我们可以在快捷菜单中选择需要的字体样式，包括了字体、颜色、加粗等，如果需要重新设计字体样式只要点击按钮，就可以把我们设计的显示样式给清除了；点击按钮，除了会删除字段外，还会将单元格的设置属性，包括字体、颜色、加粗、表格线框、背景色等全部清除。图3添加明细字段如果表单有明细字段的话，我们将Html设计器顶部菜单切换到明细表，显示如图4所示，先要在主表中选择将明细表放在哪一行，然后点击【明细表】，选择要添加的明细表，就可以将明细表添加到Html模板中了，添加明细表的时候注意，同一行中不能有其它字段了，包括主表显示名、字段、节点意见等。图4双击刚刚添加的明细表，如图5所示，我们需要设置明细表的详细信息了，这里看到的表格行列与主字段页面看到的行列无关图5添加明细字段的时候注意，显示名和字段需要纵向排列，明细字段尽量放在同一行中显示，如图6所示，如果这里设计成折行的话，将来用户在前端使用的时候看到的也是折行显示的，非常不方便；图6明细字段需要表头表尾标识进行框定，只有这个标识内的行才可以在前台通过添加删除按钮增加明细行，所以如图6所示，需要先选中字段那一行，再点击上方的【表头标识】按钮，就会在显示名上方添加一个表头标识，再次选中字段那一行，添加【表尾标识】，结果如图7所示图7在图5所示的明细表详细设计页面右下角有明细表的属性选项，用来控制当前节点是否允许添加明细内容等；如果有多个明细表的话，直接点击上方菜单【明细表1】左右箭头可以直接切换到其它的明细编辑页面。节点意见在图3所示的添加字段的页面，我们将主表字段页面切换到流程节点，显示如图8所示，我们可以如添加字段的方法一样，将节点的签字意见添加到表单中去。图8字段属性1、添加了字段之后前端的用户需要能够操作这些字段，所以点击编辑菜单的【字段属性】我们需要给每个字段设置查看、编辑和必填属性，如图9所示，选中字段后选择对应属性即可，明细字段一样的操作方法；图92、除了查看、编辑、必填三个基本属性之外，我们在Html模板中可以对单个字段添加Sql操作，这也是Html模板表单的一大特色，如图10所示，在后面第六节中介绍了一些使用方法。图103、在字段属性中还有一个【更多属性】按钮，点击后显示如图11所示，这里是针对SAP集成进行的字段属性设置。图11插入内容1、为了美化Html表单，我们可以点击Html模板编辑器的菜单【插入】，显示如图12所示，图12我们可以在指定的位置插入图片，如图13所示，单元格：在选定的单元格中插如图片；背景图：整个Html模板表单的背景图片，不局限于单元格了；浮动：插入的图片会在表单中浮动；图片来源可以分为本地和网络。图13点击【链接】按钮后我们可以插入一个链接地址，用户在前端访问这个表单的时候点击可以到指定的链接地址；点击【代码】是在Html模板中插入一段js代码，完成某个动作。模板管理1、最后回到模板管理页面