How to display project information, filter function and like function

1. Usage scenarios

Enterprise project information often includes project name, project type, project diagram and other information, so we can directly display the data on the custom page and directly filter according to the project type, we also add a like function in the display module, and click will be superimposed.

2. Video display of information display and filtering

此处为语雀视频卡片，点击链接查看：项目投票.mp4

2.1 Display information procedure

2.1.1 call the interface to obtain form data and perform data processing

(1) add a remote data source to the data source and call the search form instance details List interface based on criteria

Reference documents:YIDA platform interface (page data source can be called directly)

The interface configuration is as follows:

(2) the data returned by the request is processed in the didFetch function, and the content value is returned directly.

function didFetch(content) {
  	// content.b = 1; 修改返回数据结构中的 b 字段为1
  	return content; // 重要，需返回 content
}

(3) the data returned by the interface is shown in the figure. Open the console, enter the network page, and search for searchFormDatas.json, you can see that content and success:true,success:true are returned to prove that the API is successfully called, while the data value is the data we return, where forminstid is the instance ID and formdata is the data content.

2.1.2 drag the link block on the custom page, configure the image and text information format in the link block, and bind the corresponding content to the data source

(1) configure the link block and text format. We can see that there are multiple pieces of data in the data. We need to show the data one by one to the corresponding position, here we can use one of our iteration usage, then we can use link blocks to loop, and loop the contents of link blocks one by one.

(2) loop data can be implemented by binding a data source. If we want to display the data loop, we can directly use the state.getdatas.data binds the data directly to the link block. When we get the data, we will automatically loop through the link block and display all the data in the link block format.

(3) since the project information such as the title is in the link block, we only need to bind the data source directly to the property content to get the item.formData. The value of name, which binds all text components to the strain value in turn.

(4) when binding values to image components, the returned image format needs to be processed.

The image we return in the system is an array type, we can use json. The parse method takes the current value, which is an array and an object. We can see that there is a previewUrl in the object, so this is the address of our image.

Therefore, when using this address, we can directly use item.formdata.photo to get our image return value, then use json.parse method to process it, and return the previewUrl in the first array.

2.1.3 after the configuration is completed, the data can be displayed directly.

As shown in the following figure:

2.2 filtering function operation steps

Due to different project types, we hope that the project display can be filtered according to the type, divided into all, commercial projects and scientific and technological projects.

2.2.1 drag the tab to the page and Configuration 3 options

2.2.2 when all is selected, the click action onClickall is triggered. Because all data is displayed when all is selected, you only need to reload the data source to obtain the data.

export function onClickall(){
  const params = {
    "formUuid": "FORM-VFYJ1FGVKZYP49FP075B4BA6VCV931W935HOK31",
  }
  this.dataSourceMap.getDatas.load(params).then((response) => {
    // this.utils.dialog({
    //   type: 'alert', // 或confirm
    //   title: '请求成功',
    //   type: 'success', // PC端支持 info/success/error 
    //   content: `请求参数为 ${JSON.stringify(params)}，返回结果为 ${response}`,
    // })
  })
}

2.2.3 when selecting a scientific research project, the action onClicka is triggered. Because only the data of the scientific research project is filtered out, when you need to load the data source, you need to add parameters to call the interface to obtain the data.

First use this.$('fliedid').get('content'); Obtain the content value of the text "scientific research project", then use the content as a parameter, call the getDatas interface, and load the data source, thus realizing the need to filter scientific research projects when clicking scientific research projects.

export function onClicka(){


  const a = this.$('科研项目文本唯一标识').get('content');
  const obj = { "selectField_koh53g2m": a }
  const params = {
    "formUuid": "FORM-VFYJ1FGVKZYP49FP075B4BA6VCV931W935HOK31",
    "searchFieldJson": JSON.stringify(obj),
  }
  this.dataSourceMap.getDatas.load(params).then((response) => {
    // this.utils.dialog({
    //   type: 'alert', // 或confirm
    //   title: '请求成功',
    //   type: 'success', // PC端支持 info/success/error 
    //   content: `请求参数为 ${JSON.stringify(params)}，返回结果为 ${response}`,
    // })
  })
}

