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.

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.

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.

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

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.

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

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.

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.

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.

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.

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.

See Also