レコードの編集

レコードを編集できるフォームを作成するための最も簡単な方法は、lightning-record-form を使用することです。フォームのレイアウトをカスタマイズしたり、カスタマイズ値を事前に読み込んだりするには、lightning-record-edit-form を使用します。

これらのコンポーネントよりも高い柔軟性が必要な場合は、「レコードを作成および編集するカスタム UI の作成」を参照してください。

Tip

lightning-record-form を使用したレイアウトでのレコード項目の編集

レコードを編集するには、record-id および object-api-name 属性を使用します。レコード ID を指定した場合、コンポーネントではデフォルトでビューモードが使用され、出力項目に編集アイコンが表示されます。編集アイコンをクリックすると、すべての更新可能な項目が編集可能になります。編集可能なフォームには、レコードを更新するための [保存] ボタンと、変更内容を破棄するための [キャンセル] ボタンがあります。

コンポーネントには、デフォルトの送信およびエラーハンドラがあります。エラーは、自動的にリストの最上部に表示されます。

次の例は、コンパクトレイアウトで取引先レコードの項目を更新できるようにしています。項目は 2 列レイアウトで表示されます。

1<template>
2  <lightning-record-form
3    record-id={recordId}
4    object-api-name={objectApiName}
5    columns="2"
6    mode="edit"
7    layout-type="Compact"
8  >
9  </lightning-record-form>
10</template>

パフォーマンスが向上するように、できる限りレイアウトではなく項目を指定します。プロビジョニングされた項目をコンポーネントではなくシステム管理者が制御する場合にのみレイアウトを指定します。コンテキストユーザのレイアウトに割り当てられているすべての項目の受信をコンポーネントで制御する必要があります。

Note

次の例をレコードページに配置することで、record-id プロパティと object-api-name プロパティを継承できます。

1import { LightningElement, api } from "lwc";
2export default class MyComponent extends LightningElement {
3  @api recordId;
4  @api objectApiName;
5}

カスタムイベントを使用することで、送信の成功または失敗時にトーストを表示するなど、デフォルトのフォーム動作を上書きできます。詳細は、lightning-record-form リファレンスドキュメントを参照してください。

lightning-record-form を使用した特定のレコード項目の編集

項目名の配列を指定するか、または項目への参照をインポートすることで、編集可能フォームに表示する項目を指定できます。

文字列を使用してオブジェクトや項目を渡しても、コンパイル時の検証は実行されません。項目の正当性は実行時までわかりません。@salesforce/schema からオブジェクトや項目への参照をインポートすることをお勧めします。

Note

次の例では、github.com/trailheadapps/lwc-recipes リポジトリにある recordFormStaticContact コンポーネントを使用しています。静的なスキーマ定義を使用して、レコードの編集可能フォームを表示します。

1<template>
2  <lightning-record-form
3    object-api-name={objectApiName}
4    record-id={recordId}
5    fields={fields}
6  ></lightning-record-form>
7</template>

JavaScript ファイルで項目参照をインポートします。

1import { LightningElement, api } from "lwc";
2
3import ACCOUNT_FIELD from "@salesforce/schema/Contact.AccountId";
4import NAME_FIELD from "@salesforce/schema/Contact.Name";
5import TITLE_FIELD from "@salesforce/schema/Contact.Title";
6import PHONE_FIELD from "@salesforce/schema/Contact.Phone";
7import EMAIL_FIELD from "@salesforce/schema/Contact.Email";
8
9export default class RecordFormStaticContact extends LightningElement {
10  // Flexipage provides recordId and objectApiName
11  @api recordId;
12  @api objectApiName;
13
14  fields = [ACCOUNT_FIELD, NAME_FIELD, TITLE_FIELD, PHONE_FIELD, EMAIL_FIELD];
15}

lightning-record-edit-form を使用したカスタムレイアウトを持つレコードの編集

フォーム項目のカスタムレイアウトを指定するには、lightning-record-edit-form コンポーネントを使用します。レコード項目種別に基づいて入力コントロールを表示する lightning-input-field に項目を渡します。次の例では、カスタムレイアウトを使用していくつかの項目を表示しています。次のコンポーネントの例を取引先責任者レコードページに追加することで、record-id プロパティと object-api-name プロパティを継承できます。

