Fields not appearing in lightning-record-view-form's payload if not included in page layout

Question

I'm using a lightning-record-view-form in my component to display some record's fields, but I found out that if there is a field not included in the record page layout then it's not appearing in form's onload event payload.

The problem is that the bussiness case is not letting me either include such fields in the layouts or switch to custom forms and apex controllers.

Does anyone have an idea how to work this around or basically what I need to do to make these fields appear in the payload without adding them to the layout?

Answer 1

Either of the following 2 workarounds should solve your problem.

Option 1:

In the component, (within the lightning-record-* HTML) include the field (that's not a part of the object's page layout) inside a conditional template using lightning-output-field

<template if:true={showCustomField}>
  <lightning-output-field field-name="<custom field api name here>"></lightning-output-field>
</template> 

In the JS file, declare a boolean with default value as true (this will be used in the template conditional logic of HTML file). If you don't want to display the field in the component, you can toggle it in the load event handler of the record view form. If you examine the payload in the load handler (see the console.log in code snippet below), you'll find the field value included as a part of the payload.

showCustomField = true;

// Event handler wired to the load event of record view form
loadHandler(event){
    console.log(JSON.parse(JSON.stringify(e.detail.records[this.recordId].fields)));
    this.showCustomField = false;
}

Option 2:

In the JS file,

• include LDS & wire service to get the record data
• use getter to fetch the value of the field (the one that is not included in the page layout) in the load event handler.

This would mean an extra server call (the one invoked using wire service, in addition to call invoked implicitly by lightning-record-* component) to get specific fields that you need. Sample code snippet is given below using Account object. The wire service executes before loadHandler and hence, you will have the required fields upfront. Now, inside the loadHandler, you can use the getter to access the field values. Since, you have both the payload and additional field info during the execution of the load event handler, you should be able to write code to implement anything you want. Note that this snippet gives only the relevant code and you should include it (or tweak it) appropriately in your component. See inline comments for additional explanation.

import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
// Following line is import of the field that is not included in the page layout. Edit this line of code appropriately
import CUSTOMFIELD_FIELD from '@salesforce/schema/Account.<Replace API Name of the Custom Field here>';

---

@api recordId;
@api objectApiName;

objectApiName = ACCOUNT_OBJECT;

@wire(getRecord, { recordId: "$recordId", fields: [CUSTOMFIELD_FIELD]})
record;

get customField() {
    return this.record.data ? getFieldValue(this.record.data, CUSTOMFIELD_FIELD): "";
}

// Event handler wired to the load event of record view form
loadHandler(event){
    // lightning data service is implicitly used to fetch the required details for the record view form. 
    // Use event.detail to get all that you need.
    
    // Using getter, fetch the value of required fields that were not found in event.detail.
    console.log(this.customField);
}