Use custom connectors to solve cross-domain problems

The use of the functions involved in this document requires a certain development basis.

1. Function introduction

This article mainly introduces the adoptionCustom connectorCompleteCall the external data source interface on the YIDA pageIf you directly call an external data source without using a custom connector, a cross-domain error will be reported. The custom connector can avoid this error and solve the cross-domain, authentication and other issues.

Previously	Now
Figure 1.1-1 Comparison of data source panels

2. Use scenario

This document implementsWhen the user switches the drop-down option to control the sending of SMS messagesIn this example, the custom connector is combined with the data source function. For everyone to tellHow to use connectors through custom connections to solve cross-domain and authentication problems encountered when calling external data sources on YIDA pages.

3. Procedure

3.1 Step 1: Create a custom page

Procedure:

1. Create a custom page named send SMS 」.
2. Add a single-line text component named SMS content, which is required. Use to fill in the notification content that you need to send by SMS. (The operation is shown in Figure 3.1-1)

Figure 3.1-1 add and configure input box components

3. Add a drop-down radio component named "select mobile phone number". Set the component option to the mobile phone number you want to receive SMS notifications and set it to required. Used to select the mobile phone number where you receive notifications. (The operation is shown in Figure 3.1-2)

Figure 3.1-2 add and configure the drop-down radio component

4. Click save in the upper-right corner of the page 」.

3.2 Step 2: Create a custom connector

Further reading:For more information about YIDA connectors, go to the following steps:Integration & Automation

Procedure:InConnector factoryAccordingHow to create a custom connectorTo create a custom connector, follow these steps.

3.3 Step 3: Create a data source on the custom page

Procedure:

1. Send SMS custom page> data source panel> Add> connector. (The operation is shown in Figure 3.3-1)

Figure 3.3-1 add connector data source

2. Enter name> select connector> enter data source configuration items> select connector execution action> enter connector execution action parameters. (The operation is shown in Figure 3.3-2)

Figure 3.3-2 configure connector data source-basic configuration

Instructions

1. When you select a connector, you can select DingTalk official connector or YIDA custom connector. This example is a custom send SMS connector.
2. DingTalk the official connector does not need authentication. Whether the custom connector needs authentication depends on whether the connector itself has added authentication capability.
3. Once the connector and execution actions are selected, the system will automatically explain the output parameters and input parameters. You can directly fill in the parameter default values or bind variables. In this case, the default value is bound, and the input parameter call is modified in the following event. In this case, the input parameter has two fields, namely, the mobile data format is string, and the content data format is also string. Enter the default value.

3. Action Settings> Create action> onChange value changes> OK (as shown in Figure 3.3-3)

Figure 3.3-3 shows the binding action of the drop-down radio component.

4. Fill in the following codeonChange()Function. (Operation is shown in Figure 3.3-4)

Figure 3.3-4 code required for binding the drop-down radio component

Special reminder:

1. Note when using the following codeData Source NameReplacement,The name of the data source in the code should be the same as that of the data source you created.. Otherwise, an error occurs when the data source cannot be found.
2. The part of the code that involves the unique identifier of the component should beNote the replacement of the unique component identifier.Otherwise, the data you entered cannot be obtained because the component cannot be queried.

//图3.3-4 所示代码，在进行使用时应注意数据源名称与组件唯一标识的替换！
/**
* selectField onChange
* @param value: {mixed} 选中的值
* @param actionType: {String} 触发的方式, 'itemClick', 'enter', 'change'
* @param item: {mixed} 选中的值的对象数据
*/
export function onChange({ value, actionType, item }) {
  console.log('onChange', value);
  //------------以下为这个例子新增的代码-------------
  const dataSource = this.dataSourceMap['sendSMS'];
  // 数据源的fetchOption是指完整的请求体，包含data，method，url等信息。
  // 其中，sendSMS为数据源名称，使用时应与您创建的连接器数据源名称保持一致！！！
  const fetchOption = dataSource['fetchOptions'];

  if (fetchOption) {
    // 1. 这里取到了入参
    const fetchInputs = fetchOption['data']['inputs'];
    // 2. 获取电话号码
    //其中，selectField_kywncwnm 为页面下拉单选组件的唯一标识，请注意替换！
    var telMobile = this.$('selectField_kywncwnm').getValue();
    // 3. 获取短信内容
    //其中，textField_kywncwns 为页面输入框组件的唯一标识，请注意替换！
    var smsContent = this.$('textField_kywncwns').getValue();
    // 4. 开始修改数据源入参
    var inputsObj = JSON.parse(fetchInputs);
    inputsObj['Query'] = { "mobile": telMobile, "content": smsContent };
    console.log("inputs:" + JSON.stringify(inputsObj));
    // 5. 开始调用数据源
    return dataSource.load({
      //这里的inputs会覆盖数据源里定义的inputs
      inputs: JSON.stringify(inputsObj),
    }).then((content) => {
      console.log('after send:' + content);
    });
  }
  else {
    console.log("no fetchOption found");
  }
}

3.4 Step 4: Fill in the form data

After the data is filled in, the connector is triggered to send a text message when the option of the drop-down radio component is switched. (The operation is shown in Figure 3.4-1)

Figure 3.4-1 fill in form data

4. Effect demonstration

Figure 4.1-1 effect demonstration

5. Appendix

The typical structure of fetchOptions is given below for reference. (As shown in Figure 5.1-1)

Figure 5.1-1 typical structure of fetchOptions