Effect

2.2.4 when you select a commercial project, the action onClickb is triggered. Because only the data of the commercial project is filtered out, when you need to load the data source, you need to add parameters to call the interface to obtain the data.

First use this.$('fliedid').get('content'); Obtain the content value of the text "commercial project", then use the content as a parameter, call the getDatas interface, and load the data source, thus realizing the need to filter commercial projects when clicking scientific research projects.

export function onClickb(){
  const b = this.$('商业项目文本唯一标识').get('content');
  console.log(b);
  let obj = { "selectField_koh53g2m": b }
  const params = {
    "formUuid": "FORM-VFYJ1FGVKZYP49FP075B4BA6VCV931W935HOK31",
    "searchFieldJson": JSON.stringify(obj),
  }
  this.dataSourceMap.getDatas.load(params).then((response) => {
    // this.utils.dialog({
    //   type: 'alert', // 或confirm
    //   title: '请求成功',
    //   type: 'success', // PC端支持 info/success/error 
    //   content: `请求参数为 ${JSON.stringify(params)}，返回结果为 ${response}`,
    // })
  })
}

Effect

3. Video display of like function

此处为语雀视频卡片，点击链接查看：项目点赞.mp4

3.1 Operation steps of the like function

3.1.1 when the project is submitted, the number of likes is 0. When we click like, we will automatically modify the number of likes in the form to achieve the effect of likes.

3.1.2 configure the like icon, assign a value to the text after the chart, and assign the number of likes to the text content

3.1.3 create a new remote data source getDatas_copy. When you click like, you can obtain the project information you have clicked, search for the project instance as a parameter, search for the project instance details, and return back

(1) add remote data source getDatas_copy and variable data source

As shown in the following figure:

(2) add click onclick event to praise

(3) use this.$('text_kok9j5ys ').get('content') obtains the information of the clicked item, loads the getDatas_copy data source as a parameter, and assigns the value in the returned data to the variable data source dianzannum and formInstId

3.1.4 after you click like, modify the value of the number of likes component in the form. You need to use the modify form instance interface.

As shown in the following figure:

3.1.5 when you click like, add one to the number of likes, add one to the value of variable data source dianzanmum, and load the data as a parameter value updateFormDataJson to the remote data source updateDatas

3.1.6 after the modification is successful, assign the modified number of likes to the text content of the likes on the custom page.

4. Try it online

For online experience, please go to the Developer Center.👉 How to display project information, filter function and like function

YIDA in order to better optimize the content and quality of YIDA user manual, it takes you 3-5 minutes to fill in the document feedback questionnaire. The document feedback questionnaire is submitted anonymously, and the questionnaire information is only used for YIDA document experience feedback collection. Thank you for your support for YIDA!

Click here to fill in the questionnaire

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

This doc is generated using machine translation. Any discrepancies or differences created in the translation are not binding and have no legal effect for compliance or enforcement purposes.

本文档对您是否有帮助？

有用

没用

1. Usage scenarios​

2. Video display of information display and filtering​

2.1 Display information procedure​

2.1.1 call the interface to obtain form data and perform data processing​

(1) add a remote data source to the data source and call the search form instance details List interface based on criteria​

(2) the data returned by the request is processed in the didFetch function, and the content value is returned directly.​

2.1.2 drag the link block on the custom page, configure the image and text information format in the link block, and bind the corresponding content to the data source​

(3) since the project information such as the title is in the link block, we only need to bind the data source directly to the property content to get the item.formData. The value of name, which binds all text components to the strain value in turn.​

(4) when binding values to image components, the returned image format needs to be processed.​

2.1.3 after the configuration is completed, the data can be displayed directly.​

2.2 filtering function operation steps​

2.2.1 drag the tab to the page and Configuration 3 options​

2.2.2 when all is selected, the click action onClickall is triggered. Because all data is displayed when all is selected, you only need to reload the data source to obtain the data.​

