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

イベントの起動

クライアント側のコントローラまたはヘルパー関数でイベントを起動します。force イベントは、Salesforce1 で処理されます。

このデモは、「取引先責任者の読み込み」で作成した取引先責任者コンポーネントを基に作成されています。

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

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    gotoRecord : function(component, event, helper) {
19        // Fire the event to navigate to the contact record
20        var sObjectEvent = $A.get("e.force:navigateToSObject");
21        sObjectEvent.setParams({
22            "recordId": component.get("v.contact.Id"),
23            "slideDevName": 'related'
24        })
25        sObjectEvent.fire();
26    },
27    
28    editRecord : function(component, event, helper) {
29        // Fire the event to navigate to the edit contact page
30        var editRecordEvent = $A.get("e.force:editRecord");
31        editRecordEvent.setParams({
32            "recordId": component.get("v.contact.Id")
33        });
34        editRecordEvent.fire();
35    },
36    
37    navigate : function(component, event, helper) {
38        // Navigate to an external URL
39        var address = component.find("address").get("v.value");
40        var urlEvent = $A.get("e.force:navigateToURL");
41        urlEvent.setParams({
42          "url": 'https://www.google.com/maps/place/' + address
43        });
44        urlEvent.fire();
45    },
46
47    relatedList : function (component, event, helper) {
48        // Navigate to the related cases
49        var relatedListEvent = $A.get("e.force:navigateToRelatedList");
50        relatedListEvent.setParams({
51            "relatedListId": "Cases",
52            "parentRecordId": component.get("v.contact.Id")
53        });
54        relatedListEvent.fire();
55    }
56})

Salesforce1 モバイルブラウザアプリケーションを更新し、次の要素をクリックしてイベントをテストします。
- 取引先責任者名: force:navigateToSObject が起動され、取引先責任者レコードページでビューが更新されます。取引先責任者名は、次のコンポーネントに対応します。
  1<ui:outputText value="{!v.contact.Name}" click="{!c.gotoRecord}"/>
- 取引先責任者の編集アイコン: force:editRecord が起動され、レコードの編集ページが開きます。取引先責任者の編集アイコンは、次のコンポーネントに対応します。
  1<div onclick="{!c.editRecord}"> 2 <img src="/img/icon/custom51_100/pencil16.png" alt="Edit Contact" title="Edit Contact" /> 3</div>
- 住所: force:navigateToURL が起動され、指定した url の Google マップが開きます。住所は、次のコンポーネントに対応します。
  1<div class="col-sm-4"> 2 <ui:outputTextArea aura:id="address" value="{!v.contact.MailingStreet}" click="{!c.navigate}"/> 3</div>

contactsController.js を開きます。hideSpinner コントローラの後に次のコードを入力して保存します。

1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17createRecord : function (component, event, helper) {
18    // Open the create record page
19    var createRecordEvent = $A.get("e.force:createRecord");
20    createRecordEvent.setParams({
21        "entityApiName": "Contact"
22    });
23    createRecordEvent.fire();
24},
25
26select : function(component, event, helper){
27    // Get the selected value of the ui:inputSelect component
28    var selectCmp = component.find("selection");
29    var selectVal = selectCmp.get("v.value");
30    
31    // Display all primary contacts or all contacts
32    if (selectVal==="All Primary"){
33        var action = component.get("c.getPrimary");
34        action.setCallback(this, function(response){
35            var state = response.getState();
36            if (component.isValid() && state === "SUCCESS") {
37                component.set("v.contacts", response.getReturnValue());
38            }
39        });
40        $A.enqueueAction(action);
41    }
42    else {
43        // Return all contacts
44        helper.getContacts(component);
45    }
46}

ページをプルダウンして離すと、ページのビューのすべてのデータが更新されます。この動作は、$A.get('e.force:refreshView').fire(); を実行する場合と似ています。

これで、「Salesforce1 のコンポーネントの作成」で強調表示された領域をクリックして、コンポーネントをテストできます。

Salesforce1 とは関係なく使用できるスタンドアロンアプリケーションの作成例については、「スタンドアロン Lightning アプリケーションを作成する」を参照してください。

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

イベントの起動