How to Count views

Views/number of independent customers, etc. are all customer experience indicators and are used as self-operation of the organization.

YIDA will provide the overall official analysis report function for applications, pages, customers, processes, etc. in the future. Please look forward to it.

1. Usage scenarios

You can use custom pages to increase and count the number of views one by one.

2. Video Display

Updating, please look forward ~

3. Procedure

3.1 Step 1: Create forms and custom pages

Create a form and a custom page, which are the middle table of statistical quantity and the form to be counted 」.

3.1.1 create a statistical quantity intermediate table 」

Create a page that displays statistics. You can customize the components on the page as needed.

Procedure:

1. The Create form page is named "intermediate table of statistical quantity 」.
2. Drag and drop two single-line text components to the middle canvas, and modify the component names in the property bar on the right.
3. Click Save to create the form.

(The operation effect is shown in Figure 3.1-1)

Figure 3.1-1 statistical quantity intermediate table page

3.1.2 create a form to be counted 」

Stores data that accesses the statistical quantity intermediate table.

Procedure:

1. Create a custom page named form to be counted 」.
2. Drag and drop a table component to the middle canvas, and the components on the page can be customized as needed.
3. Click Save to create a custom page.

(The operation effect is shown in Figure 3.1-2)

Figure 3.1-2 the form page to be counted

3.2 Step 2: Configure forms and custom pages

3.2.1 call the add form instance interface on a custom page

You can call this operation to obtain the formInstId of the form and other related data.

Click to jump directly to the address of the API link required for the call:👉Add a form instance interface

Procedure:

1. Add a remote data source named searchFormDatas to the form to be counted.
2. Enter the request address in the edit data source dialog box.https://www.aliwork.com/dingtalk/web/此处填写您应用的AppType/v1/form/searchFormDatas.json.
3. Note: You need to turn off the auto load button in the edit data source (the shutdown status is gray) and the request method is GET.

(The operation method is shown in Figure 3.2-1)

Figure 3.2-1 data source configuration page

3.2.2 custom page calls the specified component value interface in the update form.

Update the relevant data of the form by calling the interface.

Click to jump directly to the address of the API link required for the call:👉Update the specified component value in the form

Procedure:

1. Add a remote data source named updateFormData to the form to be counted.
2. Enter the request address in the edit data source dialog box.https://www.aliwork.com/dingtalk/web/此处填写您应用的AppType/v1/form/updateFormData.json.
3. Note: You need to turn off the auto load button in the edit data source (the shutdown status is gray) and the request method is POST.

(The operation method is shown in Figure 3.2-2)

Figure 3.2-2 data source configuration page

3.2.3 bind lifecycle functions to custom pages

Procedure:

1. In the properties column on the right, select bind action add new action name didMount.
2. Click OK.

(The operation method is shown in Figure 3.2-3)

Figure 3.2-3 binding action

3. In the properties bar, select **on the right side of didMount, navigate to the current js code panel, and copy the following code directly.

(The operation method is shown in Figure 3.2-4)

Note: 1. formUuid is the formUuid of the intermediate table of statistics (you can customize the change form formUuid as needed).

2. textField_kvhrzijz is the unique identifier of the "custom page name" component corresponding to the statistical quantity intermediate table (you can customize the unique identifier of the replacement component as needed).

Figure 3.2-4 generation code configuration

export 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 somejson = {
    "textField_kvhrzijz" : "需要统计的表单"
  }
  //此处 textField_kvhrzijz 为统计数量中间表中对应的"自定义页面名称"组件唯一标识符；
  //此处"需要统计的表单"为 统计数量中间表 中提交时"自定义页面名称"对应的名称；
 
  const param ={
    "formUuid":"FORM-9T566BD1REZUKELN04GTL4O9SDAW2KQB8PHVKW7",
    "searchFieldJson" :JSON.stringify(somejson)
  }
  //formUuid为 统计数量中间表 的formUuid
  this.dataSourceMap['searchFormDatas'].load(param).then((res)=>{
    console.log("查看访问次数",res)
    res.data.map(item=>{
      const somejson2 = {
        "textField_kvhp8fjy": Number(item.formData.textField_kvhp8fjy)+ 1
      }
  //此处设置每次加载数据源次数增加一次
      const param_update = {
        "formInstId":item.formInstId,
        "updateFormDataJson": JSON.stringify(somejson2)
      }
      this.dataSourceMap['updateFormData'].load(param_update).then((res) => {
        this.utils.toast({
          title: '加载成功',
          type: 'success',
          size: 'large',
        });
      })
    })
  })
}

3.3 Step 3: Add data viewing effect

Procedure:

1. Select the Data Management page in the middle table of statistical quantities.
2. Click Add to enter the custom page name as the form to be counted.
3. Here, we need to set the count to 0, so that we can intuitively see the increased number of accesses.

(The operation method is shown in Figure 3.3-1)

Figure 3.3-1 add data

4. Achieve results

Click access, and right-click> Check. In the console, we can see that the number of visits increases every time you refresh.

(The operation method is shown in Figure 4-1)

Figure 4-1 effect demonstration

5. Try it online

To be added, please look forward...

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