GM - Enhanced Record Layout

(gmpkg/recordLayoutLWC)

Documentation

GM - Enhanced Record Layout component displays and edits a record using a JSON layout configuration, the same one used by GM - Record Layout and GM - Record Layout (LWC). It is a native Lightning Web Component: it can be placed on record, app, home and Experience Cloud pages, on desktop and on phone, without an Aura wrapper.

On top of the layout JSON, it supports layout actions, validation rules, an Apex validation action and a custom metadata configuration. See Enhanced Record Layout for the walkthrough.

Specification

Property	Description
Record Id	Id of the record to display. Leave empty on a record page.
Layout Config	Developer Name of a Record Layout custom metadata record. When set, the values of the record replace the properties below, including the empty ones.
Object Name	API name of the object to display.
Record Id Field	Field of the page record holding the Id of the record to display. Id when the component is placed on the record itself.
Record Layout	JSON layout: sections, rows, visibility, read-only and coloring rules, validate rules and rulesMode.
Layout Actions	JSON array of layout actions displayed in the header.
Record Actions	JSON array of record actions displayed in the record toolbar.
Show Actions as Buttons	Display the record actions as buttons instead of icons.
Custom Visible Actions	Number of record actions displayed before the overflow menu.
Show Border	Display the card border.

Layout Actions

Key	Description
name	Unique name of the action.
label	Button label.
icon	Button icon, e.g. utility:check.
mode	view or edit. Omit to display the action in both modes.
type	layout (default) applies the command to the layout. apex runs the Apex validator.
stateful	layout actions are toggles by default. Set to false for a one-shot action.
command	layout actions only. { "id", "target": { "fields" | "sections" | "formula" }, "changes": { "hidden", "readOnly", "highlighted", "backgroundColor", "style" } }
apexClass	apex actions only. Name of the Callable class.
params	apex actions only. JSON object passed to the class.
successMessage	apex actions only. Toast displayed when the class returns no error.

{
    "name": "validateAccount",
    "label": "Validate",
    "icon": "utility:check",
    "type": "apex",
    "mode": "edit",
    "apexClass": "AccountLayoutValidator",
    "params": { "strict": true },
    "successMessage": "Account looks good"
}

Apex Validator

The class referenced by apexClass implements Callable. It is invoked with the action validate and the following arguments:

Argument	Type	Description
record	SObject	The record with the values currently displayed, saved or not.
objectName	String	API name of the object.
params	Map<String, Object>	The params of the layout action.

It returns a List<gmpkg.SaveHookManager.SaveHookResult>. A result with fields is displayed under each field, a result without fields is displayed as a record-level error, an empty list displays the successMessage.

global with sharing class AccountLayoutValidator implements Callable {
    global Object call(String action, Map<String, Object> args) {
        Account acc = (Account) args.get('record');
        List<gmpkg.SaveHookManager.SaveHookResult> results = new List<gmpkg.SaveHookManager.SaveHookResult>();

        if (acc.AccountSource == 'Web' && String.isBlank(acc.Phone)) {
            // Field-level: statusCode, message, fields
            results.add(
                new gmpkg.SaveHookManager.SaveHookResult(
                    'FIELD_CUSTOM_VALIDATION_EXCEPTION',
                    'Web accounts must have a phone number.',
                    new List<String>{ 'Phone' }
                )
            );
        }

        if (acc.Industry == 'Banking' && String.isBlank(acc.Description)) {
            // Record-level: statusCode, message
            results.add(
                new gmpkg.SaveHookManager.SaveHookResult(
                    'CUSTOM_VALIDATION_EXCEPTION',
                    'Banking accounts require a description.'
                )
            );
        }

        return results;
    }
}

Record Layout Metadata

Custom metadata type Record Layout (gmpkg__Record_Layout__mdt). Set Layout Config to the Record Layout Name of a record to load the configuration from it.

Field	Component Property
Sobject	Object Name
Record Id Field	Record Id Field
Record Layout	Record Layout
Layout Actions	Layout Actions
Record Actions	Record Actions
Button Actions	Show Actions as Buttons
Visible Actions	Custom Visible Actions
Show Border	Show Border

When Layout Config is set, every field of the metadata record replaces its property, including the empty ones.

API Reference

recordLayoutLWC.js-meta.xml

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>65.0</apiVersion>
    <masterLabel>GM - Enhanced Record Layout</masterLabel>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage,lightning__AppPage,lightning__HomePage">
            <property name="recordId" type="String" label="Record Id" />
            <property name="configName" type="String" label="Layout Config"
                      description="Developer Name of a Record Layout custom metadata record." />
            <property name="targetObjName" type="String" label="Object Name" />
            <property name="recordIdField" type="String" label="Record Id Field" />
            <property name="recordLayout" type="String" label="Record Layout"
                      description="JSON Record Layout, including required, validate, and rulesMode rules" />
            <property name="layoutActions" type="String" label="Layout Actions"
                      description="Optional JSON layout actions" />
            <property name="recordActions" type="String" label="Record Actions"
                      description="Optional JSON record actions shown in the record toolbar" />
            <property name="buttonActions" type="Boolean" label="Show Actions as Buttons"
                      description="Use buttons for actions instead of icons" />
            <property name="visibleActions" type="Integer" label="Custom Visible Actions"
                      description="# of visible custom actions" />
            <property name="showBorder" type="Boolean" label="Show Border" />
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>