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    gotoRecord : function(component, event, helper) {
3        // Fire the event to navigate to the contact record
4        var sObjectEvent = $A.get("e.force:navigateToSObject");
5        sObjectEvent.setParams({
6            "recordId": component.get("v.contact.Id"),
7            "slideDevName": 'related'
8        })
9        sObjectEvent.fire();
10    },
11    
12    editRecord : function(component, event, helper) {
13        // Fire the event to navigate to the edit contact page
14        var editRecordEvent = $A.get("e.force:editRecord");
15        editRecordEvent.setParams({
16            "recordId": component.get("v.contact.Id")
17        });
18        editRecordEvent.fire();
19    },
20    
21    navigate : function(component, event, helper) {
22        // Navigate to an external URL
23        var address = component.find("address").get("v.value");
24        var urlEvent = $A.get("e.force:navigateToURL");
25        urlEvent.setParams({
26          "url": 'https://www.google.com/maps/place/' + address
27        });
28        urlEvent.fire();
29    },
30
31    relatedList : function (component, event, helper) {
32        // Navigate to the related cases
33        var relatedListEvent = $A.get("e.force:navigateToRelatedList");
34        relatedListEvent.setParams({
35            "relatedListId": "Cases",
36             "parentRecordId": component.get("v.contact.Id")
37        });
38        relatedListEvent.fire();
39    }
40})

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");createRecord : function (component, event, helper) {
2    // Open the create record page
3    var createRecordEvent = $A.get("e.force:createRecord");
4    createRecordEvent.setParams({
5        "entityApiName": "Contact"
6    });
7    createRecordEvent.fire();
8},
9
10select : function(component, event, helper){
11    // Get the selected value of the ui:inputSelect component
12    var selectCmp = component.find("selection");
13    var selectVal = selectCmp.get("v.value");
14    
15    // Display all primary contacts or all contacts
16    if (selectVal==="All Primary"){
17        var action = component.get("c.getPrimary");
18        action.setCallback(this, function(response){
19            var state = response.getState();
20            if (state === "SUCCESS") {
21                component.set("v.contacts", response.getReturnValue());
22            }
23        });
24        $A.enqueueAction(action);
25    }
26    else {
27        // Return all contacts
28        helper.getContacts(component);
29    }
30}

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 Try It Out: Create a Component that Fires Salesforce1 Events.

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

No Results

Fire the Events