Lightning コンポーネント開発者ガイド
j取引先責任者の読み込み
-
をクリックして、[New Class (新規クラス)] ウィンドウに「ContactController」と入力します。ContactController.apxc という新しい Apex クラスが作成されます。次のコードを入力して保存します。
ContactController には、SOQL ステートメントを使用して取引先責任者データを返すメソッドが含まれます。この Apex コントローラは、後のステップでコンポーネントに結び付けられます。getContacts() は選択した項目のすべての取引先責任者を返します。
-
をクリックして、[New Lightning Bundle (新規 Lightning バンドル)] ポップアップウィンドウの [Name (名前)] 項目に「contacts」と入力します。これにより、contacts.cmp というコンポーネントが作成されます。次のコードを入力して保存します。
このコンポーネントは、lightning:card コンポーネントを使用して取引先責任者データのテンプレートを作成します。情報グループの周囲にビジュアルコンテナを作成します。このテンプレートは所有する取引先責任者ごとに表示されるため、ビューに、異なるデータを持つ複数のコンポーネントのインスタンスを持つことができます。ボタンがクリックされると、lightning:button コンポーネントの onclick イベントハンドラが goToRecord クライアント側コントローラをコールします。式 {!v.contact.Name} に気づきましたか? v はコンポーネントの一連の属性からなるビューを表し、contact はタイプ Contact の属性です。次のステップで Apex コントローラをコンポーネントに結び付けた後に、このドット表記を使用して、Name や Email などの取引先責任者オブジェクトの項目にアクセスできます。
-
をクリックして、[New Lightning Bundle (新規 Lightning バンドル)] ポップアップウィンドウの [Name (名前)] 項目に「contactList」と入力します。これにより、contactList.cmp コンポーネントが作成されます。次のコードを入力して保存します。組織で名前空間を使用している場合は、ContactController を myNamespace.ContactController に置き換えます。controller="ContactController" を使用して、 Apex コントローラをコンポーネントに結び付けます。
では、コードを詳しく見ていきましょう。初期化中に取引先責任者データを読み込むために init ハンドラを追加しました。次のステップで、このハンドラはクライアント側コントローラコードをコールします。さらに、取引先責任者のリストとカウンタを格納して取引先責任者の合計数を表示する、contacts と totalContacts という 2 つの属性を追加しました。また、contactList コンポーネントは、リードソースのドロップダウンメニューでオプションが選択されている場合に、取引先責任者の条件設定済みリストを格納するのに使用される属性です。lightning:layout コンポーネントはグリッドを作成し、Lightning Design System CSS クラスを使用してビューにコンテンツを配置します。
ページヘッダーには、選択したリードソースに基づいて取引先責任者の数を動的に表示する {!v.totalContacts} 式が含まれます。たとえば、[Referral (紹介)] を選択し、[リードソース] 項目が [Referral (紹介)] に設定されている 30 の取引先責任者がいる場合、式は 30 に評価されます。
次に、lightning:select コンポーネントでドロップダウンメニューを作成します。ドロップダウンメニューでオプションを選択すると、onchange イベントハンドラがクライアント側コントローラをコールして、取引先責任者のサブセットでビューを更新します。次のいくつかのステップでは、クライアント側のロジックを作成します。
force:appHostable インターフェースを使用して、コンポーネントを Lightning Experience および Salesforce1 にタブとして表示できるか疑問に思っているかもしれませんが、これについては後で説明します。
-
contactList サイドバーで、[CONTROLLER] をクリックして、contactListController.js というリソースを作成します。プレースホルダコードを次のコードに置き換えて保存します。
クライアント側コントローラは、ヘルパー関数をコールして複雑な作業のほとんどを行います。これはコードの再利用を促すための推奨されるパターンです。ヘルパー関数により、データの処理やサーバ側のアクションの起動などのタスクを特化することもできます。これについては次で説明します。lightning:select コンポーネントで onchange イベントハンドラを取り消すと、handleSelect クライアント側コントローラアクションがコールされます。これは、ドロップダウンメニューでオプションを選択するとトリガされます。handleSelect は event.getSource().get("v.value") を使用して渡されるオプション値を確認します。各取引先責任者のリードソース項目が選択したリードソースと一致することを確認して、取引先責任者の条件設定済みリストを作成します。最後に、選択したリードソースに基づいて、ビューと取引先責任者の合計数を更新します。
-
contactList サイドバーで、[HELPER] をクリックして、contactListHelper.js というリソースを作成します。プレースホルダコードを次のコードに置き換えて保存します。
初期化中、contactList コンポーネントは以下によって取引先責任者データを読み込みます。
- Apex コントローラメソッド getContacts をコールします。SOQL ステートメントを介して取引先責任者データが返されます。
- アクションのコールバックで cmp.set("v.contacts", response.getReturnValue()) を介して戻り値を設定します。これにより、取引先責任者データでビューが更新されます。
- ビューで取引先責任者の合計数を更新します。これは updateTotal で評価されます。
コンポーネントが Lightning Experience と Salesforce1 でどのように機能するのか疑問に思っているでしょう。次に、これについて調べてみましょう。
-
contactList コンポーネントを Lightning Experience と Salesforce1 のカスタムタブを介して使用できるようにします。
このチュートリアルでは、コンポーネントを Lightning Experience でカスタムタブとして追加することをおすすめします。
コンポーネントが Lightning Experience または Salesforce1 に読み込まれると、取引先責任者が正常に読み込まれたことを示すトーストメッセージが表示されます。ドロップダウンメニューからリードソースを選択し、ビューで取引先責任者リストと取引先責任者数の更新を確認します。
次に、取引先責任者リストでボタンをクリックしたときに取引先責任者レコードに移動するイベントを結び付けます。