この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

取引先責任者の読み込み

Apex コントローラを作成して、取引先責任者を読み込みます。

組織に、このチュートリアルで使用できる既存の取引先責任者レコードが必要です。このチュートリアルでは、Level__c という API 名で表されるカスタム選択リスト項目 Level が使用されます。この項目には、Primary、Secondary、Tertiary という 3 つの選択リスト値が含まれます。

[File (ファイル)] | [New (新規)] | [Apex Class (Apex クラス)] をクリックして、[New Class (新規クラス)] ウィンドウに「ContactController」と入力します。これにより、ContactController.apxc という新しい Apex クラスが作成されます。次のコードを入力して保存します。

組織で名前空間を使用している場合は、Level__c を myNamespace__Level__c に置き換えます。

1public with sharing class ContactController {
2@AuraEnabled
3    public static List<Contact> getContacts() {
4        List<Contact> contacts = 
5                [SELECT Id, Name, MailingStreet, Phone, Email, Level__c FROM Contact];
6
7        //Add isAccessible() check
8        return contacts;
9    }
10    
11    @AuraEnabled
12    // Retrieve all primary contacts
13    public static List<Contact> getPrimary() {
14        List<Contact> primaryContacts = 
15             [SELECT Id, Name, MailingStreet, Phone, Email, Level__c FROM Contact WHERE Level__c = 'Primary'];
16
17        //Add isAccessible() check
18        return primaryContacts;
19    }
20}

getPrimary() によって、Level__c 項目が Primary に設定されているすべての取引先責任者が返されます。

[File (ファイル)] | [New (新規)] | [Lightning コンポーネント] をクリックして、[New Lightning Bundle (新規 Lightning バンドル)] ポップアップウィンドウの [Name (名前)] 項目に「contactList」と入力します。これにより、contactList.cmp という新しいコンポーネントが作成されます。次のコードを入力して保存します。

1<aura:component>
2    <aura:attribute name="contact" type="Contact"/>
3    <!-- If you’re using a namespace, 
4         use {!v.contact.myNamespace__Level__c} instead -->
5    <div class="{!v.contact.Level__c == 'Primary' 
6                 ? 'row primary' : 'row '}" >
7        
8        <div onclick="{!c.gotoRecord}">
9            <force:recordView recordId="{!v.contact.Id}" type="MINI"/>
10        </div>
11
12        <!-- Open the record edit page when the button is clicked -->
13        <ui:button label="Edit" press="{!c.editRecord}"/> 
14        <!-- Navigate to the related list when the button is clicked -->
15        <ui:button label="View Cases" press="{!c.relatedList}"/>  
16    </div>
17</aura:component>

contactList サイドバーで、[STYLE] をクリックして、contactList.css という新しいリソースを作成します。プレースホルダコードを次のコードに置き換えて保存します。

1.THIS.primary{
2    background: #4ECDC4  !important;
3}
4
5.THIS.row { 
6    background: #fff;
7    max-width:90%;
8    border-bottom: 2px solid #f0f1f2;
9    padding: 10px;
10    margin-left: 2%;
11    margin-bottom: 10px;
12    min-height: 70px;
13    border-radius: 4px;
14}

[File (ファイル)] | [New (新規)] | [Lightning Component (Lightning コンポーネント)] をクリックして、[New Lightning Bundle (新規 Lightning バンドル)] ポップアップウィンドウの [Name (名前)] 項目に「contacts」と入力します。これにより、contacts.cmp という新しいコンポーネントが作成されます。次のコードを入力して保存します。組織で名前空間を使用している場合は、ContactController を myNamespace.ContactController に置き換えます。

1<aura:component controller="ContactController" implements="force:appHostable">
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
8    <!-- Create a drop-down list with two options -->
9    <ui:inputSelect aura:id="selection" change="{!c.select}">
10        <ui:inputSelectOption text="All Contacts" label="All Contacts"/> 
11        <ui:inputSelectOption text="All Primary" label="All Primary"/>
12    </ui:inputSelect>
13
14    <!-- Display record create page when button is clicked -->
15    <ui:button label="New Contact" press="{!c.createRecord}"/>
16
17    <!-- Iterate over the list of contacts and display them -->
18    <aura:iteration var="contact" items="{!v.contacts}">
19        <!-- If you’re using a namespace, replace with myNamespace:contactList -->
20        <c:contactList contact="{!contact}"/>
21    </aura:iteration>
22</aura:component>

contacts サイドバーで、[CONTROLLER] をクリックして、contactsController.js という新しいリソースを作成します。プレースホルダコードを次のコードに置き換えて保存します。

1({
2    doInit : function(component, event, helper) {
3        // Retrieve contacts during component initialization
4        helper.getContacts(component);
5    },//Delimiter for future code
6})

contacts サイドバーで、[HELPER] をクリックして、contactsHelper.js という新しいリソースを作成します。プレースホルダコードを次のコードに置き換えて保存します。

1({
2    getContacts : 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 (cmp.isValid() && state === "SUCCESS") {
8                cmp.set("v.contacts", response.getReturnValue());
9            }
10
11            // Display toast message to indicate load status
12            var toastEvent = $A.get("e.force:showToast");
13            if (state === 'SUCCESS'){
14                toastEvent.setParams({
15                    "title": "Success!",
16                    "message": " Your contacts have been loaded successfully."
17                });
18            }
19            else {
20                toastEvent.setParams({
21                        "title": "Error!",
22                        "message": " Something has gone wrong."
23                });
24            }
25            toastEvent.fire();
26        });
27         $A.enqueueAction(action);
28    }
29})

「Salesforce1 への Lightning コンポーネントの追加」の手順に従って、新しい [Lightning コンポーネント] タブを作成します。このコンポーネントが Salesforce1 ナビゲーションメニューに表示されていることを確認します。

最後に、Salesforce1 モバイルブラウザアプリケーションに移動して、出力を確認できます。コンポーネントが読み込まれると、取引先責任者が正常に読み込まれたことを示すトーストメッセージが表示されます。

次に、他のイベントを結び付けて、入力選択にすべての取引先責任者か、緑色の主取引先責任者のみが表示されるようにします。また、レコードの作成ページおよびレコードの編集ページを開くイベントと、レコードおよび URL に移動するイベントを結び付けます。

Lightning コンポーネント開発者ガイド

取引先責任者の読み込み