How to implement cross-application data linkage?

1. Usage scenarios

When we need to link out other form data, we can use the filling function of the associated form or the data linkage after associating other forms, how can we achieve cross-application data linkage when we need to link the data of forms in other applications? You can view the following cases.

2. Video Display

此处为语雀视频卡片，点击链接查看：0721 跨应用数据联动.mov

3. Implementation steps

3.1 create two applications, one as a cross-application form and the other as a data linkage table

3.1.1 cross-application forms

(1) create application A and create A cross-application form

Create an application; Create a group and common form in the application. Add component drop-down Radio, single line text, and date components to the form, as shown in the following figure:

Cross-application form

(2) add data

Data management

3.1.2 implement cross-form data linkage form

(1) create application B and create a configuration data linkage table

Create an application; Create a group and common form in the application. Add component drop-down Radio, single line text, and date components to the form, as shown in the following figure:

Data linkage form

3.2 obtain data

Use the data source to obtain data, edit the data linkage table of Application B, and use the page data source interface to obtain data. Add a remote data source to the data source and call the search form instance details List interface based on criteria

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

Add data source on the form page

3.3 assign a value to the association condition drop-down radio component in didmount as the Association condition

Assign the association condition component in application A to the drop-down radio component in current application B as the search condition for triggering data linkage.

For more information about the drop-down radio assignment method, see:https://www.yuque.com/yida/subject/mei4lg

The reference code is as follows:

export function didMount() {
  
  const value = [];
  const data = state.getDatas.data.map((item) => {
    let arr = {
      label: item.formData.textField_krabnsvv,
      text: item.formData.textField_krabnsvv,
      value: item.formData.textField_krabnsvv,
    }
    value.push(arr);
  })
  this.$('selectField_krac0efo').set("dataSource", value)
}

3.4 implement data linkage

3.4.1 drop-down radio component configuration onChange events

After the association condition is assigned to the drop-down Radio, the data linkage is triggered by the drop-down radio, and the corresponding value is matched and assigned to other components. In this case, you need to configure the onchange event on the drop-down radio component and trigger the linkage in the event.

Create an action on the form page

3.4.2 obtain the corresponding data based on the drop-down radio value and assign it to other components

After you use the drop-down radio onChange event to obtain the value of the drop-down radio, you need to match the corresponding data in a loop in the data source, when the value of the drop-down selection is equal to the associated condition value of a piece of data returned by the data source, the piece of data is matched. After the match is successful, the piece of data is put into the array, after the loop ends, the return value of the data is assigned to the corresponding component.

The reference code is as follows:

export function onChange({value, actionType, item}) {
  console.log('onChange', value); //获取下拉单选值
  this.dataSourceMap['getDatas'].load().then(res=>{  //加载数据源
    console.log(res);
    
    const arr = [];
    res.data.map((response) => {  //使用map循环数据
      if (value === response.formData.textField_krabnsvv){  
        arr.push(response);  //匹配当下拉单选值等于返回数据中关联条件值时，将该条数据push到数组中
      }
    })
    console.log("arr", arr) 
    //筛选出的数据在数组的第一个，因此使用arr[0]获取，并对应将formdata中的值赋值给对应组件
    this.$('dateField_krac0efp').setValue(arr[0].formData.dateField_krabnsvz); 
    this.$('textField_krac0efn').setValue(arr[0].formData.textField_krabnsvx);

  })
}

4. Achieve results

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 here to fill in the questionnaire

-------------------- Welcome to follow US--------------------