レコードデータの取得
ワイヤサービスを使用してレコードデータを取得して、一部の項目名を表示しましょう。
次の例では、github.com/trailheadapps/lwc-recipes リポジトリにある wireGetRecordDynamicContact
コンポーネントを使用しています。このコンポーネントは動的スキーマを使用します。項目への参照はインポートしません。静的スキーマを使用する例については、lwc-recipes リポジトリの wireGetRecordStaticContact
を参照してください。
このコンポーネントは、取引先責任者用のカスタム UI を表示します。データを取得するためにコンポーネントは getRecord
ワイヤアダプタを使用します。
ワイヤサービスでデータをプロビジョニングする場合、テンプレートによって名前、役職、電話番号、メールが表示されます。ワイヤサービスでエラーをプロビジョニングする場合、テンプレートによって c-error-panel
コンポーネントが表示されます。
ではコンポーネントの JavaScript を見てみましょう。
コードではまず、Lightning データサービス上に構築されている getRecord
ワイヤアダプタを lightning/uiRecordApi
モジュールからインポートします。そして、ワイヤアダプタに渡す項目を定義します。
コンポーネントは @api
を使用して公開 recordId
プロパティを定義します。このコンポーネントのように、Lightning レコードページでコンポーネントがネストされている場合、Lightning ページは recordId
の値を設定します。
@wire
デコレータは、getRecord
に対して、指定された $recordId
を持つレコードの指定項目の値を取得するように指示します。$
は、値が動的に渡されることを意味します。値が変化すると、ワイヤサービスはデータをプロビジョニングし、コンポーネントが再表示されます。
データは @wire
でデコレートされたプロパティの data
および error
オブジェクトにプロビジョニングされます。次の例では contact
プロパティです。
このプロパティで返される data
のデフォルト値は undefined
です。したがって、この例では、lwc:if
ディレクティブを利用して、contact.data
に取引先責任者レコードが入力されたかどうかが確認されます。contact.data
に取引先責任者レコードが入力されると、JavaScript コードの getter がコールされます。getFieldValue(record, field) を使用する方法もあります。
もう一度 HTML テンプレートを見てみましょう。name
、title
、phone
、email
の各項目は、{}
構文を使用して JavaScript クラスにバインドされます。JavaScript では、各プロパティが contact.data
オブジェクトを使用する getter 関数によって、それぞれの名前が示す項目の値にアクセスします。
返されるデータの構造は、getRecord
の基礎となるユーザインターフェース API が返す構造と同じです。この場合、応答は Record です。
この例は、返される JSON オブジェクトを介したデータアクセスを示しています。データアクセスを簡単に行うには、getFieldValue(record, field)
を使用してください。
関連トピック