Fire the events in your client-side controller or helper functions. The force events are handled by Lightning Experience and Salesforce1, but let’s view and test
the components in Lightning Experience to
simplify things.
-
In the contacts sidebar, click CONTROLLER to create a resource
named contactsController.js. Replace the placeholder code
with the following code and then save.
({
goToRecord : function(component, event, helper) {
var sObjectEvent = $A.get("e.force:navigateToSObject");
sObjectEvent.setParams({
"recordId": component.get("v.contact.Id")
})
sObjectEvent.fire();
}
})
The
onclick event handler in the
following button component triggers the
goToRecord client-side controller when the button is clicked.
<lightning:button name="details" label="Details" onclick="{!c.goToRecord}" />
You
set the parameters to pass into the events using the
event.setParams() syntax. In this case,
you’re passing in the Id of the contact record to navigate to. There are
other events besides
force:navigateToSObject that simplify navigation within Lightning Experience and Salesforce1. For
more information, see
Events Handled In Salesforce1 and Lightning Experience.
-
To test the event, refresh your custom tab in Lightning Experience, and click
the Details button.
The force:navigateToSObject is fired,
which updates the view to display the contact record page.
We stepped through creating a component that loads contact data using a combination
of client-side controllers and Apex controller methods to create a custom UI with
your Salesforce data. The
possibilities of what you can do with Lightning components are endless. While we
showed you how to surface a component via a tab in Lightning Experience and Salesforce1, you can take
this tutorial further by surfacing the component on record pages via the Lightning App Builder and
even Communities. To explore the possibilities, blaze the trail with the resources available at
Trailhead: Explore Lightning Components Resources.