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

Component Event Example

Here’s a simple use case of using a component event to update an attribute in another component.
  1. A user clicks a button in the notifier component, ceNotifier.cmp.
  2. The client-side controller for ceNotifier.cmp sets a message in a component event and fires the event.
  3. The handler component, ceHandler.cmp, contains the notifier component, and handles the fired event.
  4. The client-side controller for ceHandler.cmp sets an attribute in ceHandler.cmp based on the data sent in the event.

The event and components in this example are in a docsample namespace. There is nothing special about this namespace but it’s referenced in the code in a few places. Change the code to use a different namespace if you prefer.

Component Event

ceEvent.evt

This component event has one attribute. We’ll use this attribute to pass some data in the event when it’s fired.

1swfobject.registerObject("clippy.codeblock-0", "9");<aura:event type="COMPONENT">
2    <aura:attribute name="message" type="String"/>
3</aura:event>

Notifier Component

ceNotifier.cmp

The component uses aura:registerEvent to declare that it may fire the component event.

The button in the component contains a press browser event that is wired to the fireComponentEvent action in the client-side controller. The action is invoked when you click the button.

1swfobject.registerObject("clippy.codeblock-1", "9");<aura:component>
2    <aura:registerEvent name="cmpEvent" type="docsample:ceEvent"/>
3
4    <h1>Simple Component Event Sample</h1>
5    <p><ui:button
6        label="Click here to fire a component event"
7        press="{!c.fireComponentEvent}" />
8    </p>
9</aura:component>

ceNotifierController.js

The client-side controller gets an instance of the event by calling cmp.getEvent("cmpEvent"), where cmpEvent matches the value of the name attribute in the <aura:registerEvent> tag in the component markup. The controller sets the message attribute of the event and fires the event.

1swfobject.registerObject("clippy.codeblock-2", "9");{
2    fireComponentEvent : function(cmp, event) {
3        // Get the component event by using the
4        // name value from aura:registerEvent
5        var cmpEvent = cmp.getEvent("cmpEvent");
6        cmpEvent.setParams({
7            "message" : "A component event fired me. " +
8            "It all happened so fast. Now, I'm here!" });
9        cmpEvent.fire();
10    }
11}

Handler Component

ceHandler.cmp

The handler component contains the <docsample:ceNotifier> component and uses the value of the name attribute, cmpEvent, from the <aura:registerEvent> tag in <docsample:ceNotifier> to register the handler.

When the event is fired, the handleComponentEvent action in the client-side controller of the handler component is invoked.

1swfobject.registerObject("clippy.codeblock-3", "9");<aura:component>
2    <aura:attribute name="messageFromEvent" type="String"/>
3    <aura:attribute name="numEvents" type="Integer" default="0"/>
4
5    <!-- handler contains the notifier component 
6     Note that cmpEvent is the value of the name attribute in aura:registerEvent
7     in ceNotifier.cmp -->
8    <docsample:ceNotifier cmpEvent="{!c.handleComponentEvent}"/>
9    
10    <p>{!v.messageFromEvent}</p>
11    <p>Number of events: {!v.numEvents}</p>
12
13</aura:component>

ceHandlerController.js

The controller retrieves the data sent in the event and uses it to update the messageFromEvent attribute in the handler component.

1swfobject.registerObject("clippy.codeblock-4", "9");{
2    handleComponentEvent : function(cmp, event) {
3        var message = event.getParam("message");
4
5        // set the handler attributes based on event data
6        cmp.set("v.messageFromEvent", message);
7        var numEventsHandled = parseInt(cmp.get("v.numEvents")) + 1;
8        cmp.set("v.numEvents", numEventsHandled);
9    }
10}

Put It All Together

You can test this code by adding the resources to a sample application and navigating to the handler component. For example, if you have a docsample application, navigate to:

http://<mySalesforceInstance>/<namespace>/docsample/ceHandler.cmp, where mySalesforceInstance is the name of the instance hosting your org; for example, na1.salesforce.com.

If you want to access data on the server, you could extend this example to call a server-side controller from the handler’s client-side controller.