Custom tables for adding, deleting, modifying, and querying

1. Usage scenarios

After the user collects a batch of user information tables and fills in the form, we hope to manage the data intuitively. In the past, we can use the create data management page to achieve, however, the data management page has some limitations and cannot directly modify and add data. In this case, we can use the table component in the custom page to implement it, after the data is displayed, you can edit its operation column to achieve the effect of adding, deleting, modifying and checking.Online experience is availableClick.

2. Implement functions

2.1 Call the interface to process data and display it in a table

2.1.1 add a remote data source to the data source

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

(1) call the search form instance details List interface based on criteria

The interface configuration is as follows:

(2) the data returned by the request is processed in the didFetch function. For more information about the processed format, see the format in edit code on the right side of the table. Each data required is an object, put it into an array uniformly, and the last returned object is an object. There are three attributes in the object, one of which is data, and the corresponding value is a processed array.

PS: If the returned data is in proxy form, you can use JSON.parse(JSON.stringify (data of proxy attribute)

function didFetch(content) {
  // content.b = 1; 修改返回数据结构中的 b 字段为1
  const value = [];
  const data = content.data.map((item)=>{
    let arr={
      name: item.formData.textField_hr9o6eq,
      sex: item.formData.textField_62lufhf,
      age: item.formData.textField_0nibhpr,
      study: item.formData.textField_97okczu,
      work: item.formData.textField_456c4b7,
      instid: item.formInstId
    }
    value.push(arr);
    console.log(arr);
  })

  let result ={
    "data" : value,
    "currentPage" : content.currentPage,
    "totalCount" : content.totalCount
  }
  return result; // 重要，需返回 content
}

2.1.2 bind a remote data source to a table data source

As shown in the following figure:

2.1.3 modify the data primary key value

Each row of data in the table is unique, so configure the instance id as the unique identifier and configure the primary key value of the data as the obtained instance id.

Table property setting data primary key

2.1.4 after binding the data source, you need to configure the paging function, add action events to the table properties, and load the data source.

2.1.5 Video Display

此处为语雀视频卡片，点击链接查看：获取表单数据源-分页.mp4

2.2 Add data

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

2.2.1 Add a remote data source to the data source and call the add form instance interface

The interface configuration is as follows:

2.2.2 add pop-up window components and configure components with new content to pop-up window

As shown in the following figure:

Add dialog box component

2.2.3 add a new operation button in the top operation> operation bar to add a pop-up event to the button, where this is used.$(fieldId).show() to display the dialog box. The unique identifier of the dialog box is filled in parentheses.

export function onActionBarItemClick() {
   this.$('dialog_kp3mxni9').show()
  }

2.2.4 execute the function when you click confirm in the Add dialog box. After you click confirm, execute the Insert remote data source call interface to Insert data into the form. Because the custom page itself does not have the function of storing data, therefore, you need to perform a delayed operation to reload the remote data source that obtains the form instance interface so that the new data can be displayed directly after the data is inserted.

export function onOk() {
  const data1 = {
    "textField_hr9o6eq" : this.$('textField_kp3mxnia').getValue(),
    "textField_62lufhf" : this.$('textField_kp3mxnib').getValue(),
    "textField_0nibhpr" : this.$('textField_kp3mxnic').getValue(),
    "textField_97okczu" : this.$('textField_kp3mxnie').getValue(),
    "textField_456c4b7" : this.$('textField_kp3mxnid').getValue()
  }
  const param = {
    formUuid :"FORM-HC9660C1TGFQ8927Y6905OPBO30Y1I9YOD3PKH",
    appType :"APP_J587XYX1VEUP7XTTIJVV",
    formDataJson : JSON.stringify(data1)
  }
  this.dataSourceMap["insert"].load(param).then(res => {
    this.utils.toast({
      title: '新增成功',
      type: 'success',
      size:'large',
    });
  }) 
  this.$('dialog_kp3mxni9').hide();
  setTimeout(()=>{
    this.dataSourceMap['getDatas'].load();
  },2000);

  console.log('onOk');
}

2.2.5 Video Display

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

2.3 view details on The Jump Details page

2.3.1 configure detailed operation items in the operation column

As shown in the figure:

2.3.2 use this.utils.router.push(path, params?, blank ?, isUrl?) Configure the parameters and go to the details page. The code is as follows:

export function onActionClick(rowData) {
   const id = rowData.instid;
   this.utils.router.push('https://www.aliwork.com/APP_J587XYX1VEUP7XTTIJVV/formDetail/FORM-HC9660C1TGFQ8927Y6905OPBO30Y1I9YOD3PKH',{formInstId: id},true,true)
    console.log(rowData);
  }

2.3.3 Video Display

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

2.4 delete data

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

2.4.1 add a remote data source to the data source and call the delete form instance interface.

The interface configuration is as follows:

2.4.2 add and delete action columns

2.4.3 to configure action events, you need to load the Delete data source, call the Delete form instance interface, and configure the delay to call the query form instance interface again after deletion to load and display the data. The reference code is as follows:

export function onDeleteClick(rowData) {
    const id = rowData.instid;
    const param2 = {
      formInstId : id ,
    }
    this.dataSourceMap['Delete'].load(param2).then(res =>{
      this.utils.toast({
        title: "删除成功",
        type : "success",
        size:"large"
      });
      setTimeout(() =>{
        this.dataSourceMap['getDatas'].load();
      },2000);
    })
    console.log(rowData);
  }

2.4.4 Video Display

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

2.5 edit and modify data

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

2.5.1 add a remote data source to the data source and call the interface to modify the value of the form component.

The interface configuration is as follows:

2.5.2 add the edit operation column and save operation column. Because the edit state will enter after editing, you need to place the save button in the edit state.

As shown in the following figure:

2.5.3 Add editing events, see the following code

export function onTableRowEdit(rowData, action, table) {
  console.log(rowData);
  return table.editRow(rowData);
}

2.5.4 Add a Save event, load the Update data source in the Save event, call the interface, and configure the delay to re-call the query form instance interface after modification to load and display the new data. The reference code is as follows:

export function onTabeRowSave(rowData, action, table) {
  console.log(rowData, action, table);
  return table.saveRow(rowData).then((...args) => {
    console.log(args);
    const id =  rowData.instid;
    const somejson = {
      "textField_hr9o6eq" : args[0].name,
      "textField_62lufhf": args[0].sex,
      "textField_0nibhpr": args[0].age,
      "textField_97okczu": args[0].study,
      "textField_456c4b7": args[0].work
    }
  const param3 = {
    formInstId :args[0].instid,
    updateFormDataJson: JSON.stringify(somejson)
  }
    this.dataSourceMap['Update'].load(param3).then(res => {
      this.utils.toast({
        title: "修改成功",
        type: "success",
        size: "large"
      });
      setTimeout(() => {
        this.dataSourceMap['getDatas'].load();
      }, 2000);
    })
  });
}

2.5.5 Video Display

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

2.6 implement table search function

2.6.1 add a variable data source to the data source and configure variable parameters getDatas the remote data source

(1) configure variable data source page and searchKey

(2) configure variable parameters in the remote data source getDatas; And use the variable data source searchKey as the parameter for querying datasearchFieldJson

{
  searchFieldJson: JSON.stringify({
    textField_456c4b7: state.searchKey
  }),
  formUuid: "FORM-HC9660C1TGFQ8927Y6905OPBO30Y1I9YOD3PKH",
  currentPage: state.page,
  pageSize: 10
}

2.6.2 In The configured paging action event, assign a value to the variable data source. When the search is triggered, after the variable data source assigns a value, search for data that meets the searchFieldJson criteria.

export function onFetchData(params) {
  // 如果是搜索的话翻页重置到 1
  if (params.from  === 'search') {
    params.currentPage = 1;
  }

  // 如果你需要把表格查询条件保存起来，可以取消下一行注释，并添加一个 params 的变量类型数据源
  // this.setState({ tableParams: params });
  // 如果使用远程接口作为表格数据源，理论上你只需要将下方的“dataSourceName”改为实际的数据源名称即可
  // this.dataSourceMap['getDatas'].load(params);
  this.setState({
    searchKey: params.searchKey,
    page: params.currentPage
  })
} 

2.6.3 Video Display

此处为语雀视频卡片，点击链接查看：屏幕录制2021-06-09 上午11.03.17.mov

3. Online experience

• https://www.aliwork.com/bench/coe? tplUuid=TPL_QQL3XOV4R4XKHNL5RCU7

4. FAQ

3.1 when the page is loaded, the console reports a 500 error, indicating that the parameter verification failed formUuid or formInstId. What is the cause?

A: data sources such as insert and update are loaded when you click the action column button, but automatic loading is not turned off after the data source is created, resulting in parameter verification failure when the data source is automatically loaded after the page is opened.

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