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 theName
field for custom rendering in thelightning-formatted-text
component instead of the standardlightning-output-field
used bylightning-record-view-form
. - The
getFieldValue(record, field)
function gets the value of theName
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 theAccount.Owner.Email
field for custom rendering in thelightning-formatted-email
component instead of in the standardlightning-output-field
used bylightning-record-view-form
. - The
getFieldValue(record, field)
function gets the value of theAccount.Owner.Email
field.
See Also