Cross-application data linkage for sub-tables

1. Usage scenarios

When subforms are linked across application data, use the search function to filter data and display it in the drop-down radio component.

2. Video Display

Updating, please look forward ~

3. Implementation steps

3.1 Step 1: Create two applications

Application A as A cross-application form;

Use B as a data linkage table;

3.1.1 build cross-application forms

(1) Create application A and name the new form "product data table" as A cross-application form

Procedure:

1. Create application A.
2. Create A common form page in application A and name it "product data table 」.

3. Add two single-line text components to the product data table and name them "product number" and "product name" respectively ".

(The operation effect is shown in Figure 3.1-1)

Figure 3.1-1 build a cross-application form

(2) input data

Enter test data for backup

Figure 3.1.1-2 data management

3.1.2 build cross-form data linkage forms

(1) create application B and create a form named cross-application data linkage-fuzzy search 」

Procedure:

1. Create application B.
2. Create a common form in application B named cross-application data linkage-fuzzy search 」.

3. Add a subform component to the cross-application data linkage-fuzzy search form and name the subform cross-data linkage ".
4. Add a drop-down radio component and a single-line text component to the subform cross-data linkage to name "product number" and "product name" respectively ".

(The operation effect is shown in Figure 3.1-2)

Figure 3.1-2 build a data linkage form

3.2 Step 2: Obtain data

In the cross-application data linkage-fuzzy search form of application B, the data in application A is obtained by calling the remote data source, after processing, assign the value to the drop-down radio component in the subform for display.

3.2.1 create data sources and configure interfaces

For more information about the interfaces to be called here, see:"Search for instance details based on criteria" interface document

Procedure:

1. Click the data source button on the right side of the page when the cross-application data linkage-fuzzy search form is edited.
2. Click the "add" button and select "quickly create remote data source".

3. Set the data source name, request address, and parameters as shown in Figure 3.2-1.

Parameter description:

1. formUuid: The Form ID of the cross-application data form,
2. pageSize: the data volume is obtained for each page. The parameter value is set to 100 because the drop-down option can only display 100 pieces of data.

Figure 3.2-1 create and configure a remote data source

3.2.2 processing data

Process the data obtained by the above interface into a data format that conforms to the drop-down radio component.

You need to use the product code component data in the form named "product data sheet" in Application A, as the data source of the "cross-application data linkage-fuzzy search" form "product code" drop-down radio component option in application B, to display the data of another component named "product name" in the form.

Procedure:

1. Click "+" in the data source editing page-data processing shown in Figure 3.2-1, and select the "request completion callback function (didFetch)" option.
2. Copy the following code to the page.

(The operation effect is shown in Figure 3.2-2)

Figure 3.2-2 data processing

The reference code is as follows:

//数据处理函数
function didFetch(content) {
  // content.b = 1; 修改返回数据结构中的 b 字段为1
  const arr =[];
  const data = content.data.map((item) => {
    let value = {
      label: item.formData.textField_5bj3md2, 
      //"textField_5bj3md2"为'产品编码'组件唯一标识,应替换为您搭建的表单内该组件的唯一标识
      text: item.formData.textField_5bj3md2,  
      //同上
      value: item.formData.textField_5bj3md2, 
      //同上
      name: item.formData.textField_o8tqkuc   
      //"textField_o8tqkuc"为'产品名称'组件唯一标识,应替换为您搭建的表单内该组件的唯一标识
    }
    arr.push(value);
    console.log("arr", arr)
  })
  return arr; // 重要，需返回 content
}

3.3 Step 3: assign a value to the drop-down radio component named "product code" in the subtable

3.3.1 assign values when the page is loaded

In the lifecycle didmount function, the data of the product code component in application A is assigned to the product code component in application B as A search condition for triggering data linkage.

Operation method:

1. For more information, see:https://www.yuque.com/yida/subject/rzuofg
2. Please copy the following code in the code section.

(The operation effect is shown in Figure 3.3-1)

Figure 3.3-1 assign values to the drop-down radio component when the page is loaded

The reference code is as follows:

export function didMount() {
  console.log(`「页面 JS」：当前页面地址 ${location.href}`);
  // console.log(`「页面 JS」：当前页面 id 参数为 ${this.state.urlParams.id}`);
  // 更多 this 相关 API 请参考：https://www.yuque.com/yida/support/ocmxyv#OCEXd
  // document.title = window.loginUser.userName + ' | 宜搭';
  this.dataSourceMap["远程数据源名称"].load().then(res => {
    const tableField = this.$('子表单唯一标识');
    const data = tableField.getItems()[tableField.getItems().length - 1]
    console.log(data)
    tableField.setComponentProps(data, '下拉单选组件唯一标识', { dataSource: res });
  })
}

3.3.2 assign values when adding a row to a subform

