提交表单数据时发起新的流程
1. 使用场景
我们在提交数据时希望可以在提交数据的同时发起一个新的流程,那么我们可以使用我们的表单事件中的服务执行来实现,使用服务执行中的服务回调,首先我们需要将第三方接口进行服务注册,然后在提交时执行,那么我们来一起看一下我们的操作流程。
2. 视频展示
3. 操作步骤
3.1 服务注册
参考文档:服务注册
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1623741205464-967e9d3d-0bf8-4d72-a1be-a0050f833170.png)
3.2 选择 Open API 接口
由于我们需要在表单提交时,自动发起一条新流程,那么我们可以在我们的 Open API 中查找新增流程接口,将其填入 URL 地址中,并根据接口配置参数
参考文档:宜搭 Open API (旧)
配置如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1622040884494-af22a2af-9db4-4a82-8ffe-28a917a5a38c.png)
3.3 formDataJson 数据格式处理
我们发起新流程时,需要将表单页面的数据作为 formDataJson 参数给流程页面的组件,那么我们需要将数据在表单页面中进行处理,处理成 JSON 格式后,配置参数。
3.3.1 创建动作事件,当表单页面值发生变化触发
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1622041192676-afd4e2a3-a2a3-4dc3-a844-2dc3dd6af8f9.png)
3.3.2 对数据进行处理,并将数据赋值给 fromDataJson 组件
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1622041287888-ce2ef4b8-b875-4cba-80c4-94c956de94ae.png)
参考代码如下:
export function onChange({ value }) {
const params = {
"流程页面对应组件唯一标识": this.$('表单组件唯一标识') .getValue(),
}
this.$('formDataJson组件唯一标识').setValue(JSON.stringify(params));
console.log('onChange', value);
}
3.4 配置服务回调
3.4.1 点击表单事件中的服务执行,在单据提交处配置服务回调
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1623741236731-371803fa-bf7c-44af-b6c1-d812c439175a.png)
3.4.2 选择第三方服务并配置参数,在这里,formDataJson 可以直接使用 # { 表单组件 } 变量 来将处理好的数据作为参数配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1622041530626-2b639069-29da-4ffb-9318-57a6bdfbce06.png)
3.5 配置好后,提交表单数据,并输入组件值为「宜搭」
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1622041699386-961a2209-5af3-4bf2-9caa-407c80280e7d.png)
3.6 返回流程数据管理页,我们可以看到流程页面已自动发起一条单行文本组件值为「宜搭」的流程实例
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1622041774103-1dce4265-9297-424b-bd1e-4cacf7eee491.png)
3.7 当我们有多个组件需要处理成 formdatajson 时
3.7.1 在当前表单以及流程页面配置组件
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1626835147401-f607fe9c-3238-4ee1-aaae-dbcc87afa023.png)
表单编辑页面
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1627972458360-a64ba971-7d1a-4f7e-8087-5aab0e22c461.png)
3.7.2 需要将每个组件配置一个 onChange 事件,获取当前页面的数据
使用 this.${ }.getvalue() 获取数据,并处理成对应格式;
更新组件格式可参考文档:宜搭 Open API (旧)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1626835291610-20f342e9-552f-4df8-8bf9-d99200fe7789.png)
3.7.3 视频展示
--------------------欢迎关注我们--------------------
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/jpeg/1631861711706-8b6b606d-26db-4978-8416-d588b2d155c9.jpeg)
本文档对您是否有帮助?