To-do tasks are displayed in the custom page table.

1. Case Background

When the system's own to-do page cannot meet personalized needs, you need to use a custom page to display the to-do content. You can refer to the following examples to meet your needs.

2. Achieve results

💡Show my to-do list to the table component of the custom page.

3. Implementation steps

3.1 create a custom page

Path: Enter the created application> upper left corner of the page + sign> create custom page

Custom page component configuration

Pull from the definition page table component

Add 5 fields

Title	Data Field	Data type
processInstanceId	processInstanceId	Text
originatorName	originatorName	Text
title	title	Text
originatorPhoto	originatorPhoto	Text
createTime	createTime	Time

Add fields to table components

Modify the field data type

3.3 create data sources and configurations

Name: getData

Request address:/dingtalk/web/Application unique encoding/v1/task/getTodoTasksInApp.json

Request method: GET

Request parameters:

pageSize:100

currentPage:1

Data source configuration

3.3.1 add didFetch functions to the data source

didFetch function is a request completion callback function, which is mainly used for data processing after data is returned.

Add didFetch functions

Sample code:

Bind the data source after processing the returned array into a table format

  const value = [];
  const data = content.data.map((item) => {
    let arr = {
      processInstanceId: item.processInstanceId,
      originatorName: item.originatorName,
      title: item.title,
      originatorPhoto: item.originatorPhoto,
      createTime: item.createTime,
      instid: item.processInstanceId
    }
    value.push(arr);
    console.log(arr);
   
  })
  console.log(value)
  let result = {
    "data": value,
    "currentPage": content.currentPage,
    "totalCount": content.totalCount
  }
  console.log(result)
  return result;

3.3.2 Change the primary key of table data to instid and bind the data source

Modify data primary key

Bind a data source

3.3.3 configure operation columns

Click details settings

Bind callback functions

Bind callback functions

Bind callback functions

Bind callback functions

3.3.4 JS panel callback function code configuration

Set the code configuration parameters of the Click details callback function. When you click each piece of data, you can jump to the corresponding form details page.

Code configuration in callback functions

Sample code:

const id = rowData.instid;
this.utils.router.push('https://www.aliwork.com/APP_NNRU03VA136ZM6867ONP/processDetail', { formInstId: id }, true, true)

4. Effect demonstration

Perform the following operations to achieve the following results:

1. Unprocessed data in the presentation process
2. Displays the data obtained from the custom page.
3. Add data in flow chart
4. Check whether the to-do data has been added to the custom page

5. Try it online

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

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