Lightning Components Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

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

Step 6: Make the App Interactive With Events

Events add an interactive layer to your app by enabling you to share data between components. When the checkbox is checked or unchecked in the expense list view, you want to fire an event that updates both the view and records based on the relevant component data.
This flowchart shows the data flow in the app when a data change is captured by the selecting and deselecting of a checkbox on the expenseList component. When the Reimbursed? checkbox is selected or deselected, this browser click event fires the application event you’re creating here. This event communicates the expense object to the handler component, and its controller calls the Apex controller method to update the relevant expense record, after which the response is ignored by the client since we won’t be handling this server response here.Clicking the checkbox on an expense triggers an event that updates the record.

Let’s start by creating the event and its handler before firing it and handling the event in the parent component.

  1. Click File | New | Lightning Event.
  2. Enter updateExpenseItem in the New Event window. This creates a new event, updateExpenseItem.evt.
  3. In updateExpenseItem.evt, enter this code.

    The attribute you’re defining in the event is passed from the firing component to the handlers.

    Replace namespace with the name of your registered namespace.

    1swfobject.registerObject("clippy.codeblock-0", "9");<aura:event type="APPLICATION">
2    <aura:attribute name="expense" type="namespace.Expense__c"/>
3</aura:event>

    The framework has two types of events: component events and application events. An application event is used here, which when fired notifies its handlers. In this case, form.cmp is notified and handles the event.

    Recall that expenseList.cmp contains the checkbox that’s wired up to a client-side controller action, denoted by change="{!c.update}". You’ll set up the update action next.

  4. In the expenseList sidebar, click CONTROLLER. This creates a new resource, expenseListController.js. Enter this code.
    Replace namespace with the name of your registered namespace.
    1swfobject.registerObject("clippy.codeblock-1", "9");({
2    update: function(component, evt, helper) {
3      var expense = component.get("v.expense");
4      var updateEvent = $A.get("e.namespace:updateExpenseItem");
5      updateEvent.setParams({ "expense": expense }).fire();
6    }
7})

    When the checkbox is checked or unchecked, the update action runs, setting the reimbursed parameter value to true or false. The updateExpenseItem.evt event is fired with the updated expense object .

  5. In the handler component, form.cmp, add this handler code before the <aura:attribute> tags.
    Replace namespace with the name of your registered namespace.
    1swfobject.registerObject("clippy.codeblock-2", "9");<aura:handler event="namespace:updateExpenseItem" action="{!c.updateEvent}" />

    This event handler runs the updateEvent action when the application event you created is fired.

  6. Wire up the updateEvent action to handle the event. In formController.js, enter this code after the createExpense controller action. 
    1swfobject.registerObject("clippy.codeblock-3", "9");updateEvent : function(component, event, helper) {
2    helper.upsertExpense(component, event.getParam("expense"));
3}

    This action calls a helper function and passes in event.getParam("expense"), which contains the expense object with its parameters and values in this format: { Name : "Lunch" , namespace__Client__c : "ABC Co." , namespace__Reimbursed__c : true , CreatedDate : "2014-08-12T20:53:09.000Z" , namespace__Amount__c : 20}.

That’s it! You have successfully added a layer of interaction in your expense tracker app using an application event. When you change the reimbursed status on the view, the update event is fired, handled by the parent component, which then updates the expense record by running the server-side controller action saveExpense.

Beyond the Basics

The framework fires several events during the rendering lifecycle, such as the init event you used in this tutorial. For example, you can also customize the app behavior during the waiting event when the client is waiting for a server response and when the doneWaiting event is fired to signal that the response has been received. This example shows how you can add text in the app during the waiting event, and remove it when the doneWaiting event is fired. 

1<!-- form.cmp markup -->
2<aura:handler event="aura:waiting" action="{!c.waiting}"/>
3<aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>
4<aura:attribute name="wait" type="String"/>
5
6<div class="wait">
7    {!v.wait}
8</div>
1/** formController.js **/
2waiting : function(component, event, helper) {
3    component.set("v.wait", "updating...");
4},
5doneWaiting : function(component, event, helper) {
6    component.set("v.wait", "");
7}

The app displays this text when you click the Submit button to create a new record or when you click the checkbox on an expense item. For more information, see Events Fired During the Rendering Lifecycle.

The app you just created is currently accessible as a standalone app by accessing https://<mySalesforceInstance>.lightning.force.com/<namespace>/expenseTracker.app, where <mySalesforceInstance> is the name of the instance hosting your org; for example, na1. To make it accessible in Salesforce1, see Adding Lightning Components to Salesforce1. To package and distribute your app on AppExchange, see Distributing Applications and Components.