2.2.3 when selecting a scientific research project, the action onClicka is triggered. Because only the data of the scientific research project is filtered out, when you need to load the data source, you need to add parameters to call the interface to obtain the data.​

Effect​

2.2.4 when you select a commercial project, the action onClickb is triggered. Because only the data of the commercial project is filtered out, when you need to load the data source, you need to add parameters to call the interface to obtain the data.​

Effect​

3. Video display of like function​

3.1 Operation steps of the like function​

3.1.1 when the project is submitted, the number of likes is 0. When we click like, we will automatically modify the number of likes in the form to achieve the effect of likes.​

3.1.2 configure the like icon, assign a value to the text after the chart, and assign the number of likes to the text content​

3.1.3 create a new remote data source getDatas_copy. When you click like, you can obtain the project information you have clicked, search for the project instance as a parameter, search for the project instance details, and return back​

(1) add remote data source getDatas_copy and variable data source​

(2) add click onclick event to praise​

(3) use this.$('text_kok9j5ys ').get('content') obtains the information of the clicked item, loads the getDatas_copy data source as a parameter, and assigns the value in the returned data to the variable data source dianzannum and formInstId​

3.1.4 after you click like, modify the value of the number of likes component in the form. You need to use the modify form instance interface.​

3.1.5 when you click like, add one to the number of likes, add one to the value of variable data source dianzanmum, and load the data as a parameter value updateFormDataJson to the remote data source updateDatas​

3.1.6 after the modification is successful, assign the modified number of likes to the text content of the likes on the custom page.​

4. Try it online​

1. Usage scenarios

2. Video display of information display and filtering

2.1 Display information procedure

2.1.1 call the interface to obtain form data and perform data processing

(1) add a remote data source to the data source and call the search form instance details List interface based on criteria

(2) the data returned by the request is processed in the didFetch function, and the content value is returned directly.

2.1.2 drag the link block on the custom page, configure the image and text information format in the link block, and bind the corresponding content to the data source

(3) since the project information such as the title is in the link block, we only need to bind the data source directly to the property content to get the item.formData. The value of name, which binds all text components to the strain value in turn.

(4) when binding values to image components, the returned image format needs to be processed.

2.1.3 after the configuration is completed, the data can be displayed directly.

2.2 filtering function operation steps

2.2.1 drag the tab to the page and Configuration 3 options

2.2.2 when all is selected, the click action onClickall is triggered. Because all data is displayed when all is selected, you only need to reload the data source to obtain the data.

2.2.3 when selecting a scientific research project, the action onClicka is triggered. Because only the data of the scientific research project is filtered out, when you need to load the data source, you need to add parameters to call the interface to obtain the data.

Effect

2.2.4 when you select a commercial project, the action onClickb is triggered. Because only the data of the commercial project is filtered out, when you need to load the data source, you need to add parameters to call the interface to obtain the data.

Effect

3. Video display of like function

3.1 Operation steps of the like function

3.1.1 when the project is submitted, the number of likes is 0. When we click like, we will automatically modify the number of likes in the form to achieve the effect of likes.

3.1.2 configure the like icon, assign a value to the text after the chart, and assign the number of likes to the text content

3.1.3 create a new remote data source getDatas_copy. When you click like, you can obtain the project information you have clicked, search for the project instance as a parameter, search for the project instance details, and return back

(1) add remote data source getDatas_copy and variable data source

(2) add click onclick event to praise

(3) use this.$('text_kok9j5ys ').get('content') obtains the information of the clicked item, loads the getDatas_copy data source as a parameter, and assigns the value in the returned data to the variable data source dianzannum and formInstId

3.1.4 after you click like, modify the value of the number of likes component in the form. You need to use the modify form instance interface.

3.1.5 when you click like, add one to the number of likes, add one to the value of variable data source dianzanmum, and load the data as a parameter value updateFormDataJson to the remote data source updateDatas

3.1.6 after the modification is successful, assign the modified number of likes to the text content of the likes on the custom page.

4. Try it online