approval.content.render.after

About 1217 wordsAbout 4 min

2025-12-16

Description: This event is called after approval content is rendered.

This event is used to perform additional actions after approval content is rendered, including but not limited to: 1. retrieving approval content data, 2. customizing the approval content instance name area, 3. customizing the triggered approval operation content area, 4. customizing field change information, 5. customizing detail-object change information, and 6. customizing button-triggered configuration form content.

Parameters

Parameter	Description	Type
getContentData	Gets approval content data (example)	Function
setTitle	Customizes the approval content instance name area (example)	Function
setOperationMsg	Customizes the triggered approval operation content area (example)	Function
setFieldChange	Customizes field change information (example)	Function
setSubObjectChange	Customizes detail-object change information (example)	Function
setButtonDescribe	Customizes button-triggered configuration form content (example)	Function
callViewEditRecord	Triggers the "view edit records" event (example)	Function
callDetailChangeRecord	Triggers the "view detail-object change records" event (example)	Function
setFlowCustomArea	Sets the flow information custom area (example)	Function
setTaskCustomArea	Sets the task information custom area (example)	Function

Examples

1. getContentData

Feature Description

Gets data related to the current approval content. You can use this data to make decisions, run different business logic, and customize displayed content.

Parameters

None.

Return Value

Parameter	Description	Type
workflowName	Instance name	String
triggerName	Triggered operation	String
entityName	Object name	String
objectName	Data name	String
changeDetail	Field change data	Object
instanceDescribe	Button configuration form content	Object
tasks	Node task data, including the task list and task status information (example)	Array
...	...	...

Parameter Code Example

None.

Code Example

// getContentData()
export default class Plugin {
    apply() {
        return [
            {
                event: 'approval.content.render.after',
                functional: this.approvalContentRenderAfter.bind(this)
            }
        ]
    }

    approvalContentRenderAfter(api) {
        let contentData = api.getContentData();
        console.log(contentData);
    }
}

2. setTitle

Feature Description

Customizes the approval content instance name area, such as changing text or styles.

Parameters

Parameter	Description	Type
DOM object / HTML string	Custom instance name content	Object/String

Return Value

None.

Parameter Code Example

// Use an HTML string as the parameter
api.setTitle('Custom title text')

Code Example

// setTitle()
export default class Plugin {
    apply() {
        return [{
            event: "approval.content.render.after",
            functional: this.approvalContentRenderAfter.bind(this)
        }]
    }

    approvalContentRenderAfter(api) {
        api.setTitle('Custom title text');
    }
}

3. setOperationMsg

Feature Description

Customizes the triggered approval operation content area, such as setting text content or styles.

Parameters

Parameter	Description	Type
DOM object / HTML string	Custom text content and styles	Object/String

Return Value

None.

Parameter Code Example

// Use an HTML string as the parameter
api.setOperationMsg('Custom operation message')

Code Example

// setOperationMsg()
export default class Plugin {
    apply() {
        return [{
            event: "approval.content.render.after",
            functional: this.approvalContentRenderAfter.bind(this)
        }]
    }

    approvalContentRenderAfter(api) {
        api.setOperationMsg('Custom operation message');
    }
}

4. setFieldChange

Feature Description

After retrieving field change data, customize which fields are displayed and how field change information is shown.

Parameters

Parameter	Description	Type
DOM object / HTML string	Custom display content	Object/String

Return Value

None.

Parameter Code Example

See the code example.

Code Example

// setFieldChange()
export default class Plugin {
    apply() {
        return [{
            event: "approval.content.render.after",
            functional: this.approvalContentRenderAfter.bind(this)
        }]
    }

    approvalContentRenderAfter(api) {
        let data = api.getContentData();
        let fieldChangeDemo = FxUI.create({
            template:`<div>
                  <div v-for="filed in list">
                    <span>{{filed.fieldDescribe.label}}</span>
                    <span>{{filed.oldValue}}</span>
                    <span>{{filed.newValue}}</span>
                  </div>
                </div>`,
            data() {
                return {
                    list:data.changeDetail.fieldChangeDetailList || [],// field change data
                }
            },
        })
        api.setFieldChange(fieldChangeDemo.$el)
    }
}

5. setSubObjectChange

Feature Description

After retrieving detail-object change content, customize how this area is displayed.

Parameters

Parameter	Description	Type
DOM object / HTML string	Custom display content	Object/String

Return Value

None.

Parameter Code Example

// Use an HTML string as the parameter
api.setSubObjectChange('This is the position for detail-object change data. Display it however you need.')

Code Example

// setSubObjectChange()
export default class Plugin {
    apply() {
        return [{
            event: "approval.content.render.after",
            functional: this.approvalContentRenderAfter.bind(this)
        }]
    }

    approvalContentRenderAfter(api) {
        api.setSubObjectChange('This is the position for detail-object change data. Display it however you need.')
    }
}

6. setButtonDescribe

Feature Description

Customizes the button-triggered configuration form content.

Parameters

Parameter	Description	Type
DOM object / HTML string	Custom content	Object/String

Return Value

None.

Parameter Code Example

