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:

1. 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.
2. For exposed buttons, the order can be changed by modifying the order value. 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}])
    }
}