Handling Custom Events in the Lightning Component Framework - Full & Working Code
This is an implementation of - Handling Custom Events in the Lightning Component Framework
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 {
@AuraEnabledpublic 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"));
}
})
nice post
ReplyDelete