レコードの読み込み
レコードの読み込みは、lightning-record-form
を使用し、レコード ID を渡すことで、すべてマークアップ内で行うことができます。カスタムレイアウトが必要な場合は、lightning-record-view-form
を使用します。フォームベースのコンポーネントではできないカスタマイズが必要な場合には、getRecord
などのワイヤアダプタを使用してください。
レコードを表示するための最も簡単な方法は、lightning-record-form
を使用することです。レコードは 2 つのモードで表示できます。
view
インライン編集が有効な出力項目を使用してフォームを読み込みます。編集可能な項目には編集アイコンが表示されています。ユーザが編集アイコンをクリックすると、フォームのすべての項目の編集ができる状態になり、フォームに [送信] ボタンと [キャンセル] ボタンが表示されます。
read-only
参照のみモードでは、出力項目のみでフォームを読み込みます。フォームには、編集アイコンや [送信] ボタンおよび [キャンセル] ボタンは表示されません。
次のコードでは、指定された項目を使用して、ビューモードで取引先レコードを表示しています。項目の表示ラベルと値は、表示密度の設定に基づいて表示されます。ビューモードは、record-id
が指定された場合のデフォルトです。
パフォーマンスが向上するように、できる限りレイアウトではなく項目を指定します。プロビジョニングされた項目をコンポーネントではなくシステム管理者が制御する場合にのみレイアウトを指定します。コンテキストユーザのレイアウトに割り当てられているすべての項目の受信をコンポーネントで制御する必要があります。
実際のレコード ID を指定するか、またはこの例を取引先レコードページに配置することでレコード ID を継承します。
次の例では、github.com/trailheadapps/lwc-recipes リポジトリにある recordFormDynamicContact
コンポーネントを使用しています。
カスタム項目レイアウトでレコードを表示するには、lightning-record-view-form
コンポーネントを使用します。フォームの項目を作成するには、lightning-output-field
コンポーネントを使用します。個別の項目を含めることで、Lightning Design System のユーティリティクラス (グリッドシステムなど) を使用したカスタム項目レイアウトをデザインできます。
実際のレコード ID を指定するか、またはこの例を取引先レコードページに配置することでレコード ID を継承します。
組織の表示密度の設定に合わせてフォームを設計するか、またはフォーム密度によって表示密度の設定を上書きできます。「フォームの表示密度の変更」を参照してください。
lightning-output-field
を使用してレコードの項目を表示する方法を説明しました。カスタムユーザインターフェースでデータを表示するには、ワイヤアダプタの getRecord
または getRecords
を使用します。
次の例では、基本コンポーネントの lightning-formatted-text
を使用して取引先名を表示しています。
コンポーネントの JavaScript コードで、Account
オブジェクトと Account.Name
項目への参照をインポートします。
getRecord
ワイヤアダプタは、lightning-record-view-form
で使用される標準lightning-output-field
ではなく、lightning-formatted-text
コンポーネントにカスタム表示のためのName
項目を読み込みます。getFieldValue(record, field)
関数はName
項目の値を取得します。
レコードとその親レコードのデータを表示するには、前の例のように getRecord
と共に lightning-record-view-form
を使用します。{object}.{parentObject}.{field}
の表記を使用して、親レコードのデータをインポートします。
次の例では、基本コンポーネントの lightning-formatted-email
を使用して取引先レコードの所有者のメールアドレスを表示しています。
コンポーネントの JavaScript コードは Account
オブジェクトと Account.Owner.Email
項目への参照をインポートします。
getRecord
ワイヤアダプタは、lightning-record-view-form
で使用される標準lightning-output-field
ではなく、lightning-formatted-email
コンポーネントにカスタム表示のためのAccount.Owner.Email
項目を読み込みます。getFieldValue(record, field)
関数はAccount.Owner.Email
項目の値を取得します。
関連トピック