レコードの操作に関する使用上の考慮事項

基本コンポーネントを使用してレコードを操作することで、追加の設定なしで Lightning データサービスを利用できますが、いくつかのカスタム使用事例では考慮が必要です。

次の使用事例について考えてみましょう。

レコードタイプに基づいてレコードフォームを (レコードタイプに基づいた選択リストの値を含めて) 表示するために、レコードタイプ ID を取得する。
レコード送信が正常に完了したことを親コンポーネントに通知するために、カスタムイベントをディスパッチして処理する。

レコードタイプ ID の取得

選択リスト項目は、レコードタイプに基づいて値を表示します。lightning-record-form または lightning-record-edit-form の操作において、オブジェクトに複数のレコードタイプがあり、デフォルトのレコードタイプがない場合は、レコードタイプ ID を指定する必要があります。指定しない場合は、デフォルトのレコードタイプが使用されます。

レコードタイプの情報を取得するには、getObjectInfo ワイヤアダプタを使用します。

例

例: record-type-id 属性の使用

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>

getObjectInfo モジュールと取引先オブジェクトへの参照をインポートします。recordTypeId getter は、レコードタイプ名の Special Account と一致する ID を返します。

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}

recordTypeInfos プロパティは、組織で使用できるレコード ID のマップを返します。

フォームでのカスタムイベントの処理

lightning-record-form、lightning-record-edit-form、lightning-record-view-form の各コンポーネントは、onsubmit、onsuccess、onerror の各属性を介してイベントを処理する機能を備えています。フォームデータをコンテナコンポーネントに渡すには、カスタムイベントを作成します。

c-wrapper というコンテナコンポーネントがあり、フォームは c-account-creator というコンポーネントにあるとします。このコンテナコンポーネントに新しいレコードの ID を渡します。c-wrapper で c-account-creator のインスタンスを作成します。

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

レコードが正常に作成されると、newrecord イベントが lightning-record-form 上の onsuccess ハンドラによってディスパッチされ、さらにこのハンドラは handleNewRecord メソッドをコールしてレコード 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}

c-account-creator では、新たに作成されたレコードの ID を含むメッセージが createStatus プロパティによって表示されます。

submit イベントでは ID は使用できません。success イベントを使用して 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>

handleAccountCreated メソッドは success イベントを処理します。

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}

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。