Add a subform component named"onAddClick"Event" to automatically assign the option value to the drop-down radio when clicking the "add item" button of the subform.

Operation method:

1. For more information, see:https://www.yuque.com/yida/subject/rzuofg

(The operation effect is shown in Figure 3.3-2)

Figure 3.3-2 assign values to the drop-down radio when clicking the "add item" button in the subform

3.4 Step 4: filter data through the search function

When there is too much data, the drop-down radio component can only display 100 pieces of data. In this case, we can use the search function to filter data in cross-application forms and display it to the drop-down radio.

Instructions

1. Implementation idea: when entering data in the drop-down radio component, load the data source as a searchFieldJson parameter, search for the corresponding data, and reassign the data to the drop-down radio component.
2. The data search method depends on the search method of components in the cross-application data form. In this case, the "product code" component in the cross-application data form is a single line of text, so fuzzy search can be performed.

3.4.1 Open the search button of the drop-down radio component

Procedure:

1. Click the drop-down radio component named "product number" in the sub-form.
2. Click the "search" switch in the property bar on the right to turn it on. (Green on)

(The operation effect is shown in Figure 3.4-1)

Figure 3.4-1 open the drop-down radio component to search

3.4.2 add and configure search events for drop-down radio components

Add a search action event to obtain the value keyword entered in the drop-down radio.

Procedure:

1. Click the drop-down radio component named "product number" in the sub-form.
2. In the advanced configuration column on the right, find action settings and add an event named onSearch.

3. Copy the following code.

(The operation effect is shown in Figure 3.4-2)

Figure 3.4-2 add and configure search events

The reference code is as follows:

//添加并配置搜索事件代码如下，复制时需注意组件唯一标识的替换！
export function onSearch(keyword) {
  console.log('onSearch', keyword);
  // 注：需开启“可搜索”
  // 如果 Select 需要调用远程接口搜索，请将下方的 selectOptions 改为实际的数据源名称
  const searchKey = {
    "textField_5bj3md2": keyword  
    //特别注意：
    //textField_5bj3md2为「跨应用数据联动-可模糊搜索」表单中"产品编码"组件的唯一标识，
    //在使用代码时应将此处替换为您搭建的表单对应组件的唯一标识
  }
  
  //配置新参数params
  const params = {
    formUuid: "FORM-0P966T61XUNUK95JWZQ7BM4VRCFS1QE2YR0VK1",
    searchFieldJson: JSON.stringify(searchKey),
    pageSize: 100
  }
  const arr = [];
  return this.dataSourceMap['getDatas'].load(params).then((res) => {
    console.log("res=>", res)
    const tableField = this.$('当前表单子表唯一标识');
    const data = tableField.getItems()[tableField.getItems().length - 1]
    console.log(data)
    tableField.setComponentProps(data, '当前表单子表中下拉单选唯一标识', { dataSource: res });
  })
  
}

3.5 step 5: implement data linkage

3.5.1 drop-down radio component configuration onChange events

After assigning the "product coding" component in application form A to the drop-down radio component in application B, you need to trigger data linkage by selecting the "product coding" drop-down radio component in application B, match the corresponding value and assign it 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.

Procedure:

1. Click the drop-down radio component named "product code.
2. Add an action named "onChange" in the advanced configuration column-action settings-onChange value changes on the right.

(The operation effect is shown in Figure 3.5-1)

Figure 3.5-1 create a onChange event for the drop-down radio component

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

After obtaining the value of the drop-down radio by using the drop-down radio onChange event, configure the obtained value as the searchFieldJson parameter to load the data source and search for the corresponding data, assign the name in the eligible data to the product name component.

Procedure:

1. Click the '<>' button on the right side of the onChange event.
2. Copy the following code to the displayed page dialog box.

(The operation effect is shown in Figure 3.5-2)

Figure 3.5-2 data linkage

The reference code is as follows:

//onChange事件代码，在复制时注意进行唯一标识的替换！
export function onChange({ value, actionType, item }) {
  console.log('onChange', value);
  const searchKey = {
    "textField_5bj3md2": value
    //特别注意：
    //textField_5bj3md2为"产品编码"组件的唯一标识
    //在使用该代码时应使用您所搭建的对应表单内该组件的唯一标识进行替换。
  }
  const params = {
    formUuid: "FORM-0P966T61XUNUK95JWZQ7BM4VRCFS1QE2YR0VK1",
    searchFieldJson: JSON.stringify(searchKey),
    pageSize: 100
  }
  this.dataSourceMap['getDatas'].load(params).then(res => {
    console.log("res", res[0].name);
    this.$('当前应用产品名称组件唯一标识').setValue(res[0].name);
  })
}

4. Achieve results

The search function is implemented as follows:

The data linkage effect is as follows:

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

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