flow.approval.detail.approval.content.render.before

Description: This Hook is triggered before the approval detail content is rendered.

1. customComponten

Feature Description

Use this method to customize the approval content area and sub-area components. In approval flows triggered by edit actions, approvalRecordApi can be used to navigate to edit records or detail-object change records.

Parameters

Parameter	Description	Type
options	This parameter contains the approval content area data in controlArg	Object

Return Value

Parameter	Description	Type	Available Values	Default
objectDetailCardEnable	Whether the custom component configured in customComponten should also take effect in the approval card on the object detail page	Boolean	true/false	false
customComponten	The configured custom approval content component	Object		-

Parameter Code Example

See the code example below.

Code Example

event: "flow.approval.detail.approval.content.render.before",
functional: async function (context, options) {
    console.error("flow.approval.detail.approval.content.render.before  start")
    console.error(context)
    console.error(options)
    console.error("flow.approval.detail.approval.content.render.before   end")
    return Promise.resolve({
        // Whether the custom components below should also take effect in the approval card on the object detail page
        objectDetailCardEnable: true,
        customComponten: {
            'approval-content-operation-com': {
                resource: "custom_plugin", // required, fixed value
                prop: { // custom properties of the plugin field component
                    test: 1,
                    pluginInfo: pluginParam.describe, // fixed parameter
                    comInfo: { // required, plugin component information
                        name: "operation-com", // required, the custom component name, mapped to the corresponding key under components in the root config.json
                        prop: options, // custom component properties, passed through to customProp in the custom component; format is unrestricted
                    },
                }
            },
            'approval-content-instance-title-com': {
                resource: "custom_plugin", // required, fixed value
                prop: { // custom properties of the plugin field component
                    test: 1,
                    pluginInfo: pluginParam.describe, // fixed parameter
                    comInfo: { // required, plugin component information
                        name: "instance-title", // required, the custom component name, mapped to the corresponding key under components in the root config.json
                        prop: options, // custom component properties, passed through to customProp in the custom component; format is unrestricted
                    },
                }
            },
            "flow-custom-area": {
                resource: "custom_plugin", // required, fixed value
                prop: { // custom properties of the plugin field component
                    test: 1,
                    pluginInfo: pluginParam.describe, // fixed parameter
                    comInfo: { // required, plugin component information
                        name: "test-header-com", // required, the custom component name, mapped to the corresponding key under components in the root config.json
                        prop: options, // custom component properties, passed through to customProp in the custom component; format is unrestricted
                    },
                }
            },
            "task-custom-area": {
                resource: "custom_plugin", // required, fixed value
                prop: { // custom properties of the plugin field component
                    test: 1,
                    pluginInfo: pluginParam.describe, // fixed parameter
                    comInfo: { // required, plugin component information
                        name: "test-header-com", // required, the custom component name, mapped to the corresponding key under components in the root config.json
                        prop: options, // custom component properties, passed through to customProp in the custom component; format is unrestricted
                    },
                }
            },
        },
    });
}

Notes

Area descriptions:

return Promise.resolve({
    // Whether the custom components below should also take effect in the approval card on the object detail page
    objectDetailCardEnable: true,
    customComponten: {
        // change-detail: change information. This component replaces the entire change area, including the content and the row for viewing change information.
        // change-detail-changeinfo: the row for viewing detail-object change information
        // change-detail-content: change information form
        // button-param: button parameter form
        // approval-form: approval form
        // approval-related-form: detail-object information (detail-object name). Effective only on approval detail pages.
        // approval-content-instance-title-com: instance name
        // approval-content-operation-com: triggered operation. Effective only on approval detail pages.
        // flow-custom-area: flow information custom area
        // task-custom-area: task information custom area
    }
})

Edit record capabilities:

let controlArg = options.controlArg;
let approvalRecordApi = options.approvalRecordApi;

approvalRecordApi.callViewEditRecord({
    apiName: 'AccountObj',
    objectId: 'xxx',
    otherBizIds: 'instanceId',
    customCreateTime: '2026-04-17 10:00:00',
});

approvalRecordApi.callDetailChangeRecord({
    masterApiName: 'AccountObj',
    masterDataId: 'xxx',
    instanceId: 'instanceId',
    hasPermissionForData: true,
    detailObjectList: controlArg.changeDetail.detailObjectList,
});

1. approvalRecordApi.callViewEditRecord is used to navigate to edit records.
2. approvalRecordApi.callDetailChangeRecord is used to navigate to detail-object change records.