1<template>
2    <lightning-record-edit-form
3        object-api-name={objectApiName}
4        record-id={recordId}>
5    <lightning-messages></lightning-messages>
6    <div class="slds-grid">
7        <div class="slds-col slds-size_1-of-2">
8            <lightning-input-field field-name="Name"></lightning-input-field>
9            <lightning-input-field field-name="Title"></lightning-input-field>
10        </div>
11        <div class="slds-col slds-size_1-of-2">
12            <lightning-input-field field-name="Phone"></lightning-input-field>
13            <lightning-input-field field-name="Email"></lightning-input-field>
14        </div>
15    </div>
16    <div class="slds-m-top_medium">
17        <lightning-button type="submit" variant="brand" label="Edit Contact"></lightning-button>
18    </div>
19</template>

lightning-record-edit-form は、フォームの送信とエラーを自動的に処理します。エラーメッセージを自動的にフォーム項目の上または下に表示するには、lightning-messages を lightning-input-field コンポーネントの前または後に追加します。

元の項目値へのフォームのリセット

lightning-record-edit-form には、lightning-record-form にあるような [キャンセル] ボタンや [保存] ボタンはありません。項目値を元に戻すための [キャンセル] ボタンを作成するには、reset() メソッドをコールする lightning-button コンポーネントを使用します。record-id に実際のレコード ID を指定するか、またはこの例を取引先責任者レコードページに配置することで record-id プロパティを継承します。

1<template>
2  <lightning-record-edit-form record-id={recordId} object-api-name="Contact">
3    <lightning-messages></lightning-messages>
4    <lightning-input-field field-name="FirstName"></lightning-input-field>
5    <lightning-input-field field-name="LastName"></lightning-input-field>
6    <lightning-input-field field-name="Email"></lightning-input-field>
7    <lightning-input-field field-name="Phone"></lightning-input-field>
8    <div class="slds-align_absolute-center slds-p-around_medium">
9      <lightning-button
10        class="slds-m-around_xx-small"
11        label="Cancel"
12        onclick={handleReset}
13      ></lightning-button>
14      <lightning-button
15        class="slds-m-around_xx-small"
16        label="Create Contact"
17        type="submit"
18        variant="brand"
19      ></lightning-button>
20    </div>
21  </lightning-record-edit-form>
22</template>

lightning-input-field コンポーネントの reset() メソッドをコールします。

1import { LightningElement, api } from "lwc";
2
3export default class FormResetExample extends LightningElement {
4  @api recordId;
5
6  handleReset(event) {
7    const inputFields = this.template.querySelectorAll("lightning-input-field");
8    if (inputFields) {
9      inputFields.forEach((field) => {
10        field.reset();
11      });
12    }
13  }
14}

カスタムイベントを使用したデフォルト動作の変更

lightning-record-edit-form では、次のカスタムイベントを処理できます。

error — フォームがサーバ側のエラーを返した時点で実行されます。
load — フォームがレコードデータを読み込んだ時点で実行されます。
submit — フォームが送信されたときに起動します。
success — フォームデータが正常に保存されたときに起動します。

次の例は、フォームの送信時にエラーが発生した場合にトーストを表示します。よくあるエラーとしては、ネットワークにアクセスされていない、フォームに必須項目がない、などがあります。実際のレコード ID を指定するか、またはこの例を取引先責任者レコードページに配置することでレコード ID を継承します。

1<template>
2  <lightning-record-edit-form
3    record-id={recordId}
4    object-api-name="Contact"
5    onerror={handleError}
6  >
7    <!--lightning-messages not needed here
8                since we’re displaying a toast with the error message -->
9    <!--<lightning-messages></lightning-messages>-->
10    <lightning-input-field field-name="FirstName"></lightning-input-field>
11    <lightning-input-field field-name="LastName"></lightning-input-field>
12    <lightning-input-field field-name="Email"></lightning-input-field>
13    <lightning-input-field field-name="Phone"></lightning-input-field>
14    <lightning-button type="submit" variant="brand" label="Create Contact"></lightning-button>
15  </lightning-record-edit-form>
16</template>

トーストを表示するには、lightning/platformShowToastEvent モジュールをインポートします。

1import { LightningElement, api } from "lwc";
2import { ShowToastEvent } from "lightning/platformShowToastEvent";
3
4export default class FormErrorExample extends LightningElement {
5  @api recordId;
6
7  handleError(event) {
8    console.log(event.detail);
9    this.dispatchEvent(
10      new ShowToastEvent({
11        title: "Error creating record",
12        message: event.detail.message,
13        variant: "error",
14      }),
15    );
16  }
17}

event.detail.message は、エラーの一般的な説明を返します。項目固有のエラー (入力規則からのエラーなど) を返すには、項目とレコード例外エラーのリストを提供する event.detail.output.fieldErrors を使用します。

