English
bpm.detailCard.render.before
About 786 wordsAbout 3 min
2025-12-16
This event is used to perform extra actions before the business flow data detail card page is rendered, including but not limited to the following functions: 1. get current task data, 2. customize buttons, 3. customize the "View Detail" button.
Parameters
| Parameter | Description | Type |
|---|---|---|
| getTaskDetail | Get data and button data of all tasks under the current stage (example) | Function |
| customButtons | Customize button display (example) | Function |
| customViewDetailButton | Customize the display of the "View Detail" button (example) | Function |
Basic Examples
1. getTaskDetail
Feature Description
Used to get part of the data and button data of all tasks under the current stage.
Parameters
None
Return Value
| Parameter | Description | Type |
|---|---|---|
| taskId | Task ID | String |
| name | Name of the current task | String |
| state | Status of the current task | String |
| buttons | Exposed buttons of the current task | Object |
| moreButtons | More buttons of the current task | Array |
| errorButtons | Exposed buttons shown for abnormal tasks, only available when the task status is abnormal | Array |
Parameter Code Example
None
Code Example
// getTaskDetail()
export default class Plugins{
apply() {
return [
{
event: 'bpm.detailCard.render.before',
functional: this.detailCardRenderBefore.bind(this)
}
]
}
detailCardRenderBefore(api) {
let taskDetail = api.getTaskDetail();
console.log(taskDetail);
// Move the element at index 2 to the first position
let val = taskDetail.splice(2, 1)[0];
taskDetail.unshift(val)
// Modify task name
taskDetail[0].taskName = "Testing whether the task name can be modified";
console.log(taskDetail, 'new_taskDetail')
}
}2. customButtons
Feature Description
Supports customizing button names, order, visibility, and hiding.
Note:
- When customizing buttons, do not add new buttons. You can only delete, modify, or replace data on existing buttons, and the data structure must not be changed.
- For exposed buttons, the order can be changed by modifying the
ordervalue. For more buttons and buttons under abnormal states, the order can be changed using array methods.
Parameters
| Parameter | Description | Type |
|---|---|---|
| taskId | Task ID | String |
| buttons | Exposed buttons of the current task | Object |
| moreButtons | More buttons of the current task | Array |
| errorButtons | Exposed buttons shown for abnormal tasks, only available when the task status is abnormal | Array |
Return Value
None
Parameter Code Example
// 1. Get all task data under the current stage
let taskDetail = api.getTaskDetail();
// 2. Get the taskId of the first task under the current stage - targetTaskId
let targetTaskId = taskDetail[0].taskId;
// 3. Based on the target taskId, get the button data under the current task
let taskButtons = taskDetail[0].buttons;
let moreButtons = taskDetail[0].moreButtons;
let errorButtons = taskDetail[0].errorButtons;
// 4. Based on the target taskId, customize the button data
for(let key in taskButtons){
if (taskButtons[key].action === "suspend") {
taskButtons[key].label = "Defer Processing - Show First";
taskButtons[key].order = 0;
} else if(taskButtons[key].action === "Complete"){
taskButtons[key].label = "This is the Complete button";
taskButtons[key].order = 1;
}else if (taskButtons[key].action === "agree") {
taskButtons[key].order = 2;
taskButtons[key].label = "Place Agree button after Defer Processing";
}else if(taskButtons[key].action === "reject") {
taskButtons[key].order = 3;
taskButtons[key].label = "Place Reject button after Agree";
}
}
moreButtons && moreButtons.forEach((i)=>{
if(i.code==="Discuss"){
i.label = "Forward 1111";
}else if(i.code==="ChangeBPMApprover"){
i.label = "Change Handler 4444";
}
})
// 5. Customize buttons
[{taskId: targetTaskId, buttons: taskButtons, moreButtons: moreButtons,errorButtons:errorButtons}]Code Example
// customButtons()
export default class Plugins{
apply() {
return [
{
event: 'bpm.detailCard.render.before',
functional: this.detailCardRenderBefore.bind(this)
}
]
}
detailCardRenderBefore(api) {
let taskDetail = api.getTaskDetail();
console.log(taskDetail, 'taskDetail');
// Replace exposed buttons
taskDetail.forEach((task,index)=>{
if(task.state === 'in_progress'){
// Define exposed buttons
let taskButtons = task.buttons;
for(let key in taskButtons){
if (taskButtons[key].action === "suspend") {
taskButtons[key].label = "Defer Processing - Show First";
taskButtons[key].order = 0;
} else if(taskButtons[key].action === "Complete"){
taskButtons[key].label = "This is the Complete button";
taskButtons[key].order = 1;
}else if (taskButtons[key].action === "agree") {
taskButtons[key].order = 2;
taskButtons[key].label = "Place Agree button after Defer Processing";
}else if(taskButtons[key].action === "reject") {
taskButtons[key].order = 3;
taskButtons[key].label = "Place Reject button after Agree";
}
}
// Define more buttons
let moreButtons = task.moreButtons;
moreButtons && moreButtons.forEach((i)=>{
if(i.code==="Discuss"){
i.label = "Forward 1111";
}else if(i.code==="ChangeBPMApprover"){
i.label = "Change Handler 4444";
}
})
}
})
api.customButtons(taskDetail)
}
}3. customViewDetailButton
Feature Description
Supports customizing the "View Detail" button name, as well as showing or hiding it.
Parameters
| Parameter | Description | Type |
|---|---|---|
| taskId | Task ID | String |
| text | Customized "View Detail" button label | String |
| isShow | Show or hide | Boolean |
Return Value
None
Parameter Code Example
[{taskId: '65e5879aa10a002e989c8106', text: 'View Detail button text', isShow: true},
{taskId: '65e5879aa10a002e989c8107', text: 'View Detail button text 2', isShow: true}]Code Example
// customViewDetailButton()
export default class Plugins{
apply() {
return [
{
event: 'bpm.detailCard.render.before',
functional: this.detailCardRenderBefore.bind(this)
}
]
}
detailCardRenderBefore(api) {
api.customViewDetailButton([{taskId:'65e5879aa10a002e989c8106',text:'This is the View Detail button for add-sign node 1',isShow:true},{taskId:'65e5879aa10a002e989c8107',text:'This is the View Detail button for add-sign node 2',isShow:true}])
}
}