Lightning コンポーネント開発者ガイド
jLightning Experience および Salesforce1 のコンポーネントの作成
取引先責任者データを読み込んで Lightning Experience および Salesforce1 と連動するカスタム UI を作成する方法を確認します。
このチュートリアルでは、以下を行うコンポーネントの作成について順を追って説明します。
- すべての取引先責任者が正常に読み込まれたら、force:showToast イベントを使用してトーストメッセージを表示する (1)。
- 選択したリードソースに基づいて取引先責任者の数を更新する (2)。
- リードソース (紹介またはソーシャルメディア) が選択されている場合、lightning:select コンポーネントを使用して取引先責任者を絞り込む (3)。
- lightning:card コンポーネントを使用して取引先責任者データを表示する (4)。
- [詳細] ボタンがクリックされたらレコードに移動する (5)。
以下に、Salesforce1 にコンポーネントがどのように表示されるかを示します。contactList と contacts の 2 つのコンポーネントを作成しています。contactList は反復するコンテナコンポーネントで contacts コンポーネントを表示します。すべての取引先責任者は contactList に表示されますが、異なるリードソースを選択してそのリードソースに関連付けられている取引先責任者のサブセットを表示できます。
次のいくつかのトピックで、次のリソースを作成します。
| リソース | 説明 |
|---|---|
| 取引先責任者バンドル | |
| contacts.cmp | 個々の取引先責任者データを表示するコンポーネント |
| contactsController.js | force:navigateToSObject イベントを使用して取引先責任者レコードに移動する、クライアント側コントローラアクション |
| contactList バンドル | |
| contactList.cmp | 取引先責任者のリストを読み込むコンポーネント |
| contactListController.js | ヘルパーリソースをコールして取引先責任者データを読み込み、リードソースの選択を処理する、クライアント側コントローラアクション |
| contactListHelper.js | 取引先責任者データを取得し、取引先責任者データを正常に読み込んだときにトーストメッセージを表示し、リードソースに基づいて取引先責任者データを表示し、取引先責任者の合計数を更新するヘルパー関数 |
| Apex コントローラ | |
| ContactController.apxc | すべての取引先責任者レコードをクエリし、リードソース別に取引先責任者レコードをクエリする Apex コントローラ |