Process modification instance

1. Usage scenarios

Because the submission process is not allowed to be modified, we have introduced the following example to teach you how to modify the process data after the submission process.

2. Video Display

此处为语雀视频卡片，点击链接查看：修改流程实例.mp4

3. Procedure

3.1 create a form

(1) create flow chart

First, create a flow chart (as shown in the figure, place two single-line text components in the flow chart), click save, and return to the home page.

Flow sheet page

(2) create a custom page

Create a custom form, skip template selection, and then place a table component. Modify the title and data field of the data column in the property on the right. (The data field is the unique identifier corresponding to the single-line text component in flow chart)

Custom page

3.2 create a data source

Remote data sources are commonly referred to as interfaces. You can obtain data and pass values.

Create a remote API. The name can be modified arbitrarily. The request address is the address of the interface to be obtained (see the document). The request method must be modified according to the corresponding interface.

Interface document address:YIDA platform interface (page data source can be called directly)

The two interfaces used in this case are:/v1/process/updateInstance.json /v1/process/getInstances.json

The prefix of the request address ishttps://www.aliwork.com/dingtalk/webThe middle APPxxx is the APP on the address bar of the current page,

The suffix is the corresponding interface. Examplehttps://www.aliwork.com/dingtalk/web/APP_X1X2X3X4/v1/process/startInstance.json

(1) create a getInstances.json interface (obtain data)

Add a remote API, modify the request address, request method, and add parameters.

For more information, see. (Where, formUuid is the corresponding form ID in the Application Settings> application data in the upper-right corner of the application homepage)

To process the obtained data in data processing, see the following code.

Data source

Reference Documentation

function didFetch(content) {
  console.log(content)
  let arr = []
  content.data.map((item => {
    let dataMap = item.data;
    dataMap.formUuid = item.formUuid;
    dataMap.formInstId = item.processInstanceId;
    arr.push(item.data)

  }))
  console.log(arr)
  return {
    "data": arr,
    "currentPage": content.currentPage,
    "totalCount": content.totalCount,

  }; // 重要，需返回 content

}

(2) create a updateInstance.json interface (modify data)

Create a remote API and modify the request address and method.

The request parameters are filled in the JS panel later. The request parameters here can be temporarily omitted.

Data source

Reference Documentation

(3) Create variables

Create two variables, click the table component, find the data source on the right, and click bind variable to bind getInstances.

Add variables

Bind variables

Note: the primary key of the data must also be modified to formInstId.

3.3 create an action

You can use action events to edit and save data.

Click the table component, select the action column, and click the action item in the action column to edit, delete, and add the action item.

Action column

Click edit and save edit to create an action.

Create action

Note: The display state is displayed in the edit state; The edit state is displayed in the save state.

Create actions separately

After the creation action is completed, a JS panel will pop up on the left. For more information, see the following code:

textField_kpqkt6yf is the unique identifier of the category component in flow chart. textField_kpqkt6ye is the unique identifier of the quantity component in flow chart.

export function onActionClick(rowData, action, table) {
  return table.editRow(rowData);
  console.log(rowData);
}

export function onActionClick1(rowData, action, table) {

  return table.saveRow(rowData).then((...args) => {
    console.log('rowData', rowData);
    console.log('args',args)
    console.log("args1", args[0]);
    let arr = []
    this.setState({
      dp2: args[0]
    });
    this.dataSourceMap.updata.load(
      {
        "processInstanceId": args[0].formInstId,
        "updateFormDataJson": JSON.stringify({
          "textField_kpqkt6yf": args[0].textField_kpqkt6yf,
          "textField_kpqkt6ye": args[0].textField_kpqkt6ye
        }
    )}).then((res) => {
      console.log("res",res)
    })
  });

}

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--------------------