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

functional registers the hook callback. The host passes the following parameters:

Parameter	Description	Type	Allowed Values	Default
context	Event context containing common parameters	Object	--	--
plugin	Current plugin runtime information; business logic normally does not need it	Object	--	--

Return Value

Parameter	Description	Type	Allowed Values	Default
fieldComponents	Custom field components (example)	Object	--	{}
componentStyle	Component styles (example)	Object	--	{}
showAll	Whether all information is initially shown (example)	Boolean	--	--

A direct throw from a synchronous callback is caught and logged by the PWC adapter. The current Detail wrapper does not handle a rejected Promise, so catch and report asynchronous failures inside the hook and resolve a usable result.

fieldComponents[fieldApiName]

fieldComponents is keyed by field API name. The host passes field, the current field describe, and data, the complete detail data, as component props.

componentStyle

Parameter	Description	Type	Default
fieldLabelStyle	CSS string for the field label area	String	''
fieldValueStyle	CSS string for the field value area	String	''
fieldStyle	CSS string for the field container	String	''

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 // Used as the initial value only when no local user state is cached.
        });
    }
}