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.

1({
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    relatedList : function (component, event, helper) {
22        // Navigate to the related cases
23        var relatedListEvent = $A.get("e.force:navigateToRelatedList");
24        relatedListEvent.setParams({
25            "relatedListId": "Cases",
26            "parentRecordId": component.get("v.contact.Id")
27        });
28        relatedListEvent.fire();
29    }
30})

Refresh the Salesforce1 mobile browser app, and click these elements to test the events.
- Contact: force:navigateToSObject is fired, which updates the view with the contact record page. The contact name corresponds to the following component.
  1<div onclick="{!c.gotoRecord}"> 2 <force:recordView recordId="{!v.contact.Id}" type="MINI"/> 3</div>
- Edit Contact button: force:editRecord is fired, which opens the edit record page. The Edit Contact icon corresponds to the following component.
  1<ui:button label="Edit" press="{!c.editRecord}"/>

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

1createRecord : 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 (component.isValid() && 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. Now you can test your components by clicking on the areas highlighted in Create a Component for Salesforce1 and Lightning Experience.

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

Lightning Components Developer Guide

Fire the Events