// Use an HTML string as the parameter
api.setButtonDescribe('Custom button configuration form content')

Code Example

// setButtonDescribe()
import test from './test.js'
export default class Plugin {
    apply() {
        return [{
            event: "approval.content.render.after",
            functional: this.approvalContentRenderAfter.bind(this)
        }]
    }

    approvalContentRenderAfter(api) {
        api.setButtonDescribe('Custom button configuration form content')
    }
}

7. callViewEditRecord

Feature Description

Triggers the "view edit records" event.

Parameters

Parameter	Description	Type
instance	The data returned by `api.getContentData()`. Pass it through directly.	Object

Return Value

None.

Parameter Code Example

let data = api.getContentData();
api.callViewEditRecord(data)

Code Example

export default class Plugin{
  apply(){
    return [{
      event: "approval.content.render.after",
      functional: this.approvalContentRenderAfter.bind(this)
    }]
  }
  approvalContentRenderAfter(api){
    console.log(api.getContentData(), 'getContentData')
    let data = api.getContentData();
    let titleDom = FxUI.create({
            template:`<div>
                  I am testing a custom title area that triggers the view edit records action.
                  <fx-button
                    class="info-btn"
                    size="mini"
                    plain
                    @click.stop="ViewInstanceForm">
                    View Edit Records
                  </fx-button>
                </div>`,
            methods:{
              ViewInstanceForm(){
                api.callViewEditRecord(data)
              }
            }
        })
    api.setTitle(titleDom.$el)
  }
}

8. callDetailChangeRecord

Feature Description

Triggers the "view detail-object change records" event.

Parameters

None.

Return Value

None.

Parameter Code Example

api.callDetailChangeRecord()

Code Example

export default class Plugin{
  apply(){
    return [{
      event: "approval.content.render.after",
      functional: this.approvalContentRenderAfter.bind(this)
    }]
  }
  approvalContentRenderAfter(api){
    console.log(api.getContentData(), 'getContentData')
    let data = api.getContentData();
    let subObjectChangeDom = FxUI.create({
            template:`<div>
                  I am testing a custom detail-object area that triggers the view detail-object change records action.
                  <fx-button
                    class="info-btn"
                    size="mini"
                    plain
                    @click.stop="showMasterDetail">
                    View Detail-Object Change Records
                  </fx-button>
                </div>`,
            methods:{
              showMasterDetail(){
                api.callDetailChangeRecord()
              }
            }
       })
    api.setSubObjectChange(subObjectChangeDom.$el)
  }
}

9. setFlowCustomArea

Feature Description

Customizes the display content below flow information. You can use the tasks data returned by api.getContentData() to determine node status and display custom content as needed.

tasks data:

Parameter	Description	Type
candidateIds	List of task pending-handler personnel IDs	Array
state	Task status, such as `in_progress`	String
name	Task name	String
tasks	Subtask list under a parallel node	Array

Parameters

Parameter	Description	Type
DOM object / HTML string	Custom display content	Object/String

// setFlowCustomArea()
export default class Plugin {
    apply() {
        return [{
            event: "approval.content.render.after",
            functional: this.approvalContentRenderAfter.bind(this)
        }]
    }

    approvalContentRenderAfter(api) {
        let flowCustomAreaDom = FxUI.create({
            template: `<div>
                  <fx-button size="mini" type="primary">Flow information custom area configuration button</fx-button>
                </div>`,
        });
        api.setFlowCustomArea(flowCustomAreaDom.$el)
    }
}

10. setTaskCustomArea

Feature Description

Customizes the display area below task information. You can use the tasks data returned by api.getContentData() to determine node status and display custom content as needed.

tasks data:

Parameter	Description	Type
candidateIds	List of task pending-handler personnel IDs	Array
state	Task status, such as `in_progress`	String
name	Task name	String
tasks	Subtask list under a parallel node	Array

Parameters

Parameter	Description	Type
DOM object / HTML string	Custom display content	Object/String

// setTaskCustomArea()
import test from './test.js'

export default class Plugin {
    apply() {
        return [{
            event: "approval.content.render.after",
            functional: this.approvalContentRenderAfter.bind(this)
        }]
    }

    approvalContentRenderAfter(api) {
        // Approval content data
        let contentData = api.getContentData();
        // After finding the matching task, set the custom area.
        // Example: when the task is in progress, assigned to the current user, and named "Single-person approval",
        // display content in the task information custom area.
        let currentEmployeeId = FxUI.organization.getCurrentEmployee().id;
        let matched = contentData.tasks.some(task =>
            task.state === "in_progress" &&
            task.name === "Single-person approval" &&
            task.candidateIds.includes(String(currentEmployeeId))
        );
        if (matched) {
            let taskCustomAreaDom = FxUI.create({
                template: `<div>
                    <fx-button size="mini" type="primary">Task information custom area configuration button</fx-button>
                    </div>`,
            });
            api.setTaskCustomArea(taskCustomAreaDom.$el);
        }
    }
}

bizApi

dataGetter

dataUpdater

bizApi

dataGetter

bizApi

dataGetter

approval.content.render.after