Integration & Automation-data integration with intelligent form filling
Note:
- Currently, only user-created form filling templates can be obtained.
- The queried employee should fill in the intelligent form.
1. Usage scenarios
As a basic application provided by DingTalk, smart fill-in is suitable for scenarios such as Questionnaire Survey and registration statistics, and supports data statistics and download. In this case, you can use the submit form trigger connector to query the template information created by an employee in the smart fill-in form.
2. Procedure
2.1 Step 1: Create an intelligent form template query form
Used to trigger the connector to query.
Procedure:
- Create a new form named intelligent form filling template query 」.
- Add a member component, named template creator, and set it to required. (The operation is shown in Figure 2.1-1)
Figure 2.1-1 add and configure member components
- Add drop-down radio components, and add display values as general fill-in 」, the option value is 0 and the display value is 1. Set to required. (The operation is shown in Figure 2.1-2)
Figure 2.1-2 add and configure the drop-down radio component
- Click save in the upper-right corner of the page.
2.2 Step 2: Create a query result record form
It is used to receive the results returned by the connector and display them after data processing.
Procedure:
- Create a form named query result record 」.
- Add a multi-line text component named return result and set the status to hidden 」. (The operation is shown in Figure 2.2-1)
Figure 2.2-1 add and configure multi-line text components
- Add a subform named query result record, and add 10 single-line text components to the subform component named "fill code", "fill name 」," Form filling prompt "," form type "," form filling cycle "," form filling deadline "," creation time "," form filling type 」, whether the form is terminated or not and the creator of the form 」. Finally, set the status of each text component to read-only 」. (The operation is shown in Figure 2.2-2)
Figure 2.2-2 add and configure subform components
- Click save in the upper-right corner of the page.
2.3 Step 3: Create and configure a connector
For more information about the overall functions of the connector, see:Integration & Automation
Procedure:
- After entering the application, click integration & Automation at the top and click the new integration & Automation button. (The operation is shown in Figure 2.3-1)
Figure 2.3-1 connector configuration entry
- Name the connector "obtain the information of intelligent form filling template created by employees", select "form event trigger" and select "form filling template query only" form, and click "OK.
(The operation is shown in Figure 2.3-2)
Figure 2.3-2 create a connector
- Configure form event trigger: Select "created", select "all data" for data filtering, and click "save.
(The operation is shown in Figure 2.3-3)
Figure 2.3-3 configuration form trigger event
- Select connector application: select smart fill application and click next 」. (Operation is shown in Figure 2.3-4)
Figure 2.3-4 select connector application
- Select the connector to perform the action: Select "get user form template" and click the "next" button. (Operation is shown in Figure 2.3-5)
Figure 2.3-5 Select connector execution action
- Configure the connector and click save. (Operation is shown in Figure 2.3-6)
Figure 2.3-6 configuration connector execution action
- Add new data node: add a new data node under the connector node. (Operation is shown in Figure 2.3-7)
Figure 2.3-7 add new data nodes
- Configure the new data node and click save. (Operation is shown in Figure 2.3-8)
Figure 2.3-8 configure new data nodes
- Click save in the upper-right corner and click Publish.
2.4 Step 4: configure the query result record table 」
Through the preceding steps, you have completed the call of the connector and can also receive the data returned by the connector. Next, process the returned data and display the processed data to each component in the query result record subform component.
Procedure:
On the form editing page, copy the following code to the JS action panel on the left of your page.didMount
Within the function.
(The operation is shown in Figure 2.4-1)
Figure 2.4-1 JS action Panel entry and didMount functions
The following code can be directly copied in the JS panel,Note: You need to replace the unique identifier of the component.
//获取连接器传入多行文本中的数据
//将textareaField_kwcv17cj 为页面中名为"返回结果"多行文本组件的唯一编码。
let obj = this.$('textareaField_kwcv17cj').getValue();
//因为obj变量的值为字符串形式,JSON.parse()方法用于将obj变量转换为对象形式。
let res = JSON.parse(obj);
//创建一个空数组"arr",用于存储处理完成的数据。
let arr = []
//对res变量进行遍历
const data = res.map(item=>{
let object = {};
//需要将12~21行代码中出现的"object."与"="中间代码分别替换为子表单内各组件的唯一标识。
object.textField_kwcvykby = item.name;
object.textField_kwcvykbz = item.memo;
object.textField_kwcvykbx = item.form_code;
object.textField_kwcvykc0 = item.setting.form_type === 0 ? "一次性填表" : "周期性填表";
object.textField_kwcvykc3 = item.setting.form_type === 0 ? "非周期性填表" : item.setting.loop_days;
object.textField_kwcvykc5 = item.setting.end_time ? item.setting.end_time : "未设置截止日期";
object.textField_kwcvykcb = item.setting.create_time;
object.textField_kwcvykcc = item.setting.biz_type === 0 ? "通用填表" : "教育版填表";
object.textField_kwcvykcd = item.setting.stop === false ? "未终止" : "已终止";
object.textField_kwcvykce = item.creator;
//将处理好的对象添加到arr数组中,一个object对象就是一条子表单数据。
arr.push(object);
})
//将arr数组数据赋值给子表单组件
//需要将tableField_kwd6plxz替换为您表单中子表单的唯一标识。
this.$("tableField_kwd6plxz").setValue(arr);
2.5 Step 5: Submit form data
Fill in and submit the form data of intelligent form filling template query to trigger the connector. Go to the data management page of the query result record form to view the data returned by the connector. (The operation is shown in Figure 2.5-1)
Figure 2.5-1 submit form data
3. Effect display
Figure 3.1 Display of query results
-------------------- Get the latest information YIDA, welcome to follow US--------------------