DingTalk JS-API

DingTalk provides rich JSAPI capabilities, such as native popups, device information, scanning capabilities, etc. Yida developers can use the native API capabilities provided by DingTalk to provide a better user experience.

• DingTalk JSAPI Function List;
• DingTalk Developer's Essential Reading.

caution

When calling DingTalk JS-API, please pay attention to the following:

• In Yida applications, window.dd is not guaranteed to exist (currently only the mobile version will import an older version of resources), so it is recommended that users manually import it;
• In Yida applications, even without configuring dd.config for JSAPI authentication operations, APIs that require authentication can still be called. Please use caution when calling;
• When calling JSAPI, the required corpId parameter can be obtained from const { corpId } = window.pageConfig || {};;

Usage Guide

Step 1: Asynchronously load DingTalk JSAPI resources

Since Yida pages do not guarantee that window.dd will always exist, users need to manually load DingTalk's JSAPI script in the page's didMount lifecycle for safety, as shown below:

The implementation code is shown below:

export function didMount() {
  this.utils.loadScript('https://g.alicdn.com/dingding/dingtalk-jsapi/3.0.25/dingtalk.open.js');
}

After the resources are loaded, you can call the relevant functions in JSAPI through window.dd.

Step 2: Call DingTalk JSAPI

After DingTalk's JSAPI is loaded, we can call DingTalk's APIs in the action panel through window.dd to perform corresponding operations, as shown below:

export function isDingTalk() {
  return window.navigator && /dingtalk/i.test(window.navigator.userAgent)
}

export function dingAlert() {
  if (window.dd && this.isDingTalk()) {
    window.dd.device.notification.alert({
      message: "Test",
      title: "Prompt",// Can be empty
      buttonName: "Received",
      onSuccess: function () {
      },
      onFail: function (err) { }
    });
  }
}

The display effect in the DingTalk app is shown below:

caution

Since many DingTalk JSAPIs must be called within the app, when calling DingTalk JSAPI, you need to first check if you are within the DingTalk app. The check code is shown below:

export function isDingTalk() {
  return window.navigator && /dingtalk/i.test(window.navigator.userAgent)
}

API List

The list of supported APIs can be found in the DingTalk Open Platform Documentation.