This hook is triggered before rendering the related object table on the detail page. It allows you to perform extra actions before rendering, including but not limited to extending columns, scenarios, views, buttons, request parameters, and row-level operations.

Parameters

Parameter	Description	Type	Allowed Values	Default
Common parameters	See details	Object	—	—
targetObjectApiName	Related object apiName	String	—	—

Return Value

Parameter	Description	Type	Default
columnsExtendConfig	Column extension configuration	Object	--
termExtendConfig	Scenario extension configuration	Object	--
viewInfoExtendConfig	View extension configuration	Object	--
actionExtendConfig	Button extension configuration	Object	--
formatRequestParam	Format request parameters for the List API	Function	--
forceTrWrap	Whether list cells are forced to wrap	Boolean	--
buttons	Common buttons at the top-right corner of the table	Object	--
operateBtns	Single-row operation buttons in the table	Array	--

columnsExtendConfig

Parameter	Description	Type	Default
filterColumns	Filter displayed table fields; also affects table settings and filtering	Array	--
render	Custom cell rendering configuration	Object	--
showLookupText	Whether lookup fields only display text. If true, they are not clickable	Boolean	false

columnsExtendConfig.render

Parameter	Description	Type	Default
[ fieldApiName ]	Field render function	Function	--

termExtendConfig

Parameter	Description	Type	Default
default	Default scenario to display; pass the filter scenario api_name	String	--
retain	Scenarios to retain; pass the filter scenario api_name	Array	--

viewInfoExtendConfig

Parameter	Description	Type	Default
disableDetailOnFullClick	Clicking a row does not open the detail page, except for the main-property column	String	--

actionExtendConfig

Parameter	Description	Type	Default
[actionApiName]	Top-right button configuration. Note the exact casing of action	Object	--

actionExtendConfig.

Parameter	Description	Type	Default
parseParam	Format button execution parameters	Function	--

buttons

Parameter	Description	Type	Default
add	Add custom buttons	Array	--
del	Delete specified buttons	Array	--
reset	Reset button names and behavior	Array	--
retain	Retain only specified buttons	Array	--

operateBtns

Parameter	Description	Type	Default
add	Add custom buttons	Array	--
del	Delete specified buttons	Array	--
reset	Reset button names and behavior	Object	--
retain	Retain only specified buttons	Array	--

Basic Examples

Hide a specific column

export default class Plugin {
    apply() {
        return [{
            event: "detail.relatedlist.render.before",
            functional: this.detailListRenderBefore.bind(this)
        }];
    }
    detailListRenderBefore() {
        return Promise.resolve({
            columnsExtendConfig: {
                filterColumns: ['name'], // hide the main-property column
            }
        })
    }
}

Customize the rendering of one column

export default class Plugin {
    apply() {
        return [{
            event: "detail.relatedlist.render.before",
            functional: this.detailListRenderBefore.bind(this)
        }];
    }
    detailListRenderBefore() {
        return Promise.resolve({
            columnsExtendConfig: {
                render: {
                    owner: (value, type, data, format, index, field) => {
                    	return 'Hello, Fxiaoke';
                    }
                }
            }
        })
    }
}

Set a default scenario and retain some scenarios

export default class Plugin {
    apply() {
        return [{
            event: "detail.relatedlist.render.before",
            functional: this.detailListRenderBefore.bind(this)
        }];
    }
    detailListRenderBefore() {
        return Promise.resolve({
            termExtendConfig: {
                default: 'InCharge',
                retain: ['All', 'InCharge']
            }
        })
    }
}

Extend button execution parameters

export default class Plugin {
    apply() {
    	return this.getHooks();
    }

    getHooks() {
        return [{
            event: 'detail.relatedlist.render.before',
            functional: this.detailListRenderBefore.bind(this)
        }];
    }

    detailListRenderBefore(context, res) {
        return {
            actionExtendConfig: {
                add: {
                    parseParam: (data) => ({
                        record_type: 'default__c',
                        success:function() {
                            res.bizApi && res.bizApi.refresh();
                        }
                    })
                }
            }
        };
    }
}

Customize top-right table buttons

export default class Plugin {
    apply() {
        return [{
            event: 'detail.relatedlist.render.before',
            functional: this.detailListRenderBefore.bind(this)
        }]
    }
    detailListRenderBefore(plugin, context) {
        return Promise.resolve({
            buttons: {
                del: ['IntelligentForm'],
                add: [{
                    action: 'cancel',
                    label: 'Cancel',
                    callback(context) {
                        alert('Cancel');
                    }
                }],
                reset: [{
                    action: 'BulkRelate',
                    label: 'Related Plugin'
                }]
            }
        })
    }
}

Customize single-row operation buttons

export default class Plugin {
    apply() {
        return [{
            event: 'detail.relatedlist.render.before',
            functional: this.detailListRenderBefore.bind(this)
        }]
    }
    detailListRenderBefore(plugin, context) {
        return Promise.resolve({
            operateBtns: [
                function(){
                    return {
                        del: ['plugin_btn2__c'],
                        add: [{
                            action: 'plugin_btn2',
                            label: 'Plugin - Single Row Button 2',
                            callback(context) {
                                console.log(arguments, 'Cancel11-operateBtns');
                                alert('Cancel11');
                            }
                        }],
                        reset: {
                            plugin_btn__c: {
                                action: "plugin_btn__c",
                                label: 'Plugin - Single Row Button'
                            }
                    }
                }
            ]
        })
    }
}

FAQ

Q: Why does the second page not update when request parameters are modified through formatListDataAsync?

A: Check whether limit, offset, or similar paging parameters are being used inside formatListDataAsync. If so, remove them.