Code assignment trigger or data linkage of default options

1. What is data linkage

When the data of a field in a form changes, the data of another field in the form changes accordingly;

Two tables are required for data linkage. One is this form and the other is an associated form. The data of this form will be changed according to the data of the associated form.

Form editing page

Configure Data Linkage

2. Use scenario

For example, there are two forms, table A and Table B;

Table A is the student information table, which records the basic information including the student name; Table B is the class table of the school, and records the class name of the student, the student name setting is associated with other form data and directly calls the student name entered in Table A.

• You can refer to our IT asset management application template. There are many forms with data linkage, as shown in the following figure:

Data Linkage

3. Use code to trigger data linkage

3.1 edit code path and format

Write in the JS page on the left of the form editor. In the Page Settings, select bind didMount function when the page is loaded, or add the code to the existing didMount, so that the code can be updated in the form editing state.

Path:Form> Page Settings> Properties> lifecycle> when the page is loaded, as shown in the following figure:

JS panel

(1) description of the components involved in the code

「textField_kk7gjw3x": the unique identifier of the text component.

The default value is empty. In the editing state after the initial submission, the code automatically replaces the instance ID that has been generated in the background, that is, formInstId, into this component, it can be used to jump back to the details page of this piece of data after other forms associate or obtain this component value;

「dateField_kkcupbxd」: the unique identifier of the time component.

The default value is now(), which takes the current date when the form is generated. In the editing State, the code automatically updates and replaces the current time;

「textField_dsiych8」: Other components are linked to this form according to the value of this component. For example, "textField_fz1ucdv" is the contract number. Other components, according to the value of "textField_fz1ucdv, find the corresponding contract number in another contract form, so as to bring out the contract signing time (date component), customer name and other information in this form;

(2) code format (can be copied directly)

/*更新时间ormInstId与联动绑定*/
export function didMount() {
  const formInstId = this.state.urlParams.formInstId; /定义formInstId/
  const instanceData = this.utils.getFormInstanceData();
  const { flowData = {} } = instanceData;
  const { editMode, viewMode } = flowData;     /*定义状态为编辑或查看*/
  const nowadays = new Date();     /*定义nowadays为当前时间*/
  if (viewMode === false && editMode === true) {
    /限定条件，只有在编辑状态下才执行此代码，查看时不执行/
    this.$('textField_kk7gjw3x').setValue(formInstId);     /*将表单实例填入指定文本组件中*/
    this.$('dateField_kkcupbxd').setValue(nowadays.toJSON());     /*将当前日期更新到指定日期组件中*/
    this.$('textField_dsiych8').getProps().onChange({ value: 'xxx' });     /*通过代码模拟手动更新值后产生的联动更新效果*/
    this.utils.toast({      /*若上面代码全部执行成功，则弹窗已更新，用于检查是否代码成功执行*/
      title: '已更新',
      type: 'success'
    })
  }
} 

4. The final presentation effect of the form linked with the default data

4.1 Specific operation steps

(1) create two forms, form 1 and form 2;

(2) set data linkage in Form 2. When the product name is equal to the product name, the unit price is equal to the price;

Form configuration data linkage

(3) first submit a data mouse in Form 1, then enter the mouse filled in the form in Form 2, then the following price will be automatically brought out;

Submit form data

4.2 The types of components that can operate data linkage are as follows:

5. Try it online

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

6. FAQ

6.1 after using data linkage, when submitting the form, the message "Get Data exception" is Prompted. What is the situation?

You need to check whether the field in the set data linkage condition is in the non-participating search field. If so, you need to add it to the available search field, in this way, there is no problem in submitting data.

For more information about code assignment triggering data linkage of default values or options in version 2.0, see the link below.

Version 2.0 code assignment triggers data linkage of default values or options

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

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