0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

lightning-record-form

0
Posted at

はじめに

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名だけを指定しましょう。

  • プレフィックスを付けるとフォームが表示されなかったり、エラーになる原因となります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?