html阻止表单刷新提交弹出框_O2OA开源免费开发平台:自定义提交功能

本文介绍了如何在O2OA开发平台中自定义表单提交界面,包括创建自定义提交模板、设置主表单提交、直接显示提交界面以及修改提交框尺寸。通过脚本和表单组件的运用,实现PC端和移动端的界面定制。
摘要由CSDN通过智能技术生成

功能介绍

当默认提交界面不能满足用户时候,可以使用本功能进行提交界面的定制。自定义提交功能基于表单和脚本实现。开发人员可以通过修改自定义界面的样式,添加或删除组件,设置提交选人框的高度、宽度和预定义的样式来实现界面的修改。该功能满足PC端提交界面和移动端界面的定制。

基本操作步骤

注:本章节和脚本相关的内容都是以自定义表单自带的脚本内容为准。

根据模板创建自定义提交表单

1、打开流程管理,并打开具体的流程应用设计

2、在表单视图,点新建表单,在弹出的模板中选择“自定义提交模板(PC)”或“自定义提交模板(Mobile)”

1aec33c4003ad009569e4ca6fb3fd827.png

3、保存新建的表单。

79c9e0de6c5e0d34099eb2ee20e35926.png

4、提交界面执行的脚本在表单最后一个div的queryLod事件中执行。

在主表单中设置“提交表单”

1、打开流程主表单,并点击“提交”附签

2、在表单处选择上一步创建的提交表单,如果是所有的流程都使用同一个提交界面,可以选择对应应用。如果需要通过计算来使用提交界面,可以点击“计算表单”,并通过脚本返回对应的表单。

3、“提交(继续流转)操作脚本”填写“this.popupProcessor()”,如果是手机端填写“this.popupProcessorMobile()”

d044be75c85e12780d722d9abb6b4158.png

4、默认提交表单效果如下图:

e98d38385d33c03841178c8f924d6f52.png

在主表单中直接显示提交界面

系统还允许直接在主表单中直接显示提交界面,点击继续流转后可弹出提交界面。

1、执行上面小节的基础操作步骤。

2、在主表单中插入一个“子表单”组件。

293b53651535f34d1500ea1c0aecf121.png

3、子表单属性中选择“计算子表单”,子表单脚本使用

if( this.workContext.getControl().allowProcessing ){ //当前用户可以流转的时候嵌入

return "自定义提交表单PC端";

}else{

return null

}

4、效果如下图:

3dca6bd725b8cd353cbb8d803c91f96f.png

自定义提交界面的修改样例

自定义提交界面主要使用的脚本和表单组件来开发。开发需要了解表单的开发,脚本API和Mootools的相关知识。

拟稿时隐藏意见填写区域

1、选中意见填写区域标题所在单元格“routeOpinionTileTd”

2、在单元格的onload事件中填写脚本

if( this.workContext.getWork().activityName === "拟稿" ){

this.target.node.getParent("tr").hide()

}

3、选中意见填写区域所在单元格“inputOpinionNodeTd”

4、在单元格的onload事件中填写脚本

if( this.workContext.getWork().activityName === "拟稿" ){

this.target.node.getParent("tr").hide()

}

443b50c1aeaaa9016da1dcfd282057b6.png

修改提交框的高度和宽度

提交框的高度和宽度在脚本里定义,这里需要修改脚本

1、点击提交表单的最后一个div(div_loadSubmitForm),点击“事件”附签。

2、在queryLoad事件中可以看到脚本。

3、在 window.O2Processor 类的 initConstant 方法中可以修改表单的高度宽度参数

fedbd38886c627186bcbab2dbbb1bd14.png

(转自公众号:浙江兰德网络)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值