The custom page table displays the main table and sub-table information.

1. Case Background

When the form contains both main table information and sub-table information, we want to display both main table information and sub-table information in the custom page table, which requires special data processing, at this time, we can refer to the following cases.

2. Achieve results

💡Implement custom page tables to display both primary table data and sub-table data

3. Implementation steps

3.1 create a data base table

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

Create a bottom table

Bottom table component configuration

3.2 create a custom page

Create a custom page

3.2.1 custom page component configuration

3.2.2 custom page table field configuration

Note: You can set field configurations based on the table content.

Title	Data Field	Data type	Group title
Single line text 1	danhang1	Text	/
Single line text 2	danhang2	Text	/
Single line text 11	danhang11	Text	Subform
Single line text 22	danhang22	Text	Subform

Custom page table field configuration method

3.2.3 custom page table configuration

Select table foldable/Tree Table

Enable tree

3.3 custom page data source configuration and binding

3.3.1 data source configuration

Name: dp2

Auto load: enabled

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

Request method: GET

Request parameters: Name: formUuid parameters:Bottom table form ID

Basic data source configuration

3.3.2 data processing configuration of data source

3.3.3 didFetch code configuration in functions

didFetch function code configuration

Sample code:

function didFetch(content) {
  const value = [];

  const data = content.data.map((item) => {
    var c=[]
    var d = item.formData.底表子表单组件唯一标识
    for (var i = 0; i < d.length; i++) {
    const a={
      danhang11: d[i].底表子表单那内单行文本3组件唯一标识,
      danhang22: d[i].底表子表单那内单行文本4组件唯一标识
    }
    c.push(a)
    }
    console.log(c);
    let arr = {

      danhang1: item.formData.底表单行文本1唯一标识,
      danhang2: item.formData.底表单行文本2唯一标识,
      children:c     
    }
    value.push(arr);
  }
  )

  let result = {

    "data": value,
    "currentPage": content.currentPage,
    "totalCount": content.totalCount
  }
  return result;
}

3.3.4 table binding data source

Select a table and click data source

Select the created data source and click OK

4. Try it online

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

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