Fill in the subform based on the content selected by the drop-down check component

1. Case Background

You can refer to the following example when you need to select multiple data and fill the contents of these multiple data into the subtable of the current form.

2. Achieve results

💡Fill in the subform based on the content selected by the drop-down Check

3. Implementation steps

3.1 create a bottom table

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

Create a bottom table

3.1.1 bottom table page component configuration

Note: The filter component needs to use single-line text or multiple-line text. Other components can be configured according to your needs.

Bottom table component configuration

3.2 create a drop-down check fill table

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

Create drop-down check fill form

3.2.1 drop-down check fill page component configuration

Note: in addition to the drop-down check, the components in the sub-table are configured according to their own requirements and the component type of the bottom table.

Drop-Down check fill page component configuration

3.2.2 The drop-down check component is associated with other form configurations.

The drop-down check component is associated with other form configurations.

3.3 drop-down check fill form data source and JS panel configuration

3.3.1 data source configuration

Name: dp2

Auto load: Off

Request address:/dingtalk/web/application encoding/v1/form/searchFormDatas.json

Request method: GET

Drop-Down check box to fill in the form data source configuration

3.3.2 drop-down check component creation value changes

Create an action

3.3.3 JS panel configuration

JS panel configuration

Code sample

var b = [];
  for(var i=0;i<value.length;i++)
  {
  

    var a = {"底表条件筛选组件唯一标识":value[i]}
    var params={
      formUuid:"底表表单表单ID",
      searchFieldJson:JSON.stringify(a)
    }
    this.dataSourceMap.dp2.load(params).then((response) => {
      for(var j=0;j<response.data.length;j++)
      {
      let c = {
        "当前表数值1组件唯一标识": parseInt(response.data[j].formData.底表数值1组件唯一标识) ,
        "当前表数值2组件唯一标识": parseInt(response.data[j].formData.底表数值2组件唯一标识)}
      // ↑↑注意：本句参数实例为数值组件，如有其他类型请参考字段数据格式文档 https://www.yuque.com/yida/support/aql605#yf5gg
      b.push(c)
      }
    })
   
  }
  var that=this;
  setTimeout(function () {
    console.log(b)
    that.$("当前表子表单唯一标识").setValue(b)
   
  }, 300);

Note: For more information about different component processing formats, see this document:YIDA platform interface (page data source can be called directly)

4. Effect display

Perform the following operations:

Operation 1: Display the bottom table data

Operation 2: Test the filling effect of the fill table

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