Newer Version Available

This content describes an older version of this product. View Latest

Fire the Events

Fire the events in your client-side controller or helper functions. The force events are handled by Lightning Experience and the Salesforce mobile app, but let’s view and test the components in Lightning Experience to simplify things.
This demo builds on the contacts component you created in Load the Contacts.
  1. In the contacts sidebar, click CONTROLLER to create a resource named contactsController.js. Replace the placeholder code with the following code and then save.
    The onclick event handler in the following button component triggers the goToRecord client-side controller when the button is clicked.
    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 the Salesforce app. For more information, see Events Handled in the Salesforce Mobile App and Lightning Experience.
  2. 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 Aura components are endless. While we showed you how to surface a component via a tab in Lightning Experience and the Salesforce app, you can take this tutorial further by surfacing the component on record pages via the Lightning App Builder and even Experience Builder. To explore the possibilities, blaze the trail with the resources available at Trailhead: Explore Lightning Aura Components Resources.