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

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

能力免费版轻享版专业版专属版自定义页面不支持不支持支持支持未升级到新版信息架构的组织，请 点此查看 使用手册1. 操作步骤在应用管理界面，提供了两个创建自定义页面的入口1.1 通过【新建页面】下拉菜单创建左上角新建页面，在下拉菜单中选择【新建自定义页面(Beta)】，开始创建新建自定义页面1....

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