Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
j取引先責任者の読み込み
-
をクリックして、[New Class (新規クラス)] ウィンドウに「ContactController」と入力します。ContactController.apxc という新しい Apex クラスが作成されます。次のコードを入力して保存します。
1public with sharing class ContactController { 2@AuraEnabled 3 public static List<Contact> getContacts() { 4 List<Contact> contacts = 5 [SELECT Id, Name, MailingStreet, Phone, Email, LeadSource FROM Contact]; 6 7 //Add isAccessible() check 8 return contacts; 9 } 10}ContactController には、SOQL ステートメントを使用して取引先責任者データを返すメソッドが含まれます。この Apex コントローラは、後のステップでコンポーネントに結び付けられます。getContacts() は選択した項目のすべての取引先責任者を返します。
-
をクリックして、[New Lightning Bundle (新規 Lightning バンドル)] ポップアップウィンドウの [Name (名前)] 項目に「contacts」と入力します。これにより、contacts.cmp というコンポーネントが作成されます。次のコードを入力して保存します。
1<aura:component> 2 <aura:attribute name="contact" type="Contact" /> 3 4 <lightning:card variant="Narrow" title="{!v.contact.Name}" 5 iconName="standard:contact"> 6 <aura:set attribute="actions"> 7 <lightning:button name="details" label="Details" onclick="{!c.goToRecord}" /> 8 </aura:set> 9 <aura:set attribute="footer"> 10 <lightning:badge label="{!v.contact.Email}"/> 11 </aura:set> 12 <p class="slds-p-horizontal_small"> 13 {!v.contact.Phone} 14 </p> 15 <p class="slds-p-horizontal_small"> 16 {!v.contact.MailingStreet} 17 </p> 18 </lightning:card> 19 20</aura:component>このコンポーネントは、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 コントローラをコンポーネントに結び付けます。
1<aura:component implements="force:appHostable" controller="ContactController"> 2 <!-- Handle component initialization in a client-side controller --> 3 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 4 5 <!-- Dynamically load the list of contacts --> 6 <aura:attribute name="contacts" type="Contact[]"/> 7 <aura:attribute name="contactList" type="Contact[]"/> 8 <aura:attribute name="totalContacts" type="Integer"/> 9 10 <!-- Page header with a counter that displays total number of contacts --> 11 <div class="slds-page-header slds-page-header_object-home"> 12 <lightning:layout> 13 <lightning:layoutItem> 14 <lightning:icon iconName="standard:contact" /> 15 </lightning:layoutItem> 16 <lightning:layoutItem class="slds-m-left_small"> 17 <p class="slds-text-title_caps slds-line-height_reset">Contacts</p> 18 <h1 class="slds-page-header__title slds-p-right_x-small">Contact Viewer</h1> 19 </lightning:layoutItem> 20 </lightning:layout> 21 22 <lightning:layout> 23 <lightning:layoutItem> 24 <p class="slds-text-body_small">{!v.totalContacts} Contacts • View Contacts Based on Lead Sources</p> 25 </lightning:layoutItem> 26 </lightning:layout> 27 </div> 28 29 <!-- Body with dropdown menu and list of contacts --> 30 <lightning:layout> 31 <lightning:layoutItem padding="horizontal-medium" > 32 <!-- Create a dropdown menu with options --> 33 <lightning:select aura:id="select" label="Lead Source" name="source" 34 onchange="{!c.handleSelect}" class="slds-m-bottom_medium"> 35 <option value="">-- Select a Lead Source --</option> 36 <option value="Referral" text="Referral"/> 37 <option value="Social Media" text="Social Media"/> 38 <option value="All" text="All"/> 39 </lightning:select> 40 41 <!-- Iterate over the list of contacts and display them --> 42 <aura:iteration var="contact" items="{!v.contacts}"> 43 <!-- If you’re using a namespace, replace with myNamespace:contacts--> 44 <c:contacts contact="{!contact}"/> 45 </aura:iteration> 46 </lightning:layoutItem> 47 </lightning:layout> 48</aura:component>では、コードを詳しく見ていきましょう。初期化中に取引先責任者データを読み込むために init ハンドラを追加しました。次のステップで、このハンドラはクライアント側コントローラコードをコールします。さらに、取引先責任者のリストとカウンタを格納して取引先責任者の合計数を表示する、contacts と totalContacts という 2 つの属性を追加しました。また、contactList コンポーネントは、リードソースのドロップダウンメニューでオプションが選択されている場合に、取引先責任者の条件設定済みリストを格納するのに使用される属性です。lightning:layout コンポーネントはグリッドを作成し、Lightning Design System CSS クラスを使用してビューにコンテンツを配置します。
ページヘッダーには、選択したリードソースに基づいて取引先責任者の数を動的に表示する {!v.totalContacts} 式が含まれます。たとえば、[Referral (紹介)] を選択し、[リードソース] 項目が [Referral (紹介)] に設定されている 30 の取引先責任者がいる場合、式は 30 に評価されます。
次に、lightning:select コンポーネントでドロップダウンメニューを作成します。ドロップダウンメニューでオプションを選択すると、onchange イベントハンドラがクライアント側コントローラをコールして、取引先責任者のサブセットでビューを更新します。次のいくつかのステップでは、クライアント側のロジックを作成します。
force:appHostable インターフェースを使用して、コンポーネントを Lightning Experience および Salesforce モバイルアプリケーションにタブとして表示できるか疑問に思っているかもしれませんが、これについては後で説明します。
-
contactList サイドバーで、[CONTROLLER] をクリックして、contactListController.js というリソースを作成します。プレースホルダコードを次のコードに置き換えて保存します。
1({ 2 doInit : function(component, event, helper) { 3 // Retrieve contacts during component initialization 4 helper.loadContacts(component); 5 }, 6 7 handleSelect : function(component, event, helper) { 8 var contacts = component.get("v.contacts"); 9 var contactList = component.get("v.contactList"); 10 11 //Get the selected option: "Referral", "Social Media", or "All" 12 var selected = event.getSource().get("v.value"); 13 14 var filter = []; 15 var k = 0; 16 for (var i=0; i<contactList.length; i++){ 17 var c = contactList[i]; 18 if (selected != "All"){ 19 if(c.LeadSource == selected) { 20 filter[k] = c; 21 k++; 22 } 23 } 24 else { 25 filter = contactList; 26 } 27 } 28 //Set the filtered list of contacts based on the selected option 29 component.set("v.contacts", filter); 30 helper.updateTotal(component); 31 } 32})クライアント側コントローラは、ヘルパー関数をコールして複雑な作業のほとんどを行います。これはコードの再利用を促すための推奨されるパターンです。ヘルパー関数により、データの処理やサーバ側のアクションの起動などのタスクを特化することもできます。これについては次で説明します。lightning:select コンポーネントで onchange イベントハンドラを取り消すと、handleSelect クライアント側コントローラアクションがコールされます。これは、ドロップダウンメニューでオプションを選択するとトリガされます。handleSelect は event.getSource().get("v.value") を使用して渡されるオプション値を確認します。各取引先責任者のリードソース項目が選択したリードソースと一致することを確認して、取引先責任者の条件設定済みリストを作成します。最後に、選択したリードソースに基づいて、ビューと取引先責任者の合計数を更新します。
-
contactList サイドバーで、[HELPER] をクリックして、contactListHelper.js というリソースを作成します。プレースホルダコードを次のコードに置き換えて保存します。
1({ 2 loadContacts : function(cmp) { 3 // Load all contact data 4 var action = cmp.get("c.getContacts"); 5 action.setCallback(this, function(response) { 6 var state = response.getState(); 7 if (state === "SUCCESS") { 8 cmp.set("v.contacts", response.getReturnValue()); 9 cmp.set("v.contactList", response.getReturnValue()); 10 this.updateTotal(cmp); 11 } 12 13 // Display toast message to indicate load status 14 var toastEvent = $A.get("e.force:showToast"); 15 if (state === 'SUCCESS'){ 16 toastEvent.setParams({ 17 "title": "Success!", 18 "message": " Your contacts have been loaded successfully." 19 }); 20 } 21 else { 22 toastEvent.setParams({ 23 "title": "Error!", 24 "message": " Something has gone wrong." 25 }); 26 } 27 toastEvent.fire(); 28 }); 29 $A.enqueueAction(action); 30 }, 31 32 updateTotal: function(cmp) { 33 var contacts = cmp.get("v.contacts"); 34 cmp.set("v.totalContacts", contacts.length); 35 } 36})初期化中、contactList コンポーネントは以下によって取引先責任者データを読み込みます。- Apex コントローラメソッド getContacts をコールします。SOQL ステートメントを介して取引先責任者データが返されます。
- アクションのコールバックで cmp.set("v.contacts", response.getReturnValue()) を介して戻り値を設定します。これにより、取引先責任者データでビューが更新されます。
- ビューで取引先責任者の合計数を更新します。これは updateTotal で評価されます。
コンポーネントが Lightning Experience と Salesforce アプリケーションでどのように機能するのか疑問に思っているでしょう。次に、これについて調べてみましょう。
-
contactList コンポーネントを Lightning Experience と Salesforce アプリケーションのカスタムタブを介して使用できるようにします。
- Lightning Experience アプリケーションのカスタムタブとしての Lightning コンポーネントの追加
- Salesforce アプリケーションのカスタムタブとしての Lightning コンポーネントの追加
このチュートリアルでは、コンポーネントを Lightning Experience でカスタムタブとして追加することをおすすめします。
コンポーネントが Lightning Experience または Salesforce アプリケーションに読み込まれると、取引先責任者が正常に読み込まれたことを示すトーストメッセージが表示されます。ドロップダウンメニューからリードソースを選択し、ビューで取引先責任者リストと取引先責任者数の更新を確認します。
次に、取引先責任者リストでボタンをクリックしたときに取引先責任者レコードに移動するイベントを結び付けます。