• Ganesh Gunagi
  • NEWBIE
  • 5 Points
  • Member since 2017

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 1
    Replies
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?
Hi All,

I have tried to use Recordsetvar attribute in page component for displaying the records with sample code, but records not displaying
here is my code
<apex:page standardController="Account" recordSetVar="accounts" tabstyle="account"
sidebar="false">
<apex:pageBlock >
<apex:pageBlockTable value="{!accounts}" var="a">
<apex:column value="{!a.name}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>

Adv Thnx
Siv
  • March 11, 2016
  • Like
  • 0