レコードの読み込み
レコードの読み込みは、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項目の値を取得します。
関連トピック