English
bpm.remindCard.render.before
About 450 wordsAbout 2 min
2025-12-16
This event is used to perform extra actions before a business flow to-do card is rendered, including but not limited to the following functions: 1. get card data, 2. get button data, 3. customize buttons.
Parameters
| Parameter | Description | Type |
|---|---|---|
| getTaskData | Get card data (example) | Function |
| getButtons | Get button data (example) | Function |
| customButtons | Customize buttons (example) | Function |
Basic Examples
1. getTaskData
Feature Description
Used to get the card data of the to-do page.
Parameters
None
Return Value
| Parameter | Description | Type |
|---|---|---|
| name | Task name | String |
| taskId | Task ID | String |
| state | Task status | String |
Parameter Code Example
None
Code Example
// getTaskData()
export default class Plugins{
apply() {
return [
{
event: 'bpm.remindCard.render.before',
functional: this.remindCardRenderBefore.bind(this)
}
]
}
remindCardRenderBefore(api) {
let taskData = api.getTaskData();
console.log(taskData);
}
}2. getButtons
Feature Description
Used to get the card button data of the to-do page.
Parameters
None
Return Value
| Parameter | Description | Type |
|---|---|---|
| buttons | Buttons corresponding to each task card | Object |
Parameter Code Example
None
Code Example
// getButtons()
export default class Plugins{
apply() {
return [
{
event: 'bpm.remindCard.render.before',
functional: this.remindCardRenderBefore.bind(this)
}
]
}
remindCardRenderBefore(api) {
let buttons = api.getButtons();
console.log(buttons);
}
}3. customButtons
Feature Description
Used to customize buttons.
Note: First, call api.getButtons() to get the buttons data, then iterate through it. During iteration, customize and modify the corresponding button data for a specific taskId. Finally, be sure to return the complete modified buttons data to avoid losing button data for other cards.
Parameters
| Parameter | Description | Type |
|---|---|---|
| content | Custom button data | Object |
Return Value
None
Parameter Code Example
let buttons = api.getButtons();
for (let key in buttons) {
// Rename
if (key === '65d7266ec26b8d323e19d2e8') {
buttons[key].forEach(item => {
if (item.action === 'suspend') {
item.label = 'Defer Processing - Custom Name';
} else if (item.action === 'Complete') {
item.label = 'Complete - Custom Name';
}
})
}
// Reorder
if (key === '65debd15c237fb1f55a5f337') {
buttons[key].forEach(item => {
if (item.action === 'UpdateAndComplete') {
item.label = 'Save and Complete - Custom Name - Show Second';
item.order = 1
} else if (item.action === 'Update') {
item.label = 'Fill Button - Custom Name - Show First';
item.order = 0
}
})
}
// Hide
if (key === '65ddb0f9297cc13e01456df1') {
buttons[key] = buttons[key].filter(item => item.action !== 'suspend');
}
}Code Example
// getButtons()
export default class Plugins{
apply() {
return [
{
event: 'bpm.remindCard.render.before',
functional: this.remindCardRenderBefore.bind(this)
}
]
}
remindCardRenderBefore(api) {
let tasksData = api.getTasksData();
console.log(tasksData, 'tasksData');
let buttons = api.getButtons();
console.log(buttons, 'buttons');
for (let key in buttons) {
// Rename
if (key === '65d7266ec26b8d323e19d2e8') {
buttons[key].forEach(item => {
if (item.action === 'suspend') {
item.label = 'Defer Processing - Custom Name';
} else if (item.action === 'Complete') {
item.label = 'Complete - Custom Name';
}
})
}
// Reorder
if (key === '65debd15c237fb1f55a5f337') {
buttons[key].forEach(item => {
if (item.action === 'UpdateAndComplete') {
item.label = 'Save and Complete - Custom Name - Show Second';
item.order = 1
} else if (item.action === 'Update') {
item.label = 'Fill Button - Custom Name - Show First';
item.order = 0
}
})
}
// Hide
if (key === '65ddb0f9297cc13e01456df1') {
buttons[key] = buttons[key].filter(item => item.action !== 'suspend');
}
}
api.customButtons(buttons)
}
}