After the process is submitted, the approver initiates other processes based on the subform content.
1. Case Background
When a task is distributed or a project is assigned, you can refer to the following cases when the author submits a task and requires the current approver to initiate other different processes based on the content of the subform.
2. Achieve results
💡Approvers initiate different processes based on submitted sub-table data

3. Implementation steps
3.1 Create A, B Flow Chart
Path: Enter the created application> upper left corner of the page + sign> create flow chart

A and B Flow Chart component configurations
Note: You can set the flow chart configuration according to your needs.

A flow chart component configuration

B Flow Chart component configuration
3.2 Create an initiator flow chart
Path: Enter the created application> upper left corner of the page + sign> create flow chart

Initiate flow chart component configuration
Note: You can set the flow chart configuration according to your needs.

Initiate flow chart component configuration
3.3 Creation and configuration of data sources
Data Source Name: dp2
Auto load: Off
Request address:/dingtalk/web/Application coding/v1/process/startInstance.json
Request method: POST

Data source dp2 creation and configuration
Data Source Name: dp1
Auto load: Off
Request address:/dingtalk/web/Application encoding/v1/process/getOperationRecords.json
Request method: GET

Create and configure data source dp1
3.4 Add actions and configurations to Subforms
3.4.1 add action items

3.4.2 Operation item configuration
Note: the configuration of initiating A process operation is the same as that of initiating B process operation. If there are other operations, you can configure them according to your needs.
Click the action item edit button

Click bind callback function

Create a callback function

3.5 initiate A process and initiate B process callback function code configuration
3.5.1 initiate process A code configuration

Initiate process A code configuration
Sample code:
export function onActionClick({ index, groupId, itemValue, actionKey }) {
const aa = this.state.urlParams.formInstId;
console.log(aa);
const bb = this.utils.getLoginUserId();
const params = {
processInstanceId: aa
}
this.dataSourceMap.dp1.load(params).then((response) => {
console.log(response)
for(var i=1;i<response.length;i++){
if (response[i].actionExt == "doing")
{
if (response[i].operator==bb)
{
const b =
{
"A流程单行文本1组件唯一标识": itemValue.子表单单行文本1组件唯一标识,
"A流程单行文本2组件唯一标识": itemValue.子表单单行文本2组件唯一标识
}
const a = {
processCode: "A流程流程Code",
formUuid: "A流程表单id",
formDataJson: JSON.stringify(b)
}
this.dataSourceMap.dp2.load(a).then((response) => {
alert("发起成功")
})
}
else{
alert("仅当前审批人可发起")
}
}
}
})
}
3.5.2 initiate process B code configuration

Initiate process B code configuration
export function onActionClick1({ index, groupId, itemValue, actionKey }) {
const aa = this.state.urlParams.formInstId;
const bb = this.utils.getLoginUserId();
const params = {
processInstanceId: aa
}
this.dataSourceMap.dp1.load(params).then((response) => {
console.log(response)
for (var i = 1; i < response.length; i++) {
if (response[i].actionExt == "doing") {
if (response[i].operator == bb) {
const b =
{
"B流程单行文本3组件唯一标识": itemValue.子表单单行文本1唯一标识,
"B流程单行文本4组件唯一标识": itemValue.子表单单行文本2唯一标识
}
const a = {
processCode: "B流程流程Code",
formUuid: "B流程表单id",
formDataJson: JSON.stringify(b)
}
this.dataSourceMap.dp2.load(a).then((response) => {
alert("发起成功")
})
}
else{
alert("仅当前审批人可发起")
}
}
}
})
}
-------- Get the latest information on YIDA, welcome to follow US--------
