This hook is triggered before the detail information component of the detail page is rendered. Execute extra business actions before rendering the object detail information component, including but not limited to the following capabilities:

• Field styles
• Show-all-information switch

Parameters

Parameter	Description	Type	Allowed Values	Default
Common parameters	See details	--	--	--

Return Value

Parameter	Description	Type	Allowed Values	Default
fieldComponents	Custom field components (example)	Object	--	--
pluginComponentStyle	Component styles (example)	Object	--	--
showAll	Show all information (example)	Boolean	--	--

Basic Example

Basic Usage:

export default class Plugin {
    apply() {
        return [{
            event: 'detail.form.render.before',
            functional: this.renderBefore.bind(this)
        }]
    }
    renderBefore(context, plugin) {
        return Promise.resolve();
    }
}

Custom Fields

export default class Plugin {
    apply() {
        return [{
            event: 'detail.form.render.before',
            functional: this.renderBefore.bind(this)
        }]
    }
    renderBefore(context, plugin) {
        return Promise.resolve({
            fieldComponents: {
                field_a3xkc__c: {
                    props: ['field', 'data'],
                    render(h) {
                        return (
                            <div>Custom Field</div>
                        );
                    }
                }
            },
        });
    }
}

Component Styles

export default class Plugin {
    apply() {
        return [{
            event: 'detail.form.render.before',
            functional: this.renderBefore.bind(this)
        }]
    }
    renderBefore(context, plugin) {
        return Promise.resolve({
            componentStyle: {
                fieldLabelStyle: "", // field label style
                fieldValueStyle: "", // field value style
                fieldStyle: "" // field style, used for width, spacing, etc.
            }
        });
    }
}

Show All Information

export default class Plugin {
    apply() {
        return [{
            event: 'detail.form.render.before',
            functional: this.renderBefore.bind(this)
        }]
    }
    renderBefore(context, plugin) {
        return Promise.resolve({
            showAll: true, // whether the "show all information" control in the upper-right corner is disabled or enabled; by default it reads the user's last cached state
        });
    }
}