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

取引先責任者の読み込み

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

組織に、このデモで使用できる既存の取引先責任者レコードが必要です。

[ファイル] | [新規] | [Apex クラス] をクリックして、[新規クラス] ウィンドウに「ContactController」と入力します。これにより、ContactController.apxc という新しい Apex クラスが作成されます。次のコードを入力して保存します。namespace を、登録済みの名前空間の名前に置き換えます。

1swfobject.registerObject("clippy.codeblock-0", "9");public class ContactController {
2@AuraEnabled
3    public static List<Contact> getContacts() {
4        List<Contact> contacts = 
5                [SELECT Id, Name, MailingStreet, Phone, Email, namespace__Level__c FROM Contact];
6        return contacts;
7    }
8    
9    @AuraEnabled
10    // Retrieve all primary contacts
11    public static List<Contact> getPrimary() {
12        List<Contact> primaryContacts = 
13             [SELECT Id, Name, MailingStreet, Phone, Email, namespace__Level__c FROM Contact WHERE namespace__Level__c = 'Primary'];
14        return primaryContacts;
15    }
16}

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

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

1swfobject.registerObject("clippy.codeblock-1", "9");<aura:component>
2    <aura:attribute name="contact" type="Contact"/>
3    <div class="{!v.contact.tutorial__Level__c == 'Primary' 
4                 ? 'row primary' : 'row '}" >
5
6        <!-- Display a contact name 
7             and navigate to record when the name is clicked -->
8        <div class="col-sm-4">
9            <ui:outputText value="{!v.contact.Name}" click="{!c.gotoRecord}"/>
10        </div>
11        <div class="col-sm-4">
12            <ui:outputEmail value="{!v.contact.Email}"/>
13            <ui:outputPhone value="{!v.contact.Phone}"/>
14
15            <!-- Display the edit record page when the icon is clicked -->
16            <div onclick="{!c.editRecord}">
17                <img src="/img/icon/custom51_100/pencil16.png" alt="Edit Contact" title="Edit Contact" />	
18            </div> 
19        </div>
20        <div class="col-sm-4">
21            <ui:outputTextArea aura:id="address" value="{!v.contact.MailingStreet}" click="{!c.navigate}"/>              
22        </div>
23
24         <!-- Navigate to the related list when the button is clicked -->
25         <ui:button label="View Cases" press="{!c.relatedList}"/>  
26    </div>
27</aura:component>

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

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

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

1swfobject.registerObject("clippy.codeblock-3", "9");<aura:component controller="namespace.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    <!-- Handle loading events by displaying a spinner -->
6    <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
7    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
8
9    <!-- Dynamically load the list of contacts -->
10    <aura:attribute name="contacts" type="Contact[]"/>
11
12    <!-- Create a drop-down list with two options -->
13    <ui:inputSelect aura:id="selection" change="{!c.select}">
14        <ui:inputSelectOption text="All Contacts" label="All Contacts"/> 
15        <ui:inputSelectOption text="All Primary" label="All Primary"/>
16    </ui:inputSelect>
17    
18    <div class="icons">
19        <img src="/img/icon/custom51_100/chalkboard16.png" alt="Create New" title="Create New" onclick="{!c.createRecord}"/>
20    </div>
21    <div><center><ui:spinner aura:id="spinner"/></center></div>
22  
23    <!-- Iterate over the list of contacts and display them -->
24    <aura:iteration var="contact" items="{!v.contacts}">
25        <namespace:contactList contact="{!contact}"/>
26    </aura:iteration>
27</aura:component>

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

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

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

1swfobject.registerObject("clippy.codeblock-5", "9");({
2    getContacts : function(component) {
3        // Load all contact data
4        var action = component.get("c.getContacts");
5        var self = this;
6        action.setCallback(this, function(a){
7            component.set("v.contacts", a.getReturnValue());
8
9            // Display toast message to indicate load status
10            var toastEvent = $A.get("e.force:showToast");
11            if(action.getState() ==='SUCCESS'){
12                toastEvent.setParams({
13                    "title": "Success!",
14                    "message": " Your contacts have been loaded successfully."
15                });
16            }
17            else{
18                toastEvent.setParams({
19                        "title": "Error!",
20                        "message": " Something has gone wrong."
21                });
22            }
23            toastEvent.fire();
24        });
25         $A.enqueueAction(action);
26    }
27})

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

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

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

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

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

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

No Results

取引先責任者の読み込み