Thursday, May 16, 2019

Simple account search lightning component

Here we will build a simple account search lightning component based on the topics we have completed before this.

Component:

<aura:component controller="searchAccountController" >

    <aura:attribute name="keywordHolder" type="string" /> // Declaring attribute to hold value 

    <aura:attribute name="accountList" type="list" /> // Declaring attribute to hold account list

    <lightning:input name="AccountSearch"  label="Enter Account Name" value="{!v.keywordHolder}"/>  // Linking user input with attribute through value parameter.

    <lightning:button label="Search Account" onclick="{!c.findAccount}" />

    <aura:iteration var="acc" items="{!v.accountList}" >   // Displaying list of account
    {!acc.Name}
    {!acc.type}
        
    </aura:iteration>  

</aura:component>

Controller:

({
findAccount : function(component, event, helper) {
        
        var action=component.get('c.fetchAccount');
        action.setParams({
            searchKeyWord : component.get("v.keywordHolder")
            
        });   // setParams is optional, since we are expecting parameter in apex controller method we are passing the user entered value in apex controller method.
        
        action.setCallback(this,function(response){          // Getting the response back
            var state=response.getState();
            var response1=response.getReturnValue();
            if(state==="SUCCESS")
            {
                component.set("v.accountList",response1);
            }
            
        });
        $A.enqueueAction(action);

}
})

Apex Controller:

public 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 limit 1];

  for (Account acc: lstOfAccount) {
   returnList.add(acc);
  }
  return returnList;
 }
}

Application:

<aura:application extends="force:slds" >
<c:SimpleAccountSearch></c:SimpleAccountSearch>

</aura:application>


Output:

Account search Lightning components

No comments:

Post a Comment