Displaying Records with Base Components

Displaying a record using lightning-record-form

Loading a record can be accomplished entirely in markup using lightning-record-form and passing in a record Id.

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

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

Displaying a record data in a customized way using lightning-record-view-form

If you need a custom layout, use lightning-record-view-formand display a record with a custom field layout - use lightning-output-field.

<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>

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

Edit a Record with Base Components

• The simplest way to create a form that enables you to edit a record is to use lightning-record-form.
• To customize the form layout or preload custom values, use lightning-record-edit-form.

Editing a record with fields from a layout using lightning-record-form

• To edit a record, use the record-id and object-api-name attributes.
• When you provide a record Id, the component uses view mode by default, which displays output fields with edit icons.
• The component provides default submit and error handlers. Errors are automatically displayed at the top of the form.

This example creates a form that lets users update fields from the compact layout on an account record. It displays the fields in a two-column layout.

<template>
    <lightning-record-form
        record-id={recordId}
        object-api-name={objectApiName}
        columns="2"
        mode="edit"
        layout-type="Compact">
    </lightning-record-form>
</template>