Handling Custom Events in the Lightning Component Framework - Full & Working Code

This is an implementation of - Handling Custom Events in the Lightning Component Framework



Create Event > Register in the Component > Fire in the Component Controller/helper > Declare the Handler in target component/application > handle the event in target Controller/helper

contactSearchCompleteEvent.evt


<aura:event type="COMPONENT" description="Fired when a Contact search is completed">

    <aura:attribute name="contacts" type="Contact[]" description="The result of the search, which could be an empty array"/>

</aura:event>

ContactSearchController.apxc


public class ContactSearchController {
@AuraEnabled
    public static List<Contact> getContacts(String searchString) {

        return [SELECT Id, Name, Email FROM Contact where Name Like: '%'+searchString+'%'];
    }
}

contactSearch.cmp


<aura:component controller="ContactSearchController">
    <aura:registerEvent name="contactSearchComplete" type="c:contactSearchCompleteEvent"/>
<!--   

<div class="searchInput">
     <ui:inputText label="Term" aura:id="searchTerm" value="" placeholder="Enter term" />
    </div>
    <ui:button label="Search" press="{!c.doSearch}" class="action-button" />
-->
    <!-- lightning version of the above code -->
    <form class="slds-form--inline">
        <div class="slds-form-element">
            <lightning:input aura:id="searchTerm" type="search" label="Search Term" class="slds-input" name="search" />
        </div>
        <div class="slds-form-element">
            <lightning:button variant="brand" label="Search" iconName="utility:search" iconPosition="left" onclick="{! c.doSearch }" />
        </div>
    </form>
    <lightning:spinner variant="brand" size="large" aura:id="mySpinner" class="slds-hide"/>
</aura:component>

contactSearchController.js


({
    doSearch: function(component, event, helper){
        var spinner = component.find("mySpinner");

        $A.util.toggleClass(spinner, "slds-hide");
        var action = component.get("c.getContacts");
        var searchText = component.find("searchTerm").get("v.value");
        console.log('searchText :: ' + searchText);
        action.setParams({
            "searchString": searchText!=null?searchText:''
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log('Contacts : ' + JSON.stringify(response.getReturnValue()));
helper.fireSearchCompleteEvent(component,response.getReturnValue());
                $A.util.toggleClass(spinner, "slds-hide");
            }
        });
        $A.enqueueAction(action);
    }
})

contactSearchHelper.js


({
    fireSearchCompleteEvent : function(component, contacts) {
        var searchCompleteEvent = component.getEvent("contactSearchComplete");

        searchCompleteEvent.setParams({
            contacts: contacts
        }).fire();
    }
})


contactTable.cmp


<aura:component >
    <aura:attribute name="contacts" type="Contact[]"/>
    <aura:if isTrue="{!v.contacts.length!=0}">

        <table class="slds-table slds-table--bordered slds-table--cell-buffer">
            <thead>
                <tr>
                    <th>Name</th><th>Email</th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration var="contact" items="{!v.contacts}">
                    <tr>
                        <td>{!contact.Name}</td><td>{!contact.Email}</td>
                    </tr>
                </aura:iteration>   
            </tbody>
        </table>
        <aura:set attribute="else">
            No records to show
        </aura:set>
    </aura:if> 
</aura:component>

contactSearchApp.app


<aura:application extends="force:slds">
    <aura:attribute name="appContacts" type="Contact[]"/>
     <div class="app">

        <c:contactSearch contactSearchComplete="{!c.handleContactSearchComplete}"/>
        <div class="table">
            <c:contactTable aura:id="contactList" contacts="{!v.appContacts}"/>
        </div>
    </div>
</aura:application>

contactSearchAppController.js


({
    handleContactSearchComplete : function(component, event, helper) {
        component.set("v.appContacts", event.getParam("contacts"));

    }
})

Comments

Post a Comment

Popular Posts