Display a progress bar on the custom page based on the progress of the approval node.

1. Usage scenarios

You can use this scenario when you need to display the current progress on the custom page based on the current process node.

2. Video Display

此处为语雀视频卡片，点击链接查看：流程进度条展示.mp4

3. Procedure

3.1 create a form

First, create a flow chart and drag and drop the required components in the form.

Form page

3.2 create a custom page

Create a custom page and drag a progress indicator component and a drop-down radio component. Click the data source on the left to create a remote API, that is, an interface. The name can be changed at will. For more information about the request address, see. You can see the parameter name of the request parameter.

Custom page

(1) parameter acquisition

Document address:YIDA platform interface (page data source can be called directly)
getOperationRecordsThe interface uses/v1/process/getOperationRecords.json interface The getInstances interface uses the/v1/process/getInstances.json interface.

processInstanceId data is shown in the following figure flow chartDetails pageData in the address column (variables are shown in the following figure)

Form details page

(2) interface details

Reference Documentation

(3) create a data source

Add a data source

The formUuid in the request parameter is in the application settings in the upper-right corner of the application homepage.

The parameter name is pageSize, and the parameter value can be written as a fixed 100.

Variable binding

The parameter name is formUuid and the parameter value is the form ID shown in the following figure.

Form ID

3.3 Create variables

Create three variables with any name;

In the getInstances interface, click data processing to create the complete callback function and copy the following code.

Data processing

In this code, "text": item.data. Textfield_kpz5h90e. The following unique identifier needs to be modified to the unique identifier of the process name in flow chart. Click save.

function didFetch(content) {
  // content.b = 1; 修改返回数据结构中的 b 字段为1
  console.log("流程实例详情", content)
  let arr = []
  content.data.map((item) => {
    arr.push({
      "text": item.data.textField_kpz5h90e,
      "value": item.processInstanceId
    })
  })
  this.setState({
    options: arr
  })
  return content; // 重要，需返回 content
}

In the getOperationRecords interface, disable automatic loading

Auto load off

Bind variables to request parameters

3.4 variable binding

Click the progress bar component, find the percentage on the right, and bind the variable.

Bind variables

3.5 create an action

Click the drop-down option to find the create action in the lower-right corner and create a Onchange event. After clicking, a JS panel will automatically pop up.

Create onchange event

You can copy the following code.

export function onChange({ value, actionType, item }) {
  console.log('onChange', value);
  this.setState({
    processInstanceId: value
  })
  this.dataSourceMap.getOperationRecords.load().then((res) => {
    console.log("流程审批记录", res)
    let num = Math.ceil(100 / res.length)
    let newname = 0
    res.map((item) => {
      if (item.action) {
        newname += 1
      }
    })
    if (newname * num <= 100) {
      this.setState({
        proportion: newname * num
      })
    } else {
      this.setState({
        proportion: 100
      })
    }
  })
}

After setting, click save to return to the home page.

4. Try it online

• https://www.aliwork.com/bench/coe? tplUuid=TPL_KUDBD3OQ7JXKDU0PK4EB

YIDA in order to better optimize the content and quality of YIDA user manual, it takes you 3-5 minutes to fill in the document feedback questionnaire. The document feedback questionnaire is submitted anonymously, and the questionnaire information is only used for YIDA document experience feedback collection. Thank you for your support for YIDA!

Click this link to fill in the questionnaire

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