FirstName、LastName、Email 項目で入力規則エラーが発生すると、event.detail.output.fieldErrors では次のような情報が返されます。

1{
2  "Email": [
3    {
4      "constituentField": null,
5      "duplicateRecordError": null,
6      "errorCode": "FIELD_CUSTOM_VALIDATION_EXCEPTION",
7      "field": "Email",
8      "fieldLabel": "Email",
9      "message": "Enter a Salesforce email"
10    }
11  ],
12  "Name": [
13    {
14      "constituentField": "FirstName",
15      "duplicateRecordError": null,
16      "errorCode": "FIELD_CUSTOM_VALIDATION_EXCEPTION",
17      "field": "Name",
18      "fieldLabel": "First Name",
19      "message": "Your first name should contain at least 2 characters"
20    },
21    {
22      "constituentField": "LastName",
23      "duplicateRecordError": null,
24      "errorCode": "FIELD_CUSTOM_VALIDATION_EXCEPTION",
25      "field": "Name",
26      "fieldLabel": "Last Name",
27      "message": "Your last name should contain at least 2 characters"
28    }
29  ]
30}

詳細は、lightning-record-edit-form リファレンスドキュメントを参照してください。

lightning-record-edit-form を使用した、カスタム検証が含まれるレコードの編集

**「カスタムイベントを使用したデフォルト動作の変更」**で説明されているように、lightning-record-edit-form でネストされる lightning-input-field を使用して入力規則エラーを作成し、項目検証を適用することをお勧めします。

lightning-input-field では、クライアント側カスタム検証はサポートされていません。独自のクライアント側検証を実装する場合、代わりに lightning-record-edit-form でネストされる lightning-input を使用することを検討してください。

次の例を取引先レコードページに配置します。この例では、編集できるように lightning-input コンポーネントを [名前] 項目に結び付けます。

1<!-- recordEditFormStaticAccount.html -->
2<template lwc:if={account.data}>
3  <lightning-record-edit-form
4    object-api-name={objectApiName}
5    record-id={recordId}
6    onsubmit={handleSubmit}
7  >
8    <lightning-input
9      label="Name"
10      value={name}
11      onchange={handleChange}
12      class="slds-m-bottom_x-small"
13    ></lightning-input>
14
15    <lightning-button class="slds-m-top_small" type="submit" label="Update Account Name">
16    </lightning-button>
17  </lightning-record-edit-form>
18</template>

getRecord ワイヤアダプタを使用して lightning-input コンポーネントを Salesforce 項目に結び付け、独自の表示ラベルを提供します。この結び付けは、lightning-input-field を使用していると自動的に行われますが、lightning-input を使用していると自動的に行われません。lightning-record-edit-form の onsubmit イベントハンドラを使用してレコードデータを送信します。イベントハンドラで、setCustomValidity() を使用して検証チェックを実行し、ユーザ入力値で項目を更新します。

1// recordEditFormStaticAccount.js
2import { LightningElement, api, wire } from "lwc";
3import { getRecord } from "lightning/uiRecordApi";
4
5const FIELDS = ["Account.Name"];
6
7export default class RecordEditFormStaticAccount extends LightningElement {
8  @api recordId;
9  @api objectApiName;
10  inputVal = "";
11
12  @wire(getRecord, { recordId: "$recordId", fields: FIELDS })
13  account;
14
15  get name() {
16    return this.account.data.fields.Name.value;
17  }
18
19  handleChange(event) {
20    this.inputVal = event.target.value;
21  }
22
23  handleSubmit(event) {
24    event.preventDefault();
25    const inputCmp = this.template.querySelector("lightning-input");
26    const value = inputCmp.value;
27    // perform validation check
28    if (!value.includes("Burlington")) {
29      inputCmp.setCustomValidity("The account name must include 'Burlington'");
30    } else {
31      // if there was a custom error before, reset it
32      inputCmp.setCustomValidity("");
33      const fields = event.detail.fields;
34      fields.Name = this.inputVal;
35      this.template.querySelector("lightning-record-edit-form").submit(fields);
36    }
37    // shows the error right away without user interaction
38    inputCmp.reportValidity();
39  }
40}

lightning-input には、カスタム検証の属性 (min、max、pattern など) が用意されています。詳細は、lightning-input リファレンスドキュメントを参照してください。

lightning-input-field は、lightning-record-edit-form と共に使用することが推奨されるコンポーネントです。入力規則エラーで要件を満たすことができない場合にのみ lightning-record-edit-form と共に lightning-input を使用してください。

Note

The Japanese Summer '24 guide is now live

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