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)
    }
}