LWC Load a Record

Load a Record

Loading a record can be accomplished entirely in markup using lightning-record-form and passing in a record Id. If you need a custom layout, use lightning-record-view-form. If you need more customization than the form-based components allow, use a wire adapter like getRecord.

Display a Record Using lightning-record-form

The simplest way to display a record is to use the lightning-record-form. You can display a record in two modes.

view

Loads the form using output fields with inline editing enabled. Editable fields have edit icons. If a user clicks an edit icon, all fields in the form become editable, and the form displays Submit and Cancel buttons.

read-only

Read-only mode loads the form with output fields only. The form doesn’t include edit icons or Submit and Cancel buttons.

This code displays an account record in view mode with the specified fields. Field labels and values are displayed based on your display density setting. View mode is the default when record-id is provided.

<!-- myComponent.html -->
<template>
    <lightning-record-form
        record-id={recordId}
        object-api-name={objectApiName}
        fields={fields}>
    </lightning-record-form>
</template> 

Note To improve performance, specify fields instead of a layout whenever possible. Specify a layout only when you want the administrator, not the component, to control the fields that are provisioned. The component must handle receiving every field that is assigned to the layout for the context user.

Use your own record Id or place the example in an account record page to inherit its record Id.

// myComponent.js
import { LightningElement, api } from 'lwc';
export default class MyComponent extends LightningElement {
    @api recordId;
    @api objectApiName;
    fields = ['AccountId', 'Name', 'Title', 'Phone', 'Email'];
}

Example This example uses the recordFormDynamicContact component from the github.com/trailheadapps/lwc-recipes repo.

Display a Record with a Custom Field Layout Using lightning-record-view-form

To display a record with a custom field layout, use the lightning-record-view-form component. To compose the form fields, use lightning-output-field components. Including individual fields lets you style a custom field layout using the Lightning Design System utility classes, such as the grid system.

<!-- recordViewCustomLayout.html -->
<template>
    <lightning-record-view-form
                record-id={recordId}
                object-api-name="Account">
        <div class="slds-grid">
            <div class="slds-col slds-size_1-of-2">
                <lightning-output-field field-name="Name"></lightning-output-field>
                <lightning-output-field field-name="Phone"></lightning-output-field>
            </div>
            <div class="slds-col slds-size_1-of-2">
                <lightning-output-field field-name="Industry"></lightning-output-field>
                <lightning-output-field field-name="AnnualRevenue"></lightning-output-field>
            </div>
        </div>
    </lightning-record-view-form>
</template>

Use your own record Id or place the example in an account record page to inherit its record Id.

// recordViewCustomLayout.js
import { LightningElement, api } from 'lwc';
export default class MyComponent extends LightningElement{
    // Expose a recordId property.
    @api recordId;
}

Note You can design your form to respect the org’s display density setting, or set the form density to override the display density setting. See Change the Form Display Density.

Display Record Data in a Custom User Interface Using getRecord

We’ve seen how record fields render using lightning-output-field. To render data in a custom user interface, use the getRecord or getRecords wire adapter.

This example uses a base component, lightning-formatted-text, to display an account name.

<!-- recordViewGetRecord.html -->
<template>
    <lightning-record-view-form
            record-id={recordId}
            object-api-name={accountObject}>
        <div class="slds-grid">
            <div class="slds-col slds-size_1-of-2">
                <!-- Other record data here -->
            </div>
            <div class="slds-col slds-size_1-of-2">
                <lightning-formatted-text value={nameValue}
                    class="slds-text-heading_large">
                </lightning-formatted-text>
            </div>
        </div>
    </lightning-record-view-form>
</template>

In the component’s JavaScript code, import references to the Account object and the Account.Name field.

• The getRecord wire adapter loads the Name field for custom rendering in the lightning-formatted-text component instead of the standard lightning-output-field used by lightning-record-view-form.
• The getFieldValue(record, field) function gets the value of the Name field.

// recordViewGetRecord.js
import { LightningElement, api, wire } from 'lwc';
/* Wire adapter to fetch record data */
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';

export default class AccountViewer extends LightningElement {
     /** Id of record to display. */
    @api recordId;

    /* Expose schema objects/fields to the template. */
    accountObject = ACCOUNT_OBJECT;

    /* Load Account.Name for custom rendering */
    @wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD] })
    record;

    /** Get the Account.Name value. */
    get nameValue() {
        return this.record.data ? getFieldValue(this.record.data, NAME_FIELD) : '';
    }
}

Display Data from a Parent Record Using getRecord

To display data from a record and its parent record, use lightning-record-view-form with getRecord, similar to the previous example. Import data from a parent record using the notation object.parentObject.field.

This example uses a base component, lightning-formatted-email, to display the email address of an account record’s owner.

<!-- recordViewGetRecordParent.html -->
<template>
    <lightning-record-view-form
        object-api-name={objectApiName}
        record-id={recordId}>
        <lightning-messages></lightning-messages>
        <lightning-output-field
            field-name={nameField}
        ></lightning-output-field>
       
        <div class="slds-form-element slds-form-element_stacked">
            <span class="slds-form-element__label">Owner Email</span>
            <div class="slds-form-element__control">
                <lightning-formatted-email value={ownerField}>
                </lightning-formatted-email >
            </div>
        </div>
    </lightning-record-view-form>
</template>

The component’s JavaScript code imports references to the Account object and the Account.Owner.Email field.

• The getRecord wire adapter loads the Account.Owner.Email field for custom rendering in the lightning-formatted-email component instead of in the standard lightning-output-field used by lightning-record-view-form.
• The getFieldValue(record, field) function gets the value of the Account.Owner.Email field.

// recordViewGetRecordParent.js
import { LightningElement, api, wire } from 'lwc';

import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import OWNER_EMAIL_FIELD from '@salesforce/schema/Account.Owner.Email';

export default class RecordViewFormParentData extends LightningElement {
    objectApiName = ACCOUNT_OBJECT;
    nameField = NAME_FIELD;

    @api recordId;
    @api objectApiName; 

    /* Load Account.Owner.Email for custom rendering */
    @wire(getRecord, {
        recordId: "$recordId",
        fields: [OWNER_EMAIL_FIELD]
      })
      record;

      /* Get the Account.Owner.Email value. */
      get ownerField() {
        return this.record.data
          ? getFieldValue(this.record.data, OWNER_EMAIL_FIELD)
          : "";
      }
}

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.data_load_record