Component Event Example

Component Event

The ceEvent.evt 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");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:ceEvent-->
18<aura:event type="COMPONENT">
19    <aura:attribute name="message" type="String"/>
20</aura:event>

Notifier Component

The ceNotifier.cmp 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");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:ceNotifier-->
18<aura:component>
19    <aura:registerEvent name="cmpEvent" type="docsample:ceEvent"/>
20
21    <h1>Simple Component Event Sample</h1>
22    <p><ui:button
23        label="Click here to fire a component event"
24        press="{!c.fireComponentEvent}" />
25    </p>
26</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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17{
18    fireComponentEvent : function(cmp, event) {
19        // Get the component event by using the
20        // name value from aura:registerEvent
21        var cmpEvent = cmp.getEvent("cmpEvent");
22        cmpEvent.setParams({
23            "message" : "A component event fired me. " +
24            "It all happened so fast. Now, I'm here!" });
25        cmpEvent.fire();
26    }
27}

Handler Component

The ceHandler.cmp 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");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:ceHandler-->
18<aura:component>
19    <aura:attribute name="messageFromEvent" type="String"/>
20    <aura:attribute name="numEvents" type="Integer" default="0"/>
21
22    <!-- handler contains the notifier component 
23     Note that cmpEvent is the value of the name attribute in aura:registerEvent
24     in ceNotifier.cmp -->
25    <docsample:ceNotifier cmpEvent="{!c.handleComponentEvent}"/>
26    
27    <p>{!v.messageFromEvent}</p>
28    <p>Number of events: {!v.numEvents}</p>
29
30</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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17{
18    handleComponentEvent : function(cmp, event) {
19        var message = event.getParam("message");
20
21        // set the handler attributes based on event data
22        cmp.set("v.messageFromEvent", message);
23        var numEventsHandled = parseInt(cmp.get("v.numEvents")) + 1;
24        cmp.set("v.numEvents", numEventsHandled);
25    }
26}

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.