Show CC my unread messages
1. Use background
You can obtain the "CC my" information in the application, but you cannot confirm which information is Unread. This document uses a custom page to reduce the number of CC information views.
2. Video tutorial
To be added, please look forward...
3. Procedure
Prepare two pages: process page and custom page.
3.1 Step 1: create a process page
Implementation logic:Place a field on the page to hide it. When the CC user clicks to view this data, it determines whether the current login person is a member of the CC user, and then updates this field to read through the interface.
Create a process page>Complete process approval node settings>Create data
- The CC in the process is set as a member.
- Multiple CC users are not applicable to the following code to modify the check or not field on the page.
(The process page settings are shown in Figure 3.1-1)
Figure 3.1-1 setup process page
3.1.1 Design process page
Place the required component and a single-line text component named "view or not" on the page. Set the status to hidden in the attribute. The default value is "no" (as shown in figure 3.1.1-1), set always commit in advanced (as shown in figure 3.1.1-2).
Figure 3.1.1-1 set field properties
Figure 3.1.1-2 set advanced properties of fields
3.1.2 add a remote data source
Create two remote data sources, respectively callingObtain approval RecordsInterface andProcess instance updateInterface to disable automatic loading and configure the request method.
Add a remote data source
3.1.3 call the data source in the JS panel
Implementation logic:When the page is initialized, determine whether the current process page is a submission page or a details page, and the instance ID in the url link is procInsId when the process is in progress, after the process ends, the instance ID in the url link is formInstId. After obtaining the instance ID, use it as a parameter and call the "get approval record" interface to determine if there is a CC node and the current login is the CC sender of the node, then, call the process instance Update interface to change the "View or not" field data of this data to "read".
Write JS panel code
The following code can be copied directly into the JS panel.
export function didMount() {
var url = location.href; //获取url中是否有"procInsId"的参数
//判断页面的url链接内是否存在procInsId，如果有则获取当作「获取审批记录」接口参数
if (url.indexOf("procInsId") != -1) {
const params = {
processInstanceId: this.state.urlParams.procInsId
}
//调用获取「获取审批记录」接口，将url上的procInsId值当作参数传入。
this.dataSourceMap.getOperationRecords.load(params).then((response) => {
//循环获取节点信息，如有抄送信息，和当前登陆人进行判断
for (let i = 0; i < response.length; i++) {
//如果action是"抄送"并且当前登陆人等于抄送人，执行流程实例更新接口，将页面内的「是否查看」字段数据更改为"已阅读"
if (response[i].action == "抄送" && window.loginUser.userName == content[i].operatorName){
const updateparams = {
processInstanceId: this.state.urlParams.procInsId,
updateFormDataJson: JSON.stringify({
"textField_kuqay7au":"已阅读"
})
}
this.dataSourceMap.updateInstance.load(updateparams).then((res) => {
//当抄送人等于当前登陆人时弹出提示弹窗
this.utils.toast({
title: `${window.loginUser.userName}已阅读`,
type: 'success',
size: 'large',
})
})
}
}
})
} else if (url.indexOf("formInstId") != -1) {
const params = {
processInstanceId: this.state.urlParams.formInstId
}
this.dataSourceMap.getOperationRecords.load(params).then((response) => {
for (let i = 0; i < response.length; i++) {
if (response[i].action == "抄送" && window.loginUser.userName == response[i].operatorName) {
const updateparams = {
processInstanceId: this.state.urlParams.formInstId,
updateFormDataJson: JSON.stringify({
"textField_kuqay7au": "已阅读"
})
}
this.dataSourceMap.updateInstance.load(updateparams).then((res) => {
this.utils.toast({
title: `${window.loginUser.userName}已阅读`,
type: 'success',
size: 'large',
})
})
}
}
})
} else {
console.log("提交页面")
}
}
3.2 Step 2: Create a custom page
The custom page is used to display the number of CC data entries and details links that have not been viewed by the login user on the page.
3.2.1 add a remote data source
Create two remote data sources, respectively callingCopy my taskInterface andObtain a list of instance details based on search criteriaInterface, automatically load the status according to the configuration screenshot (as shown in figure 3.2.1-1).
Figure 3.2.1-1 add a remote data source
3.2.2 add variable data sources
content variable data source: Stores qualified data in the CC my task and search process instance details interfaces.
condition variable data source: used to control link block rendering.
Reference link for binding variable data sources👉Link block component
Figure 3.2.2-1 add variable data source
3.2.3 custom page component design
This page adds four text components, a link block component and a layout container component.
Figure 3.2.3-1 add page components
a. The first text component is used to record the number of data records that have not been copied (as shown in figure 3.2.3-2).
Figure 3.2.3-2 the first text
The following code can be copied directly into the JS panel.
export function onClick2() {
this.setState({
condition: true,
});
}
B. Link block component: drag the link block on the custom page and bind the corresponding content to the data source
Configure link blocks and text formats. There are multiple pieces of data in content. We need to show one piece of data to the corresponding position. Here we can use one of our iterative usage, then we can use the link block to loop the contents of the link block one by one (as shown in figure 3.2.3-3).
In the future, click the link block to jump to the corresponding process details page, so configure the external link in the properties.'Https://www.aliwork.com/应用的APPType/processDetail? formInstId=${item.processInstanceId}'(As shown in figure 3.2.3-4).
The link block component is bound to loop data. If no iteration name variable is set, the default value is item. For more information, seeLoop rendering.
Figure 3.2.3-3 link block component (1)
Figure 3.2.3-4 link block components (2)
c. Layout container components: the function is to adjust the component style in the container to ensure the beautiful page. You can configure the style according to your needs (as shown in figure 3.2.3-5).
Figure 3.2.3-5 layout container components
The second, third, and fourth text components need to obtain iterative data in the link block, so useitem.xxxObtains iterative data.
d. Second text component: displays the title of an unviewed process instance.
Figure 3.2.3-5 the second text
e. The third and fourth text components: Display the submission on the page'Author: ${ item.originator.name.en_US}'And creation time'Creation Time: ${ this.utils.formatter('date', item.gmtCreate, 'YYYY-MM-DD HH:mm:ss')}'.
Figure 3.2.3-5 the third text
Figure 3.2.3-5 the fourth text
3.2.4 single process initialization shows unread CC information
First, bind the initialization function didmount on the custom page. When binding, copy the following code to the JS panel (as shown in figure 3.2.4-1).
Figure 3.2.4-1 binding didmount
- During initialization, a single process displays the unread information copied to me.
- For more information about copying my unread information, see step 3.2.5.
The following code can be directly copied in the JS panel,Note: You need to replace the unique identifier and formUuid of the component.
export function didMount() {
//创建空数组，存储符合条件的数据。
const contentArr = [];
//调用「抄送我的任务」接口，将返回的data数据存储在 content 变量中。
this.dataSourceMap.getNotifyMeTasksInApp.load().then((response) => {
// console.log("getNotifyMeTasksInApp-response", response)
const content = response.data
//循环判断，当返回的数据中，「是否查看」字段唯一标识的值为"否"时，传参调用「根据搜索条件获取实例详情列表」接口。
for (let i = 0; i < content.length; i++) {
if (content[i].dataMap.textField_kuqay7au == "否") {
//传递流程页面的表单ID和「是否查看」字段的唯一标识。
const params = {
formUuid: "FORM-RH766AC1ZFFUR12D1E6H68DL2SGP2241YAQUK04",
searchFieldJson: JSON.stringify({
"textField_kuqay7au": "否"
})
}
this.dataSourceMap.getInstances.load(params).then((res) => {
const cont = res.data;
for (var j = 0; j < cont.length; j++) {
//当「根据搜索条件获取实例详情列表」接口返回的实例ID和「抄送我的任务」接口返回的实例ID和相同时，将数据存储。
//并在循环结束后将全部符合条件的数据放入content变量数据源中。
if (cont[j].processInstanceId == content[i].processInstanceId) {
contentArr.push(cont[j])
}
if (i == content.length - 1) {
this.setState({
content: contentArr,
});
}
}
})
}
}
})
}
3.2.5 display unread CC information for a single application
CopyProcess page 1Make sure that the unique identifier of the view or not field is the same.
a. Drag a drop-down radio component to configure the display value and option value of the single choice as the form name and form ID
Drop-down radio component configuration
B. Bind onchange actions to the drop-down radio component
The following code can be directly copied in the JS panel,Note: You need to replace the unique identifier of the component.
export function onChange({value, actionType, item}) {
this.setState({
content: [],
condition: false,
});
const contentArr = [];
this.dataSourceMap.getNotifyMeTasksInApp.load().then((response) => {
const content = response.data;
for (let i = 0; i < content.length; i++) {
//需要替换组件的唯一标识
if (content[i].dataMap.textField_kuqay7au == "否") {
const params = {
//value为下拉单选的选项值，也就是对应的流程表单ID
formUuid: value,
searchFieldJson: JSON.stringify({
"textField_kuqay7au": "否"
})
}
this.dataSourceMap.getInstances.load(params).then((res) => {
const cont = res.data;
for (var j = 0; j < cont.length; j++) {
if (cont[j].processInstanceId == content[i].processInstanceId) {
contentArr.push(cont[j])
}
if (i == content.length - 1) {
this.setState({
content: contentArr,
});
}
}
})
}
}
})
}
4. Effect demonstration
3.2.4 The implementation effect of steps is demonstrated as follows:
Single process effect demonstration (silent)
3.2.5 The implementation effect of steps is demonstrated as follows:
Single application display unread CC message effect demonstration (silent)
5. Try it online
For online experience, please go to the Developer Center.👉Show CC my unread messages
-------------------- Get the latest information YIDA, welcome to follow US--------------------
