Custom page implementation scan code to view related data

1. Usage scenarios

Scan the QR code, jump to the custom page, filter the table data on the page according to the parameters carried by the QR code, and display it.

2. Implementation steps

2.1 Step 1: generate a QR code and carry parameters

2.1.1 generate QR code

For more information about how to generate a QR code, see:Scan the QR code to display device details

2.1.2 configure QR Code carrying parameters

Procedure:JS panel on the left of the page> addtextReplace some content with custom page links. (The operation is shown in Figure 2.1-1)

Figure 2.1-1 configure QR Code carrying parameters

The code involved in configuring the QR code to carry parameters is as follows,Note the replacement of the unique identifier of the component!

//text的链接，仅供参考，这里的encodeURI是转换文字的，如果有文字乱码情况可以套用。
text: "https://www.aliwork.com/APP_BXVF6X73641FW17EJG7P/custom/FORM-LV866T61MY9T0LXNYG2TBCEBSOAX1IWRYO2TK9?param=" + encodeURI(this.$("textField_kt2t0md9").getValue())

2.2 Step 2: search before rendering the custom page

2.2.1 Add and configure remote data source getDatas 」

The remote data source enables the automatic load call interface, which loads data before the page is loaded. To prevent the page from refreshing and displaying data twice, we recommend that you use the request parameter judgment method.

For more information about the API involved in this step, see the documentation:YIDA platform interface documentation-search for form instance details based on criteria.

Procedure:

1. Create a remote data source named getDatas> Enable auto load configuration> modify the request address/dingtalk/web/enter the unique ID of the application here/v1/form/searchFormDatas.json. (The operation is shown in Figure 2.2-1)

Figure 2.2-1 add a remote data source

2. Configure request parameters (as shown in Figure 2.2-2)

Figure 2.2-2 configuration of carrying parameter variables

The code for configuring the carrying parameters is as follows.Note: replace formUuid, parameter name, and unique component identifier!

//配置请求参数步骤所涉及的代码
{
//「FORM-IS866HB1MY9TGHQO5EVOY77YQTEL34YC4P2TKD」为表单的formUuid,需要进行替换。
formUuid:"FORM-IS866HB1MY9TGHQO5EVOY77YQTEL34YC4P2TKD",
//「searchFieldJson」为筛选条件配置项，含义为：将param当做数据筛选条件，有param参数时，对数据进行筛选后展示；如果没有param参数就展示全部数据。
searchFieldJson : this.state.urlParams.param ? JSON.stringify({
//「textField_kt2t0md9」为组件的唯一标识，需要进行替换。
     textField_kt2t0md9 :
     this.state.urlParams.param
}) : "" 
}

2.3 Step 3: Configure table data

For more information, see:https://www.yuque.com/yida/subject/vswqzz.

Procedure:

Drag the table component> bind the data source of the table component, and enter the variablestate.getDatas.data> change the data column. (The operation is shown in Figure 2.3-1)

Note:The data field in the data column isformData. Unique Component Identifier.

Figure 2.3-1 configure custom page table component data

3. Effect demonstration

Figure 3-1 display effect of PC

此处为语雀视频卡片，点击链接查看：normal video (1).mp4

Figure 3-2 default search effect of mobile terminal