Custom connector-obtain DingTalk intelligent personnel roster information

1. Usage scenarios

This case realizes the intercommunication between YIDA and DingTalk intelligent personnel, and can be used in business scenarios where information about a personnel register in an enterprise is queried on YIDA.

2. Procedure

2.1 configure connectors

2.1.1 create a new connector

Step: Go to YIDA platform management> connector factory> Create a connector> HTTP connector> set the connector display name

2.1.2 view the API for obtaining the roster

Open in DingTalk find in documentObtain the field information of the employee registerAPI;

2.1.3 configure connectors

Fill in the basic information of the connector according to the API, and then select the authentication type;

2.1.4 select authentication

Authentication Type selectionDingTalk open platform verification, and click next;

2.1.5 add operator

Click Add, enter the name in the basic information, enter the DingTalk information according to the API in the Request open platform, and then click save;

2.2 add authentication

2.2.1 obtain authentication

LoginDingTalk developer background, click enterprise internal development under application development:

If an application already exists, click apply to obtain application information;

If there is no application, create a micro-application. After completing the information, click OK to create it. The application information will appear.

2.2.2 add authentication

Step: YIDA platform management> connector factory> edit the created connector> perform actions> test> select an account> add an account

Enter authentication information

After clicking add account, in the pop-up account window, enter the DingTalk and App Key in the application information obtained by the developer in the AppSecret console into the corresponding column, and click OK.

2.3 call a custom connector on the page

2.3.1 create a data source

Create a data source on the form page. For more information, see:Custom page calls external interfaces;

2.3.2 component configuration events

Bind the member component to an event where the value of OnChange changes. Assign the following code to the event.

The code is as follows:

 export function onChange({ value }) {
  console.log('onChange', value);
  const serviceInfo = JSON.stringify(
    {
      "connectorInfo": {
        "connectorId": "Http_7f978c634cad42b9affd8a6b97e45c05", // 连接器唯一id
        "actionId": "operation-1", // 动作id
        "type": "httpConnector", // 自定义连接器类型，固定写为httpConnector
        "connection": "3930" // 鉴权模版id
      }
    }
  );
  const inputs = JSON.stringify(
    {
      /* "path": {
        "id": 1
      }, */
      "query": {
        "userid_list": value.value,
        "agentid": "1"
      },
      /*  "header": {
         "content-type": "application/json"(根据三方服务的要求填写, 可能的值还有 application / x - www - form - urlencoded、multipart / form - data等等)
       },
       "body": {
         "desc": "test"
       } */
    }
  );

  this.dataSourceMap.dp2.load({ serviceInfo: serviceInfo, inputs: inputs }).then((res) => {
    console.log("res", res);
    let data = res.serviceReturnValue.result[0].field_data_list;
    data.map((item) => {
      ;
      // console.log(item);
      if (item.field_name == "手机号") {
        this.$("textField_kxsd8e8k").setValue(item.field_value_list[0].value);//对应组件绑定数据
      } else if (item.field_name == "部门") {
        this.$("textField_kxsd8e8m").setValue(item.field_value_list[0].value);
      };
    });
  });
}

3. Effect display

Visit the form submission page, press the keyboard F12 or right-click Check to open the console, select a member from the action member component, and trigger the event. The console returns data. The effect is as follows:

##> authenticate now ##<

##> training consultation ###<

>>> product consultation >><

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