Intermediate Level 3

中級 Lv. 3

Recipes のコードを参考にして、入力値をもとにレコードを検索して結果を出力するコンポーネントを作成してみましょう。

問題

• コンポーネント名: opportunitySearch
• 商談名の一部を入力して「検索」ボタンをクリックすると、該当する商談レコード一覧を表示する LWC を作成してください。
• 項目としては「商談名」「金額」「フェーズ」を表示させてください。
• ホームページの左上に配置してください。
• 参考にする Recipes コンポーネント: Apex タブ > ApexImperativeMethodWithParams コンポーネント

解答

• force-app > main > default > classes フォルダを右クリックする。

• 「SFDX: Create Apex Class」をクリックする。

• 名前として「OpportunityController」を入力して Enter を押下する。

• 格納場所として「force-app/main/default/classes」を選択して Enter を押下する。

• 次のコードを書く。

  OpportunityController.cls

• force-app > main > default > lwc フォルダを右クリックする。

• 「SFDX: Create Lightning Web Component」をクリックする。

• 名前として「opportunitySearch」を入力して Enter を押下する。

• 格納場所として「force-app/main/default/lwc」を選択して Enter を押下する。

• 次のコードを書く。

  opportunitySearch.html

  opportunitySearch.js

  opportunitySearch.js-meta.xml

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

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

• アプリケーションランチャー > ホーム をクリックする。

• 歯車アイコン > 編集ページ をクリックする。

• 左のペインから「opportunitySearch」を左上にドラッグする。

• 「保存」 > 「有効化」 > 「組織のデフォルトとして割り当て」 > 「保存」をクリックする。

• 「戻る」をクリックする。

• 右上に当該のコンポーネントがと表示されていることを確認する。

• 何か文字列を入力して「検索」ボタンをクリックし、商談レコードが検索されることを確認する。

Open Questions

• 表示結果をもっと見やすくするにはどうすればいいでしょうか。可能であれば実装してみましょう。

Hints

• 表形式、あるいは タイル形式 が見やすいかもしれません。

---

👈 前に戻る | 次に進む 👉