How do I implement one-click direct dialing in YIDA reports?

1. Usage scenarios

Scenario 1:

The table component on the report page contains the mobile phone number information of the person. When viewing the data on the report page, you need to click the corresponding mobile phone number to realize one-click dialing.

Scenario 2:

Click the button on the data details page to realize one-click dialing

2. Procedure

Scenario 1: click the mobile phone number in the table to dial

(1) add the column field corresponding to the mobile phone number to the table component on the report page

Report editing page

(2) create a custom page and configure the following code snippet in the page didMount() function

export function didMount() {
  //读取参数数据源中链接附带的name为tel的数据，并拼接为一串字符串。
  const tel = 'tel://' + this.state.urlParams.tel;
  //拨号
  window.location.href = tel;
}

JS panel for custom pages

(3) copy the access link of the custom page

Share settings

(4) return to the form designer on the report page and configure the jump link for the column field corresponding to the mobile phone number.

In-Report field settings

Scenario 2: Click the button on the data details page to achieve one-click dialing

(1) copy a button component from the custom page to the form (flow chart) page and place the button component in the appropriate position

(2) configure the click event of the button component in the form designer and copy the following code to the onClick function

export function onClick(){
  const tel = 'tel://' + this.$('手机号输入组件的fieldId').getValue()
  //拨号
  window.location.href = tel;
}

(3) at this time, the button component will also be displayed on the submit page. You can group components on the outer layer of the button component, you can set the grouping component style to control the display and hiding status of button components on the details page or submit page (this step is not required)

3. Precautions

3.1 click the mobile phone number from the report to jump to the custom page and attach the mobile phone number parameter to the url of the custom page.

3.2 when the custom page is loaded, the didMount function is triggered to execute the internal code snippet.

3.3 code snippet execution content: obtain the phone number parameter of url splicing, and execute window.location.href to realize dialing

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