Fire the Events

Fire the events in your client-side controller or helper functions. The force events are handled by Salesforce1.

This demo builds on the contacts component you created in Load the Contacts.

In the contactList sidebar, click CONTROLLER to create a new resource named contactListController.js. Replace the placeholder code with the following code and then save.

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})

Refresh the Salesforce1 mobile browser app, and click these elements to test the events.
- Contact name: force:navigateToSObject is fired, which updates the view with the contact record page. The contact name corresponds to the following component.
  1<ui:outputText value="{!v.contact.Name}" click="{!c.gotoRecord}"/>
- Edit Contact icon: force:editRecord is fired, which opens the edit record page. The Edit Contact icon corresponds to the following component.
  1<div onclick="{!c.editRecord}"> 2 <img src="/img/icon/custom51_100/pencil16.png" alt="Edit Contact" title="Edit Contact" /> 3</div>
- Address: force:navigateToURL is fired, which opens Google Maps with the provided url. The address corresponds to the following component.
  1<div class="col-sm-4"> 2 <ui:outputTextArea aura:id="address" value="{!v.contact.MailingStreet}" click="{!c.navigate}"/> 3</div>

Open contactsController.js. After the hideSpinner controller, enter this code and then save.

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}

Notice that if you pull down the page and release it, the page refreshes all data in the view. This is similar to running $A.get('e.force:refreshView').fire();.

Now you can test your components by clicking on the areas highlighted in Create a Component for Salesforce1.

For an example on creating a standalone app that can be used independent of Salesforce1, see Create a Standalone Lightning App.

Lightning Components Developer’s Guide

Fire the Events