2

I have a LWC user information form is embedded in Visual force page

Using getFieldValue, retrieving the data and displaying in UI. When i add the below code in html file browser got hanged and display the data slowly(means taking 45 sec to display the data).

<div  class="slds-section slds-is-open">
    <lightning-vertical-navigation-item label={fatherName} name="fatherValue">
    </lightning-vertical-navigation-item>
</div>

I removed the code and tried it's loading fast.

Also, one more help, in HTML lightning-record-edit-form record-id="a082w000000YUXxxx" is hardcoded, how to fetch the value in JS file.

HTML

<template>
<lightning-record-edit-form record-id="a082w000000YUXxxx" object-api-name="Enrollment__c" onload={handleonLoad}>

<div  class="slds-section slds-is-open">
                                <lightning-vertical-navigation-item label={fatherName} name="fatherValue">
                                </lightning-vertical-navigation-item>
                            </div>

</lightning-record-edit-form>
 </template>

JS:

import { LightningElement, track, api, wire } from "lwc"; 
import { getRecord, getFieldValue } from "lightning/uiRecordApi";

import FATHER_NAME from "@salesforce/schema/Enrollment__c.Father_First_Name__c";
const fields = [FATHER_NAME];

export default class Enrollment_2 extends LightningElement {
@track enrollmentId;
@track fatherName;
@api recordId;

@track familyName = [
{ fieldAPI: "Enrollment_Type__c", required: true },
{ fieldAPI: "Family_Name__c", required: true },
{ fieldAPI: "Home_Phone__c", required: true }
];

@wire(getRecord, { recordId: "a082w000000YUXxxx", fields })
Enrollment;

handleonLoad() {
this.fatherName = getFieldValue(this.Enrollment.data, FATHER_NAME);
 this.fatherName = "Father - " + this.fatherName;  
  }
}
5
+25

Before diving into my answer, I'd like to point out that getFieldValue isn't loading data so that's not the thing that slows you down. It's just a simple conveniency method that reads a JS object's sub property that matches a particular field name (no network involved, just a tree traversal).

Now, there are several problems with your implementation:

  1. it's loading twice the same record: once with lightning-record-edit-form and twice with the @wire call.
  2. as you pointed out, your record Id is hardcoded. You should use the value of @api recordId like this: <lightning-record-edit-form record-id={recordId}
  3. The handleLoad function shouldn't rely on data coming from this.Enrollment because it's tied to the request originating from lightning-record-edit-form (see point #1). Both request are asynchronous so there's no guarantee that one loads before the other.

Here's what I suggest:

  1. load data only once with lightning-record-edit-form since you need to have a form and get rid of your @wire.
  2. if you also need to access record fields outside of the form, use the form's onload event handler to extract those field values:
handleRecordEditFormLoad(event) {
  const record = event.detail.records[this.recordId];
  this.fatherName = getFieldValue(record, FATHER_NAME));
}
| improve this answer | |
  • I've updated my answer with the complete solution for extracting fields in the onload event handler. – POZ Feb 27 at 11:43
  • Interesting solution, is this best practice? – Kasper Feb 27 at 21:37
  • It's safe to use because lightning-record-edit-form uses the UI API so the data structure is not going to change. – POZ Feb 28 at 15:50
  • Thank you, I'm going to keep this in mind – Kasper Feb 29 at 2:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.