Beginner Level 3

初級 Lv. 3

さきほど作成したコンポーネントを修正して、データを動的に取得してみましょう。

問題

• コンポーネント名: myFirstWebComponent

• 表示している取引先レコードに紐づくすべての取引先責任者レコードを変数として定義してください。

  • 変数名: contacts

  • アノテーション: @wire

  • 利用する Apex

    • メソッド: ContactController クラスの getContacts
    • 引数: @api recordId

• Salesforce のデータベースから異なるオブジェクトのデータを取得するために Apex クラスを書いてください。

  • クラス名: ContactController

    • アノテーション: @AuraEnabled(cacheable=true)

    • 修飾子: public static

    • 戻り値: List

    • メソッド名: getContacts

    • 引数: String accountId (取引先 ID)

    • 内容:

      • 引数に指定した取引先 ID に紐づくすべての取引先責任者レコードを取得する。
      • 取得する項目: Id, Name, Title
      • 並び順: Name 昇順

• 既存の取引先にアクセスし、取引先責任者データが動的に取得されることを確認してください。

解答

• 次のようにコードを修正する。

  myFirstWebComponent.html

  myFirstWebComponent.js

  myFirstWebComponent.js-meta.xml

• 次のようにコードを書く。

  ContactController.cls

• それぞれのファイルに対して右クリック > 「SFDX: Deploy This Source to Org」をクリックする。

• コマンドパレットから「SFDX: Open Default Org」を実行する。

• アプリケーションランチャー > 取引先 をクリックする。

• いくつか取引先レコードにアクセスする。

  • 例 1: Burlington Textiles Corp of America
  • 例 2: Edge Communications
  • 例 3: Pyramid Construction Inc.

• それぞれの取引先責任者データが表示されていることを確認する。

Open Questions

myFirstWebComponent.js にて recordId に @api がついています。

1. recordId とは何でしょうか。
2. @api ではなく @track ではいけないのでしょうか。

Hints

1. recordId を削除してみましょう。何が起こりますか？
2. @api の部分を @track に変えてみましょう。何が起こりますか？

---

👈 前に戻る | 次に進む 👉