Custom Pages for batch approval

Batch approval, YIDA platformHas been included in the product planningIn the future, it can be directly enabled.

This function is not available yet. If you need it urgently, you can implement it according to this document.

After the official function is launched, replace it with the official function.

1. Scenario

After batch approval is enabled, users can complete batch approval in my to-do list, but processes initiated before batch approval is enabled cannot be batch approved, in this case, you can use a custom page to implement batch approval.

2. Implementation steps

2.1 create a form

Flow chart 」:Flow chart, configure node A for direct approval.

Set up flow chart and approver

Required page for approval nodes:Flow chart, set hidden fields, which are not visible during submission, visible on node A, and verification rules are set on node A. Hidden fields cannot be empty during approval.

Set flow chart field display and approval node verification rules

Process batch approval page:On the custom page, the custom table obtains all unapproved processes in the current application of the current login person. The top operation button adds batch consent and batch rejection to perform batch approval.

Set custom batch approval page

2.2 The remote data source obtains the to-do list and displays it in the table.

2.2.1 add remote data sources and call the to-do Task interface

Reference documents:YIDA platform interface (page data source can be called directly)

Create a remote data source and configure the to-do Task interface

2.2.2 process the returned data into a table format

Add a callback function when the request is completed (didFench)

View data in the console

The task ID must be used when performing the approval task, and a unique value must be configured for the primary key of the table data. Therefore, the "processInstanceId", that is, the process instance ID, is used as the primary key.

function didFetch(content) {
  // content.b = 1; 修改返回数据结构中的 b 字段为1
  return content; // 重要，需返回 content
}

2.2.3 Display processed data in a table

Bind a data source to the table and configure processInstanceId as the primary key.

Bind a data source and configure a primary key

2.2.4 configure table paging

Add paging action

2.3 enable row selection to obtain selection process

2.3.1 Open row selector

Open row selector

2.3.2 add the variable data source arr_id 」

Add the variable data source "arr_id" to the data source. When selecting row data, obtain the "processInstanceId" and "taskId" of the row data and push them to the array, then assign the array to the variable data source.

Add a variable data source

2.3.3 add single-line selection callback action events

Add a single-line selection callback event. Because you need to use the "processInstanceId" and "taskId" parameters when performing the approval task, when selecting each row, add "processInstanceId" and "taskId" in each row of data to the array, select multiple rows, and add "processInstanceId" and "taskId" in multiple rows of data to the array through a loop, finally, the processed array data is assigned to the variable data source.

Add a single-line selection callback function

The code reference is as follows:

export function onSelect(selected, rowData, selectedRows) {
  const arr_id =[];
  selectedRows.map((item)=>{
    let id = {
      processInstanceId : item.processInstanceId,
      taskId: item.taskId
    }
    arr_id.push(id);
  })
  console.log("arr_id", arr_id);
  this.setState({
    arr_id: arr_id
  })
}

2.4 Remote Data Sources perform approval tasks

2.4.1 add a remote data source and call the "execute a single task interface" interface

Reference documents:YIDA platform interface (page data source can be called directly)

Create a remote data source and configure and execute a single process interface

2.5 configuration batch approval

2.5.1 add batch agree button

Add batch agree button

2.5.2 Add batch consent action events

Add a callback function to the batch agree button, bind an action event, obtain the arr_id of the variable data source in the action event, and loop the array in the data source, in order to obtain the "processInstanceId" and "taskId" of all processes when selecting a row, the obtained id value, approval opinion (confirm consent) and approval result (AGREE) are taken as parameters, call the data source and perform process approval. After the execution is successful, reload the to-do data source and refresh the to-do list of the current login person. A success dialog box appears.

Batch agree button add callback function

The code reference is as follows:

export function onActionBarItemClick_agree() {
  for(let i =0;i<this.state.arr_id.length;i++){
    const param ={
      taskId: this.state.arr_id[i].taskId,
      procInstId: this.state.arr_id[i].processInstanceId,
      outResult: "AGREE",
      remark: "确认同意"
    }
    this.dataSourceMap['executeTask'].load(param).then(res=>{
      this.dataSourceMap['getTodoTasks'].load();
        this.utils.toast({
          title: 'success',
          type: 'success',
          size: 'medium',
        })
    })
  }
}

2.6 configure batch rejection

2.6.1 add batch reject button

Add batch reject button

2.5.2 Add batch reject action events

Add a callback function to the batch reject button, bind an action event, obtain the arr_id of the variable data source in the action event, and loop the array in the data source, in order to obtain the "processInstanceId" and "taskId" of all processes when selecting a row, the obtained id value, approval opinion (confirm rejection) and approval result (DISAGREE) are taken as parameters, call the data source and perform process approval. After the execution is successful, reload the to-do data source and refresh the to-do list of the current login person. A success dialog box appears.

Add callback function for batch reject button

The code reference is as follows:

export function onActionBarItemClick_disagree() {
  for (let i = 0; i < this.state.arr_id.length; i++) {
    const param = {
      taskId: this.state.arr_id[i].taskId,
      procInstId: this.state.arr_id[i].processInstanceId,
      outResult: "DISAGREE",
      remark: "确认拒绝"
    }
    this.dataSourceMap['executeTask'].load(param).then(res => {
      this.dataSourceMap['getTodoTasks'].load();
      this.utils.toast({
        title: 'success',
        type: 'success',
        size: 'medium',
      })
    })
  }
}

2.7 cause of failure pop up when execution fails

If the current approver needs to fill in the required content or the next approver needs to be specified by the current approver, the approval cannot be executed successfully. Therefore, the reason for the execution failure can be obtained here, A prompt box appears.

Add a request error handler to the data source for executing the approval task. The error message dialog box appears.

Add request error handler (onError)

The reference code is as follows:

function onError(error){
  console.log(error);
  // 可以在这里做弹框提示等操作
  this.utils.toast({
    title: error.message,
    type: 'error',
    size: 'medium',
  })
}

2.8 click details to jump to details page

When an error message appears, click details to go to the details page.

Click details to go to the details page.

The process details page does not contain a parameter link.

The reference code is as follows:

export function onActionClick(rowData) {、
  this.utils.router.push("流程详情页不带参数链接",{formInstId:rowData.processInstanceId },true,true)
}

3. Effect demonstration

4. Video demonstration

此处为语雀视频卡片，点击链接查看：自定义页面-批量审批.mov

5. Try it online

For online experience, please go to the Developer Center.👉Custom Pages for batch approval

-------------------- Get the latest information YIDA, welcome to follow US--------------------