+ Start a Discussion
Swamy PSwamy P 

Not able to show Accounts in Lightning page

Hello Team,
I have a functionality to show the accounts based on the search result, here is my code. 
APP:
<aura:application >
    <c:SearchBarCmp />
    <c:AccountListCmp />
</aura:application>

AccountList Component:
<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="Swamy_2011.AccountsWithContactsSearchController">
    <aura:attribute name="accnts" type="Account[]"/>
    <aura:handler event="Swamy_2011:SearchKeyChange" action="{!c.SearchKeyChange}"/>
    
    <aura:iteration items="{!v.accnts}" var="acc">
        <p>{!acc.Name}</p>
    </aura:iteration>
</aura:component>

AccListCmpJS:
({
    SearchKeyChange : function(component, event, helper) {
        var searchKey = event.getParam("searchKey");
        var action = component.get("c.accByIds");
        action.setParams({
          "searchKey": searchKey
        });
        action.setCallback(this, function(a) {
            component.set("v.accnts", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

Class:
public class AccountsWithContactsSearchController {
    
    @AuraEnabled
    Public static List<Account> accByIds(string accId){
        List<Account> acc = new List<Account>();
            String name =  string.escapesinglequotes(accId) + '%';
            acc = [Select Id, Name, Type from Account where Name Like:name];
        return acc;
    }
}

Same logic working for Contact records, Suggest me where i missed the code for Account, i hope everything perfect otherthan CSS.

Thanks,
Swamy P R N.
amidstcloudamidstcloud
What is the error you are getting . ?  Put a console.log('----')  in the SearchKeyChange and check if the event is being fired and handled by this function.
Akshay_DhimanAkshay_Dhiman
Hi Swamy  ,

Below is a code for the same . Hope it will help you.

Aura Component Code :
<aura:component controller="searchAccountController">
<aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
  <aura:attribute name="searchKeyword" type="String" description="use for store user search input"/>
  <aura:attribute name="Message" type="boolean" default="false" description="use for display no record found message"/>
  <div class="slds-m-around--large">
     <form class="slds-form--inline">
        <div class="slds-form-element">
           <label class="slds-form-element__label" for="search"></label>
           <div class="slds-form-element__control">
              <ui:inputText aura:id="searchId" class="slds-input" value="{!v.searchKeyword}" required="true" placeholder="Type here..."/>
           </div>
        </div>
        <div class="slds-form-element">
           <button type="button" onclick="{!c.Search}" class="slds-button slds-button--brand">Search</button>
        </div>
     </form>
     <table class="slds-table slds-table--bordered slds-table--cell-buffer">
        <thead>
           <tr class="slds-text-title--caps">
              <th scope="col">
                 <div class="slds-truncate" title="Id">Id</div>
              </th>
              <th scope="col">
                 <div class="slds-truncate" title="Account Name">Account Name</div>
              </th>
              <th scope="col">
                 <div class="slds-truncate" title="Type">Type</div>
              </th>
              <th scope="col">
                 <div class="slds-truncate" title="Industry">Industry</div>
              </th>
              <th scope="col">
                 <div class="slds-truncate" title="Phone">Phone</div>
              </th>
              <th scope="col">
                 <div class="slds-truncate" title="Fax">Fax</div>
              </th>
           </tr>
        </thead>
        <tbody>
           <aura:iteration items="{!v.searchResult}" var="acc">
              <tr>
                 <td>
                    <div class="slds-truncate">{!acc.Id}</div>
                 </td>
                 <td>
                    <div class="slds-truncate">{!acc.Name}</div>
                 </td>
                 <td>
                    <div class="slds-truncate">{!acc.Type}</div>
                 </td>
                 <td>
                    <div class="slds-truncate">{!acc.Industry}</div>
                 </td>
                 <td>
                    <div class="slds-truncate">{!acc.Phone}</div>
                 </td>
                 <td>
                    <div class="slds-truncate">{!acc.Fax}</div>
                 </td>
              </tr>
           </aura:iteration>
        </tbody>
     </table>
  </div>
</aura:component>

Aura App Code :
<aura:application extends="force:slds">
   <c:richtexteditor/>
</aura:application>
Aura Controller Code :
 
({
   Search: function(component, event, helper) {
       
       var searchKeyFld = component.find("searchId");
       var srcValue = searchKeyFld.get("v.value");
       if (srcValue == '' || srcValue == null) {
           // display error message if input value is blank or null
           searchKeyFld.set("v.errors", [{
               message: "Enter Search Keyword."
           }]);
       }
       else {
           //searchKeyFld.set("v.errors", null);
           // call helper method
           console.log('in controller');
           helper.SearchHelper(component, event,helper);
       }
   },
})

Aura Helper Code :
 
({
   SearchHelper: function(component, event,helper) {
       console.log('in helper');
       var action = component.get("c.fetchAccount");
      
       action.setParams({
           'searchKeyWord': component.get("v.searchKeyword")
       });
       action.setCallback(this, function(response) {
           var state = response.getState();
           if (state === "SUCCESS") {
               var storeResponse = response.getReturnValue();
               console.log('response--->>'+storeResponse);
               if (storeResponse.length == 0) {
                   component.set("v.Message", true);
               } else {
                   component.set("v.Message", false);
               }
              component.set("v.searchResult", storeResponse);
           }
       });
       $A.enqueueAction(action);
   },
})

Apex Class Code :
 
public with sharing class searchAccountController {
   
​   @AuraEnabled
   public static List < account > fetchAccount(String searchKeyWord) {
       String searchKey = searchKeyWord + '%';
       List < Account > returnList = new List < Account > ();
       List < Account > lstOfAccount = [select id, Name, Type, Industry, Phone, Fax from account where Name LIKE: searchKey];
       
       for (Account acc: lstOfAccount) {
           returnList.add(acc);
       }
       return returnList;
   }
}

SCREENSHOT :

User-added image

User-added image


Regards, 
Akshay