Custom page submit form subform data

1. Case Background

In a specific scenario, we need to use the subform component of the custom page to fill in the data and submit the data to the subform component of the form for data storage.

2. Achieve results

💡ImplementationCustom page submit form subform data

3. Implementation steps

3.1 create a custom page

Path: Enter the created application> upper left corner of the page + sign> create custom page

Create a custom page

3.1.1 custom page component configuration

Custom page component configuration

3.2 Create form page

Path: Enter the created application> upper left corner of the page + sign> create a common form

Create form page

3.2.1 Form page component configuration

Form component configuration

3.3 custom page data source and JS panel configuration

3.3.1 data source configuration

Name: dp2

Auto load: Off

Request address:/dingtalk/web/Application coding/v1/form/saveFormData.json

Request method: POST

Custom page data source configuration

3.3.2 create button click action

Create button click action

Create button click action

3.3.3 JS panel configuration

JS panel configuration

Sample code:

Note: the corresponding unique identifier needs to be replaced.

  const a = this.$("明细组件唯一标识").getValue()
  console.log(a);
  
  let n=[];
  for(let i=0;i<a.length;i++)
  {
    n.push({
      表单页面单行文本1:a[i].输入框1,
      表单页面单行文本2:a[i].输入框2})
  }
  console.log(n);
  var judge = false;
  n.map(dd => {
    judge = (dd.表单页面单行文本1 != '' || dd.表单页面单行文本2 != '') ? true : false;
  })
  if (judge == true){
    const b = { 表单页面子表单组件唯一标识: n }
    const params = {
      formUuid: "表单页面表单id",
      appType: "应用编码",
      formDataJson: JSON.stringify(b)
    }
    this.dataSourceMap.dp2.load(params).then((response) => {
      this.utils.dialog({
        method: 'alert', // 或confirm
        title: '添加数据成功',
        onOk: () => { location.reload() }
      })
    })
  }else{
    this.utils.dialog({
      method: 'alert', // 或confirm
      title: '数据不允许为空',
      onOk: () => { location.reload() }
    })
  }

4. Effect demonstration

5. Try it online

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

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