レコードの作成

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

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

Tip

lightning-record-form を使用したレコードの作成

lightning-record-form を使用してレコードを作成するには、record-id 属性を除外します。次の例では、取引先オブジェクトとその項目のインポート参照を使用してレコードを作成します。フォームには、レコードを更新するための [保存] ボタンと、変更内容を破棄するための [キャンセル] ボタンがあります。

1<template>
2  <lightning-record-form
3    object-api-name={accountObject}
4    fields={myFields}
5    onsuccess={handleAccountCreated}
6  >
7  </lightning-record-form>
8</template>

項目のインポートは、myFields 配列に渡されます。インポートした参照は、コンパイル時に検証されます。次の例をレコードページに配置することで、record-id プロパティと object-api-name プロパティを継承できます。

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  accountObject = ACCOUNT_OBJECT;
11  myFields = [NAME_FIELD, WEBSITE_FIELD];
12
13  handleAccountCreated() {
14    // Run code when account is created.
15  }
16}

[キャンセル] ボタンと [保存] ボタンを持つフォーム

データが正常に保存されると、鉛筆アイコンが表示され、インライン編集が可能なことを示します。このビューは、ページを更新または再読み込みするまで表示され続けます。

インライン編集

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

lightning-record-edit-form を使用して、項目のレイアウトやデータの表示方法をカスタマイズできます。

レコード項目種別に基づいて入力コントロールを表示する lightning-input-field に項目を渡します。エラーメッセージの自動表示を有効にするには、lightning-messages コンポーネントを使用します。

1<template>
2  <lightning-record-edit-form object-api-name={accountObject} onsuccess={handleAccountCreated}>
3    <lightning-messages></lightning-messages>
4    <div class="slds-grid">
5      <div class="slds-col slds-size_1-of-2">
6        <lightning-input-field field-name={nameField}></lightning-input-field>
7        <lightning-input-field field-name={websiteField}></lightning-input-field>
8      </div>
9      <div class="slds-col slds-size_1-of-2">
10        <!-- More lightning-input-field components here -->
11      </div>
12    </div>
13    <lightning-button type="submit" variant="brand" label="Create Account"></lightning-button>
14  </lightning-record-edit-form>
15</template>

目的の項目にアクセスするには、@salesforce/schema からの項目インポートを使用します。オブジェクトや項目への参照をインポートすると、オブジェクトや項目の名前が変更されても、コードは確実に機能します。

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  accountObject = ACCOUNT_OBJECT;
11  nameField = NAME_FIELD;
12  websiteField = WEBSITE_FIELD;
13
14  handleAccountCreated() {
15    // Run code when account is created.
16  }
17}

lightning-record-edit-form を使用した項目値の事前読み込み

フォームの表示時に項目値を表示するには、lightning-input-field で value 属性を使用します。

次の例では、取引先名項目にカスタム値が入力されたフォームを表示します。このフォームのボタンをクリックすると、取引先レコードが作成されます。

1<template>
2  <lightning-record-edit-form object-api-name="Account">
3    <lightning-input-field field-name="Name" value="My Field Value"> </lightning-input-field>
4    <lightning-button class="slds-m-top_small" type="submit" label="Create new"> </lightning-button>
5  </lightning-record-edit-form>
6</template>

フォームが読み込まれたときに値が設定されるようにするには、JavaScript で値を指定してください。次の例は、myValue を使用して値を設定しています。この値を後でプログラムによって設定することもできます。ここでは onclick イベントハンドラが overrideValue メソッドをコールすることによって設定しています。

1<template>
2  <lightning-record-edit-form object-api-name="Account">
3    <lightning-input-field field-name="Name" value={myValue}></lightning-input-field>
4    <lightning-button class="slds-m-top_small" type="submit" label="Create new"></lightning-button>
5  </lightning-record-edit-form>
6
7  <lightning-button label="Override Value" onclick={overrideValue}></lightning-button>
8</template>

1import { LightningElement, api } from "lwc";
2export default class FieldValueCreateExample extends LightningElement {
3  myValue = "My Account Name";
4  overrideValue(event) {
5    this.myValue = "My New Name";
6  }
7}

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

lightning-record-edit-form には、lightning-record-form にあるような [キャンセル] ボタンや [保存] ボタンはありません。項目値を元に戻すための [キャンセル] ボタンを作成するには、reset() メソッドをコールする lightning-button コンポーネントを使用します。record-id には自分のレコード ID を指定してください。例については、「レコードの編集」を参照してください。

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

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

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

error — フォームがサーバ側のエラーを返した時点で実行されます。
load — フォームがレコードデータを読み込んだ時点で実行されます。
submit — フォームが変更済みのレコードデータを送信した時点で実行されます。
success — フォームが変更済みのレコードデータを送信した時点で実行されます。

例については、「レコードの編集」を参照してください。

The Japanese Summer '24 guide is now live

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