[SalesForce] fire an application event from a Lightning callback function

Essentially I want to be able to fire off an application event in the callback for an action. At first I thought maybe it was not working because the fire was happening in a helper method, so I moved all the code back into the controller, but my application event is still never firing.

I have changed my code several times trying to see if I can make this work and I am thinking that the framework is not going to allow me to do this, but I would love for someone to tell me if there is another way to accomplish this. I basically want to call a function in my handler component, which is not nested because I want it to function independently. But maybe this will just not work. Anyone know?

Here is the controller code:

newRace : function(component, event, helper) {
    console.log("In newRace");
    var race = component.get("v.newRace");
    var action = component.get("c.newRaceDB");
    action.setParams({ "race" : race });
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            console.log("Race successfully saved");
            var appEvent = $A.get("e.c:updateRaceList");
            appEvent.setParams({ "race" : response.getReturnValue() });
            appEvent.fire(); 
        }
    });
    $A.enqueueAction(action);

}   

And this is the NewRace component:

<aura:component    implements="force:appHostable,flexipage:availableForAllPageTypes" controller="NewRaceController">
<aura:attribute name="newRace" type="Race__c"
     default="{ 'sobjectType': 'Race__c',
                     'Name': 'New Race',
                     'Type__c': '',
                     'DateTime__c': '', 
                     'Location': '',
                     'Attended__c': false,
                       'Results__c': ''
                   }"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:registerEvent name="updateRaces" type="c:updateRaceList" />

<ltng:require styles="/resource/slds/assets/styles/salesforce-lightning-design-system.min.css"/>

<div class="slds">
    <div class="slds-m-around--small slds-p-top--large">
        <div class="slds-form--stacked">
           <h1 class="slds-text-heading--label slds-p-bottom--large" 
               title="Enter New Race">Enter New Race</h1>

            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <ui:inputText label="Race Name" 
                                  aura:id="Name"
                                  class="slds-input" 
                                  labelClass="slds-form-element__label" 
                                  value="{!v.newRace.Name}"
                                  required="true" />
                </div>
            </div>

            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <ui:inputSelect label="Race Type" 
                                    aura:id="Type" 
                                    class="slds-select" 
                                    labelClass="slds-form-element__label"
                                    value="{!v.newRace.Type__c}" />
                </div>
            </div>

            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <ui:inputDateTime label="Date/Time" 
                                      aura:id="DateTime" 
                                      class="slds-input" 
                                      labelClass="slds-form-element__label" 
                                      displayDatePicker="true"
                                      value="{!v.newRace.DateTime__c}" />
                </div>
            </div>

            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <ui:inputTextArea label="Location" 
                                      aura:id="Location"
                                      class="slds-textarea" 
                                      labelClass="slds-form-element__label"
                                      value="{!v.newRace.Location__c}" />
                </div>
            </div>

            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <ui:inputCheckbox label="Attended?" 
                                      aura:id="Attended"
                                      class="slds-checkbox" 
                                      labelClass="slds-form-element__label"
                                      value="{!v.newRace.Attended__c}" />
                </div>
            </div>

            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <ui:inputText label="Results" 
                                  aura:id="Results"
                                  class="slds-input" 
                                  labelClass="slds-form-element__label"
                                  value="{!v.newRace.Results__c}" />
                </div>
            </div>

            <div class="slds-form-element">
                <ui:button press="{!c.newRace}" 
                           label="Submit" 
                           class="slds-button slds-button--neutral" />
            </div>
        </div>
    </div>
</div>

</aura:component>

And this is the event:

<aura:event type="APPLICATION">
    <aura:attribute name="race" type="Race__c" />
</aura:event>

And this is the code for the handling component

EDIT: And this is where the problem was. The handler here had a name attribute and you cannot have one. Once I removed that, it started firing my app event.

<aura:component  implements="force:appHostable,flexipage:availableForAllPageTypes" controller="ListRacesController">
    <aura:attribute name="races" type="Race__c[]"  />

  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
 <aura:handler event="c:updateRaceList" action="{!c.handleUpdateRaces}" />

<ltng:require styles="/resource/slds100/assets/styles/salesforce-lightning-design-system.min.css"/>
<div class="slds">
    <div class="slds-m-around--small slds-p-top--large">
        <div class="slds-card">
            <aura:iteration items="{!v.races}" var="race">
                <header class="slds-card__header">
                    <ui:outputText class="slds-text-heading--label" value="{!race.Name}" />
                </header>
                <section class="slds-card__body">
                    <div class="slds-tile slds-hint-parent">
                        <p class="slds-tile__title slds-truncate">Race Type: 
                            <ui:outputText value="{!race.Type__c}" />
                        </p>
                        <p class="slds-truncate">Location: 
                            <ui:outputText value="{!race.Location__c}"/>
                        </p>
                        <p class="slds-truncate">Date/Time:
                            <ui:outputDateTime value="{!race.DateTime__c}" />
                        </p>
                        <p class="slds-truncate">Attended?
                            <ui:inputCheckbox value="{!race.Attended__c}" />
                        </p>
                        <p class="slds-truncate">Results: 
                            <ui:outputTextArea value="{!race.Results__c}"/>
                        </p>
                    </div>
                </section>
            </aura:iteration>
        </div>
    </div>
</div>

And this is it's controller: This is the code that is never executing and I do not know why.

handleUpdateRaces : function(component, event, helper) {
    console.log("calling updateRaces in ListRaceController");
    var race = event.getParam("race");
    var races = component.get("v.races");
    races.push(race);
    component.set("v.races", races);
}

Best Answer

The issue here is for Application events as mentioned in the docs the handler syntax is not to have name attribute

Modify your handler as below

 <aura:handler event="c:updateRaceList" action="{!c.handleUpdateRaces}" />