Custom page drop-down select real-time search form data (anti-shake application instance)

创建自定义页面 | 钉钉宜搭·帮助中心

本文详细介绍了如何在应用管理界面创建和设置自定义页面的操作步骤，包括通过不同入口创建页面、设置页面属性以及使用页面设计器等内容。

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

1. Usage scenarios

This example describes how to use anti-shake to select real-time search form data in the YIDA custom page.

Document Source:Anti-shake Debounce

2. Principle

Execute the callback function n seconds after the event is triggered. If the event is re-triggered within n seconds, the time is re-timed. The result is that frequently triggered events are merged once and executed at the end.

For example:

The elevator will close and start to operate after 5 seconds. If someone comes in, wait for 5 seconds, someone will come in within 5 seconds, and wait for 5 seconds to re-time... until more than 5 seconds, the elevator will not start to operate.

3. Implement functions

3.1. Configure drop-down select data base table

Select the association option from the drop-down list of the custom page.

3.2. Custom page configuration

3.2.1. Page configuration

3.2.2. Configure a data source to obtain form data

Request address:

`/${window.pageConfig.appType || window.g_config.appKey}/v1/form/searchFormDatas.json`

3.2.3. Configure variables

名称：selectDataSource
描述：下拉选择选项
数据：[]

名称：debounceTimer
描述：
数据：null

3.3. Page function configuration

3.3.1. Configure the Get drop-down selection option function

Note modify the form formUuid and field unique identifier as needed.

/**
* 获取下拉选择选项
* @param searchKey: {String} 实时查询参数
* @param uniqValue: {Boolean} 选项是否去重
*/
export function getSelectDataSource(searchKey = '', uniqValue = true) {
  this.dataSourceMap.getData.load({
    formUuid: 'FORM-6F889E5B2C79445880289736CFEFAA80QV8I',
    pageSize: 100,
    searchFieldJson: JSON.stringify({
      textField_lahnv890: searchKey,
    }),
  }).then((res) => {
    const { data = [] } = res;
    const selectDataSource = data.map((item) => {
      const { formData = {} } = item;
      return {
        text: formData.textField_lahnv890,
        value: formData.textField_lahnv890,
      };
    });
    this.setState({
      selectDataSource: uniqValue ? _.uniqBy(selectDataSource, 'value') : selectDataSource,
    });
  }).catch(({ message }) => {
    this.utils.toast({
      title: message,
      type: 'error',
    });
  });
}

3.3.2. Select OnSearch search action from the configuration drop-down list.

Bind the following functions:

/**
* selectField onSearch
* @param value: {String} 数据
*/
export function onSearch(keyword) {
  if (this.state.debounceTimer) {
    clearTimeout(this.state.debounceTimer);
  };
  // 注意防抖，防抖案例：https://www.aliwork.com/o/coc?tplUuid=TPL_EV117QZ9KD6EK0334JNU&from=yuque_subject
  const debounceTimer = setTimeout(() => {
    this.getSelectDataSource(keyword);
    this.setState({
      debounceTimer: null,
    });
  }, 300);
  this.setState({
    debounceTimer,
  });
}

3.3.3. Drop-down select binding options

4. Effect

5. Try it online

示例中心 | 开发者赋能平台

AI智能体时代，全新宜搭。业务创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_ZQNUZNB9IGHKHCDZKX2Y&from=yuque_subject