Usage Considerations for Working with Records

Working with records using base components make Lightning Data Service available to you without additional configuration, but there are a few custom use cases to consider.

Consider the following use cases.

To display a record form based on a record type, which includes picklist values based on the record type, get the record type Id.
To notify a parent component about a successful record submission, dispatch and handle a custom event.

Get Record Type Id

Picklist fields display values according to your record types. When working with lightning-record-form or lightning-record-edit-form, you must provide a record type Id if you have multiple record types on an object and you don’t have a default record type. Otherwise, the default record type Id is used.

To retrieve record type information, use the getObjectInfo wire adapter.

Example: Use the record-type-id Attribute

Display a record create form based on a record type by providing the record-type-id attribute. This example shows a form that you can place on an account record page. The form displays fields, which include a picklist with values based on the given record type Id.

1<template>
2  <lightning-card title="Record Form with Record Type" icon-name="standard:account">
3    <div lwc:if={objectInfo.data} class="slds-m-around_medium">
4      <lightning-record-form
5        object-api-name={objectApiName}
6        record-type-id={recordTypeId}
7        fields={fields}
8      >
9      </lightning-record-form>
10    </div>
11  </lightning-card>
12</template>

Import the getObjectInfo module and a reference to the account object. The recordTypeId getter returns the Id that matches the record type name Special Account.

1import { LightningElement, api, wire, track } from "lwc";
2import { getObjectInfo } from "lightning/uiObjectInfoApi";
3import ACCOUNT_OBJECT from "@salesforce/schema/Account";
4import NAME_FIELD from "@salesforce/schema/Account.Name";
5import PHONE_FIELD from "@salesforce/schema/Account.Phone";
6import INDUSTRY_FIELD from "@salesforce/schema/Account.Industry";
7
8export default class RecordFormWithRecordType extends LightningElement {
9  // Flexipage provides recordId and objectApiName
10  @api recordId;
11  @api objectApiName;
12
13  @track objectInfo;
14
15  // Define fields to display in form
16  // Industry field is a picklist
17  fields = [NAME_FIELD, PHONE_FIELD, INDUSTRY_FIELD];
18
19  @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
20  objectInfo;
21
22  get recordTypeId() {
23    const rtis = this.objectInfo.data.recordTypeInfos;
24    return Object.keys(rtis).find((rti) => rtis[rti].name === "Special Account");
25  }
26}

The recordTypeInfos property returns a map of record type Ids that are available in your org.

Handle a Custom Event on a Form

The lightning-record-form, lightning-record-edit-form, and lightning-record-view-form components come with event handling via onsubmit, onsuccess, and onerror attributes. To pass your form data to the container component, create a custom event.

Let’s say you have a container component c-wrapper, and your form is in the component c-account-creator. Let’s pass the Id of the new record to the container component. In c-wrapper, create an instance of c-account-creator.

1<!-- wrapper.html -->
2<template>
3  <c-account-creator onnewrecord={handleNewRecord}></c-account-creator>
4</template>

When the record is created successfully, the newrecord event is dispatched by the onsuccess handler on lightning-record-form, which then calls the handleNewRecord method with the record Id.

1// wrapper.js
2import { LightningElement } from "lwc";
3
4export default class Wrapper extends LightningElement {
5  recordId;
6
7  /**
8   * Handles the new record event.
9   */
10  handleNewRecord(evt) {
11    const recordId = evt.detail.data.id;
12    this.recordId = recordId;
13  }
14}

In c-account-creator, the createStatus property displays a message with the Id of the newly created record.

The Id is not available on the submit event. Use the success event to return the Id.

Note

1<!-- c-account-creator -->
2<template>
3  <lightning-record-form
4    object-api-name={accountObject}
5    fields={accountFields}
6    mode="edit"
7    onsuccess={handleAccountCreated}
8  >
9  </lightning-record-form>
10  <span class="slds-m-around_small status">{createStatus}</span>
11</template>

The handleAccountCreated method handles the success event.

1import { LightningElement } from "lwc";
2import ACCOUNT_OBJECT from "@salesforce/schema/Account";
3import NAME_FIELD from "@salesforce/schema/Account.Name";
4import WEBSITE_FIELD from "@salesforce/schema/Account.Website";
5
6/**
7 * Creates Account records.
8 */
9export default class AccountCreator extends LightningElement {
10  /** Status message when creating an Account. */
11  createStatus = "";
12
13  accountObject = ACCOUNT_OBJECT;
14
15  accountFields = [NAME_FIELD, WEBSITE_FIELD];
16
17  /** Handles successful Account creation. */
18  handleAccountCreated(evt) {
19    this.createStatus = `Account record created. Id is ${evt.detail.id}.`;
20
21    const event = new CustomEvent("newrecord", {
22      detail: { data: evt.detail },
23    });
24    this.dispatchEvent(event);
25  }
26}

Override Standard Actions

To replace standard actions like New, Edit, View, Clone, or List buttons on object pages (similar to standard action overrides in Visualforce), wrap your Lightning web component in an Aura component that implements the lightning:actionOverride interface.

For an example of overriding the New action to prepopulate default field values, see Handle Default Field Values Using an Override Action.

To learn about which experiences support Lightning web components directly, see Supported Experiences.

Quick Actions are different from action overrides. Quick Actions add custom buttons to page layouts, while action overrides replace standard platform buttons. To add custom actions with Lightning web components, see Use Quick Actions.

Note