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

取引先責任者の読み込み

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

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

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

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

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17public class ContactController {
18@AuraEnabled
19    public static List<Contact> getContacts() {
20        List<Contact> contacts = 
21                [SELECT Id, Name, MailingStreet, Phone, Email, Level__c FROM Contact];
22        return contacts;
23    }
24    
25    @AuraEnabled
26    // Retrieve all primary contacts
27    public static List<Contact> getPrimary() {
28        List<Contact> primaryContacts = 
29             [SELECT Id, Name, MailingStreet, Phone, Email, Level__c FROM Contact WHERE namespace__Level__c = 'Primary'];
30        return primaryContacts;
31    }
32}

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

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

1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18    <aura:attribute name="contact" type="Contact"/>
19    <!-- If you’re using a namespace, use {!v.contact.myNamespace__Level__c} instead -->
20    <div class="{!v.contact.Level__c == 'Primary' 
21                 ? 'row primary' : 'row '}" >
22
23        <!-- Display a contact name 
24             and navigate to record when the name is clicked -->
25        <div class="col-sm-4">
26            <ui:outputText value="{!v.contact.Name}" click="{!c.gotoRecord}"/>
27        </div>
28        <div class="col-sm-4">
29            <ui:outputEmail value="{!v.contact.Email}"/>
30            <ui:outputPhone value="{!v.contact.Phone}"/>
31
32            <!-- Display the edit record page when the icon is clicked -->
33            <div onclick="{!c.editRecord}">
34                <img src="/img/icon/custom51_100/pencil16.png" alt="Edit Contact" title="Edit Contact" />	
35            </div> 
36        </div>
37        <div class="col-sm-4">
38            <ui:outputTextArea aura:id="address" value="{!v.contact.MailingStreet}" click="{!c.navigate}"/>              
39        </div>
40
41         <!-- Navigate to the related list when the button is clicked -->
42         <ui:button label="View Cases" press="{!c.relatedList}"/>  
43    </div>
44</aura:component>

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

1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.THIS.primary{
18    background: #4ECDC4  !important;
19}
20
21.THIS .uiOutputText {
22   width: 25%;
23   float: left;
24   font-weight: bold;
25}
26
27.THIS .uiOutputPhone {
28    color: #2574A9;
29}
30
31.THIS .uiOutputTextArea {
32    float:clear;
33}
34
35.THIS .uiOutputEmail {
36    float: right;
37}
38
39.THIS .uiButton {
40    margin-top: 20px !important;
41}

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

1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component controller="ContactController" implements="force:appHostable">
18    <!-- Handle component initialization in a client-side controller -->
19    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
20
21    <!-- Handle loading events by displaying a spinner -->
22    <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
23    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
24
25    <!-- Dynamically load the list of contacts -->
26    <aura:attribute name="contacts" type="Contact[]"/>
27
28    <!-- Create a drop-down list with two options -->
29    <ui:inputSelect aura:id="selection" change="{!c.select}">
30        <ui:inputSelectOption text="All Contacts" label="All Contacts"/> 
31        <ui:inputSelectOption text="All Primary" label="All Primary"/>
32    </ui:inputSelect>
33    
34    <div class="icons">
35        <img src="/img/icon/custom51_100/chalkboard16.png" alt="Create New" title="Create New" onclick="{!c.createRecord}"/>
36    </div>
37    <div><center><ui:spinner aura:id="spinner"/></center></div>
38  
39    <!-- Iterate over the list of contacts and display them -->
40    <aura:iteration var="contact" items="{!v.contacts}">
41        <!-- If you’re using a namespace, replace with myNamespace:contactList -->
42        <c:contactList contact="{!contact}"/>
43    </aura:iteration>
44</aura:component>

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

1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    doInit : function(component, event, helper) {
19        // Retrieve contacts during component initialization
20        helper.getContacts(component);
21    },
22
23    showSpinner : function (component, event, helper) {
24        var spinner = component.find('spinner');
25        var evt = spinner.get("e.toggle");
26        evt.setParams({ isVisible : true });
27        evt.fire();
28    },
29    
30    hideSpinner : function (component, event, helper) {
31        var spinner = component.find('spinner');
32        var evt = spinner.get("e.toggle");
33        evt.setParams({ isVisible : false });
34        evt.fire();
35    },//Delimiter for future code
36})

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

1swfobject.registerObject("clippy.codeblock-5", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    getContacts : function(cmp) {
19        // Load all contact data
20        var action = cmp.get("c.getContacts");
21        var self = this;
22        action.setCallback(this, function(response) {
23            var state = response.getState();
24            if (cmp.isValid() && state === "SUCCESS") {
25                cmp.set("v.contacts", response.getReturnValue());
26            }
27
28            // Display toast message to indicate load status
29            var toastEvent = $A.get("e.force:showToast");
30            if (state === 'SUCCESS'){
31                toastEvent.setParams({
32                    "title": "Success!",
33                    "message": " Your contacts have been loaded successfully."
34                });
35            }
36            else {
37                toastEvent.setParams({
38                        "title": "Error!",
39                        "message": " Something has gone wrong."
40                });
41            }
42            toastEvent.fire();
43        });
44         $A.enqueueAction(action);
45    }
46})

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

1swfobject.registerObject("clippy.codeblock-6", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.THIS.row {
18    background: #fff;
19    max-width:90%;
20    border-bottom: 2px solid #f0f1f2;
21    padding: 10px;
22    margin-left: 2%;
23    margin-bottom: 10px;
24    min-height: 70px;
25    border-radius: 4px;
26}
27
28.THIS.uiInputSelect {
29    width: 80%;
30    padding-left: 10px;
31    min-height: 28px;
32    margin-bottom: 20px;
33    margin-left: 20px;
34    margin-top: 40px;
35}
36
37.THIS img {
38    float: right;
39    padding-right:5%;
40    padding-top: 20px;
41}
42
43.THIS.icons {
44    height:60px;
45}

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

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

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

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

取引先責任者の読み込み