You need to sign in to do that
Don't have an account?
Ganesh Gunagi
Application event handling
This is just a demo that I was playing around with application events.
<!-- FilterAccountsComponent.cmp-->
Here i have registered the application event
<aura:component controller="AccountsList" implements="force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickAction">
<aura:attribute type="List" name="accountValues"/>
<aura:attribute type="String" name="searchString"/>
<aura:registerEvent type="c:FilterComponentEvent" name="filterAppEvent"/>
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<lightning:button label="Filter" type="button" variant="Brand" onclick="{!c.showField}"/><br/>
<div id="fiterFields" style="display:none" class="slds-col slds-size_1-of-6">
<lightning:input label="Search" value="{!v.searchString}" placeholder="Enter some value"/>
<lightning:button label="Search" type="button" variant="Neutral" onclick="{!c.fireEvent}"/>
</div>
<br/>
<table class="slds-table slds-table_cell-buffer slds-table_bordered" aria-labelledby="element-with-table-label other-element-with-table-label">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Id">Account Id</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Phone">Account Phone</div>
</th>
</tr>
</thead>
<aura:iteration items="{!v.accountValues}" var="acc">
<tbody>
<td>
{!acc.Name}
</td>
<td>
{!acc.Id}
</td>
<td>
{!acc.Phone}
</td>
</tbody>
</aura:iteration>
</table>
</aura:component>
<!--FilterAccountsComponentController.js-->
Firing the application event
({
doInit : function(component, event, helper) {
var cmp = component.get("c.getAllAccounts");
cmp.setCallback(this,function(response){
if(response.getState()==='SUCCESS'){
component.set("v.accountValues",response.getReturnValue());
}else{
alert('error occurred');
}
});
$A.enqueueAction(cmp);
},
showField : function(component,event,helper){
document.getElementById('fiterFields').style.display='block';
},
fireEvent : function(component,event,helper){
var stringval = component.get("v.searchString");
var actionEvent = $A.get("e.c:FilterComponentEvent");
actionEvent.setParams({
'searchkey':stringval
});
actionEvent.fire();
console.log('fired event');
}
})
Another component, FilterComponentEventParent.cmp
Here I am handling the event.
<aura:component controller="AccountsList" implements="force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickAction">
<aura:handler event="c:FilterComponentEvent" action="{!c.showRecords}"/>
<aura:attribute type="List" name="accountValues"/>
<table class="slds-table slds-table_cell-buffer slds-table_bordered" aria-labelledby="element-with-table-label other-element-with-table-label">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Id">Account Id</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Phone">Account Phone</div>
</th>
</tr>
</thead>
<aura:iteration items="{!v.accountValues}" var="acc">
<tbody>
<td>
{!acc.Name}
</td>
<td>
{!acc.Id}
</td>
<td>
{!acc.Phone}
</td>
</tbody>
</aura:iteration>
</table>
</aura:component>
<!--FilterComponentEventParentController.js-->
({
showRecords : function(component, event, helper) {
alert('in showrecords');
var params = event.getParam('searchkey');
if(params != null){
var action = component.get("c.getAllAccountsString");
action.setParams({
'name':params
});
action.setCallback(this,function(response){
if(response.getState()==='SUCCESS'){
component.set("v.accountValues",response.getReturnValue());
}else{
alert('error');
}
});
$A.enqueueAction(action);
}
}
})
Query: When I use FilterAccountsComponent in Lightning Page, I am communicate with the handler component. Tried checking with console.log in the firing component's js, it is executing but event is not handled.
Any suggestions or am i missing something?
<!-- FilterAccountsComponent.cmp-->
Here i have registered the application event
<aura:component controller="AccountsList" implements="force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickAction">
<aura:attribute type="List" name="accountValues"/>
<aura:attribute type="String" name="searchString"/>
<aura:registerEvent type="c:FilterComponentEvent" name="filterAppEvent"/>
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<lightning:button label="Filter" type="button" variant="Brand" onclick="{!c.showField}"/><br/>
<div id="fiterFields" style="display:none" class="slds-col slds-size_1-of-6">
<lightning:input label="Search" value="{!v.searchString}" placeholder="Enter some value"/>
<lightning:button label="Search" type="button" variant="Neutral" onclick="{!c.fireEvent}"/>
</div>
<br/>
<table class="slds-table slds-table_cell-buffer slds-table_bordered" aria-labelledby="element-with-table-label other-element-with-table-label">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Id">Account Id</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Phone">Account Phone</div>
</th>
</tr>
</thead>
<aura:iteration items="{!v.accountValues}" var="acc">
<tbody>
<td>
{!acc.Name}
</td>
<td>
{!acc.Id}
</td>
<td>
{!acc.Phone}
</td>
</tbody>
</aura:iteration>
</table>
</aura:component>
<!--FilterAccountsComponentController.js-->
Firing the application event
({
doInit : function(component, event, helper) {
var cmp = component.get("c.getAllAccounts");
cmp.setCallback(this,function(response){
if(response.getState()==='SUCCESS'){
component.set("v.accountValues",response.getReturnValue());
}else{
alert('error occurred');
}
});
$A.enqueueAction(cmp);
},
showField : function(component,event,helper){
document.getElementById('fiterFields').style.display='block';
},
fireEvent : function(component,event,helper){
var stringval = component.get("v.searchString");
var actionEvent = $A.get("e.c:FilterComponentEvent");
actionEvent.setParams({
'searchkey':stringval
});
actionEvent.fire();
console.log('fired event');
}
})
Another component, FilterComponentEventParent.cmp
Here I am handling the event.
<aura:component controller="AccountsList" implements="force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickAction">
<aura:handler event="c:FilterComponentEvent" action="{!c.showRecords}"/>
<aura:attribute type="List" name="accountValues"/>
<table class="slds-table slds-table_cell-buffer slds-table_bordered" aria-labelledby="element-with-table-label other-element-with-table-label">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Id">Account Id</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Phone">Account Phone</div>
</th>
</tr>
</thead>
<aura:iteration items="{!v.accountValues}" var="acc">
<tbody>
<td>
{!acc.Name}
</td>
<td>
{!acc.Id}
</td>
<td>
{!acc.Phone}
</td>
</tbody>
</aura:iteration>
</table>
</aura:component>
<!--FilterComponentEventParentController.js-->
({
showRecords : function(component, event, helper) {
alert('in showrecords');
var params = event.getParam('searchkey');
if(params != null){
var action = component.get("c.getAllAccountsString");
action.setParams({
'name':params
});
action.setCallback(this,function(response){
if(response.getState()==='SUCCESS'){
component.set("v.accountValues",response.getReturnValue());
}else{
alert('error');
}
});
$A.enqueueAction(action);
}
}
})
Query: When I use FilterAccountsComponent in Lightning Page, I am communicate with the handler component. Tried checking with console.log in the firing component's js, it is executing but event is not handled.
Any suggestions or am i missing something?
Please use below code:-
FilterComponentEventParent.cmp
if you need any assistanse, Please let me know!!
Kindly mark my solution as the best answer if it helps you.
Thanks
Mukesh