はじめに
SalesforceのLightning Web Components (LWC) で標準的に使われるフォームコンポーネントの一つ、lightning-record-form。
しかし、fields 属性に「オブジェクトAPI名+フィールド名」のようなプレフィックス付きフィールド名を指定すると、エラーや表示されない問題が起こることがあります。
本記事では、その仕様の特徴や注意点を解説し、さらに似た標準コンポーネントとの違いと使い分けについてもまとめます。
1. lightning-record-form の特徴
- 指定したオブジェクトのレコードの作成・編集・表示を簡単に実装
-
object-api-name属性に対象オブジェクトを指定 -
fields属性に表示したいフィールドのAPI名配列を指定
2. fields 属性の仕様と失敗例
オブジェクトAPI名のプレフィックスを含めてはいけない
NG例:
fields={['Account.Name', 'Account.Phone']}
OK例
fields={['Name', 'Phone']}
なぜプレフィックス付きだとダメなのか?
-
fields には必ずプレフィックスなしのフィールドAPI名だけを指定する必要がある
-
lightning-record-form は object-api-name で指定されたオブジェクトを指定された名前の基準にフィールドを探す。
-
プレフィックス付き(例:Account.Name)で指定すると、「Accountオブジェクトの中に Account.Name という名前のフィールドがある」と誤認識してしまい、実際には存在しないフィールドとして処理されてしまう。
値の参照と扱い方のポイント
-
lightning-record-form は単一オブジェクトのレコードを対象
-
関連オブジェクトのフィールド(例:Account.Owner.Name のようなドット区切りの複雑な名前)は指定不可
-
フォーム内部で値の読み書きが完結し、個別のフィールド値を外部で取得したい場合は別途処理(イベントハンドラやApex経由の取得)が必要
関連コンポーネントとの違い・使い分け
| コンポーネント名 | 用途 | 編集可否 | カスタマイズ性 | 主な使い方 |
|---|---|---|---|---|
| lightning-record-form | 作成・編集・表示一括 | 〇 | 低〜中(フォーム全体を自動生成) | 手軽に標準フォームを作成したいとき |
| lightning-record-edit-form | 編集フォーム | 〇 | 高(UIを自由に構成可能) | 細かくカスタム編集フォームを作るとき |
| lightning-record-view-form | 表示フォーム | × | 高(表示UIを自由に構成可能) | 読み取り専用の詳細表示画面を作るとき |
| lightning-input-field | 単一フィールド入力 | 〇 | 中(単体フィールドのUIを制御可能) | フォームの一部として単一フィールドを扱うとき |
| lightning-output-field | 単一フィールド表示 | × | 中(単体フィールドの表示制御) | 詳細表示などで単一フィールドを表示するとき |
使用例
正しい fields の指定例(プレフィックスなし)
<lightning-record-form
object-api-name="Account"
fields={['Name', 'Phone', 'Industry']}
mode="edit"
onsuccess={handleSuccess}>
</lightning-record-form>
NG例(プレフィックス付き)
<!-- NG: プレフィックス付きは動作しない -->
<lightning-record-form
object-api-name="Account"
fields={['Account.Name', 'Account.Phone']}
mode="edit">
</lightning-record-form>
まとめ
-
lightning-record-form の fields 属性には必ずプレフィックスなしのフィールドAPI名だけを指定しましょう。
-
プレフィックスを付けるとフォームが表示されなかったり、エラーになる原因となります。