Obtain data sources in the form and assign values to the drop-down radio component

This case is from Jing, a three-party developer 」

JS 动作面板 - 前端代码开放 | 钉钉宜搭·帮助中心

能力免费版轻享版专业版专属版页面JS代码不支持不支持支持支持1. 功能概述用户可以通过宜搭中的「动作面板」去写 JS 代码，从而实现自己的业务逻辑或逻辑判断。通过动作面板，您可以「更加方便的组织和复用代码」、「实现复杂交互」。JS 面板注意：通过JS面板编写的逻辑一般情况下是不会对历史数据生效...

https://docs.aliwork.com/docs/yida_support/lbtl0t/ocmxyv

1. Usage scenarios

When we use a third-party interface to obtain data, we want to process the obtained data into the option value of the drop-down radio component, select and submit the data.

2. Implement functions

2.1. Configure product tables

2.2. Configure custom pages

2.3. Add a remote data source to the data source

Reference documents:Search form instance details by criteria

Request address:

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

The interface configuration is as follows:

2.4. Obtain product table data

// 获取产品表数据
export function fetchData() {
  return this.dataSourceMap.getData.load({
    formUuid: 'FORM-DX966R61OJZA5Q4Z8FSEZAKO6JYN31TAIOZHL06',
    pageSize: 100
  }).then(res => {
    const { data = [] } = res;
    return data;
  }).catch(error => {
    this.utils.toast({
      title: error.message,
      type: 'error'
    });
    return [];
  });
}

2.5. Drop-down option Data processing

// 下拉选项处理(包含单选、复选)
export function selectOptions(data, fieldId) {
  const selectOptions = data.map(item => {
    return {
      text: item.formData[fieldId.substring(0, fieldId.length)],
      value: item.formData[fieldId.substring(0, fieldId.length)]
    }
  });
  return _.uniqBy(selectOptions, 'value');
}

2.6. Application

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export async 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 + ' | 宜搭';
  const loading = this.utils.toast({
    title: '数据获取中...',
    type: 'loading'
  });
  const result = await this.fetchData();
  this.$('selectField_lbfxqbi2').set('dataSource', this.selectOptions(result, 'textField_lbfxohtz'));
  this.$('multiSelectField_lbfxqbi4').set('dataSource', this.selectOptions(result, 'textField_lbfxohtz'));
  this.$('radioField_lbfxqbi5').set('dataSource', this.selectOptions(result, 'textField_lbfxohtz'));
  this.$('checkboxField_lbfxqbi3').set('dataSource', this.selectOptions(result, 'textField_lbfxohtz'));
  loading();
}

3. Achieve results

4. Try it online

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

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

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