Skip to main content

Account Search Lightning Component using lightning:datatable and KeyUp event Salesforce

In this post we will see how can we use the out-of-the-box lightning data table to show the account search result. This can be used in many place since search is a very common requirement.

Account Search Lightning Component using lightning:datatable and KeyUp event in Salesforce.com


AccountSearch.cmp

<aura:component controller="AccountSearchController" implements="force:appHostable,lightning:actionOverride,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:isUrlAddressable" access="global">
<aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="selectedRows" type="List" />
    <aura:attribute name="maxRowSelection" type="Integer" default="1"/> 
    <aura:attribute name="selectedRowsList" type="List" />
    <aura:attribute name="searchString" type="String" default=""/>
    <aura:attribute name="AccountObj" type="Account" default="{ 'sobjectType': 'Account' }" />
<aura:attribute name="recordSaveError" type="String" default=""/>
    <aura:handler name="init" value="{!this}" action="{!c.doint}"/>
 
    <!-- HEADER START-->
    <!-- Header with details about the account --> 
    <div class="slds-modal__header">
        <lightning:layout >
         
            <lightning:layoutItem >
                <lightning:icon iconName="standard:account" size="small" alternativeText="Account Search"/>
            </lightning:layoutItem>
            <lightning:layoutItem padding="horizontal-small">
                <div >
                    <h2 class="slds-text-heading--medium">Account Search</h2>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
    <!--HEADER END-->
    <!--CONTENT START-->
    <div class="slds-modal__content slds-p-around_medium" id="modalid">
        <div class=" slds-box slds-theme_default" >
            <aura:if isTrue="{!not(empty(v.recordSaveError))}">
                <div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert">
                    <span class="slds-assistive-text">error</span>
               
                    <h2>{!v.recordSaveError}
                    </h2><span class="slds-p-horizontal_small">     
                    <lightning:icon iconName="utility:close" alternativeText="Error!" variant="inverse" size="x-small"/>
                    </span>
                </div>
            </aura:if>
            <lightning:messages />
            <div class="slds-section slds-is-open" >
                <h3 class="slds-section__title slds-theme--shade">
                    <button class="slds-button slds-section__title-action">
                        <span>
                            Account Name
                        </span>
                    </button>
                </h3>
            </div>
        </div>
        <lightning:layout  >
                <lightning:layoutItem   size="6" padding="around-small" >
                    <div class="slds-form-element slds-lookup" data-select="single">
                        <label class="slds-form-element__label" for="form-element-03">
                            <abbr class="slds-required" title="required">*</abbr>Account Name</label>
                        <div class="slds-form-element__control">
                            <div class="slds-input-has-icon slds-input-has-icon--right">
                                <lightning:buttonIcon iconName="utility:down" variant="bare" onclick="{! c.Search }" alternativeText="Search" class="slds-input__icon leftPaddingClass" />
                                <ui:inputText updateOn="keyup" keyup="{!c.Search}" value="{!v.AccountObj.Name}" class="slds-lookup__search-input slds-input " placeholder="Search" />
                            </div>
                        </div>
                    </div>
                 
                </lightning:layoutItem>
       </lightning:layout>
       <lightning:layout class="slds-border_bottom" >
                <lightning:layoutItem size="12" padding="around-small" >                 
                    <div class="slds-hide" aura:id="dataTable">
                        <div class="slds-box">
                            <lightning:layout >                             
                                <lightning:layoutItem>
                                    <lightning:icon iconName="standard:account" size="small" alternativeText="Account Search"/>
                                </lightning:layoutItem>
                                <lightning:layoutItem padding="horizontal-small">
                                    <div >
                                        <h2 class="slds-text-heading--medium">Account Search</h2>
                                    </div>
                                </lightning:layoutItem>
                            </lightning:layout>
                            <div class="slds-p-top_small">
                                <lightning:datatable aura:id="accountDataTable"
                                                     keyField="id"
                                                     data="{!v.data }"
                                                     columns="{!v.columns }"
                                                     selectedRows="{!v.selectedRows }"
                                                     maxRowSelection="{!v.maxRowSelection }"
                                                     onrowselection="{!c.Selected }"
                                                     />
                            </div>
                        </div>
                    </div>
                 
                </lightning:layoutItem>
         </lightning:layout>
    </div>
    <!--CONTENT END-->
    <!--FOOTER START-->
    <div class="slds-modal__footer">
                    <div class="slds-m-top_medium slds-align_absolute-center">
                        <lightning:button  name="Cancel" label="Cancel" onclick="{!c.Cancel}"/>
                        <lightning:button  variant="brand" type="submit" name="save" label="Save" />
                    </div>
    </div>
    <!--FOOTER END-->
</aura:component>

AccountSearchController.js

({
doint : function(component, event, helper) {
},
    Selected : function(component, event, helper) {
},
    Search : function(component, event, helper) {
component.find("accountDataTable").set("v.selectedRows", []);
        var selectedRows = event.getParam('selectedRows');
        var dataTable = component.find('dataTable');
        var searchStr = component.get('v.AccountObj.Name');
        var action = component.get('c.SearchAccount');
        
        $A.util.addClass(dataTable, 'slds-show');
        $A.util.removeClass(dataTable,'slds-hide');
        
        component.set('v.columns', [
            {label: 'Name', fieldName: 'Name', type: 'text'},
            {label: 'Website', fieldName: 'Website', type: 'text'},
            {label: 'Phone', fieldName: 'Phone', type: 'phone'}]);
        
        action.setParams({
            searchString: searchStr
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === 'SUCCESS') {
                var result = response.getReturnValue();               
                component.set("v.data", response.getReturnValue());
            }else{
                component.set("v.recordSaveError", response.getError());
            }
        });
        $A.enqueueAction(action);
},
    Cancel : function(component, event, helper){
        $A.get("e.force:closeQuickAction").fire();
    },
})

AccountSearchController.apxc

public class AccountSearchController {
    @auraEnabled
    public static List<Account> SearchAccount(String searchString) {
        String query;
        List<Account> accounts = new List<Account>();
        if(searchString !='' && searchString !=null){
            query= 'SELECT Id,Name,Phone,Type,Website FROM Account where Name LIKE \'%' +searchString+'%\' LIMIT 10';
            accounts = database.query(query);
        }
        return accounts;
    }
}
Labels:
Location: India

Comments

Post a Comment

Popular posts from this blog

Einstein Bot user authentication

Using Bot for data manipulation use case in your company requires need of implementing some extra security layer to make it spoof proof. One of exciting salesforce feature we have is the well known Einstein Bot which many companies have implemented. I am going to cover detail step-by-step implementation of User validation use case using encrypted token. STEP-1: Create a Site & Site User go to setup > Sites & Domains > Sites Create a Site and make your user as "Site Contact". This is a prerequisites for live agent or Embedded Service setup. STEP-2 : Create a Embedded Service(formerly snap-ins) go to Service setup > Embedded Service Create a new Embedded Service Deployment record and copy the embedded service code snipped generated in a notepad. STEP-3  : Create a Visualforce page to test the chatbot (it will simulate the actual web portal which is going to consume the embedded service snipped.) BotController.apxc public class BotControlle...
3 comments
Read more

Dynamically populate lightning:combobox

In order to dynamically populate values in lightning:combobox using javascript we can create a list variable and push the values. We also require the values like ids associated to the particular option for back-end logic. For example  : If we want to show the list of contacts using lightning:combobox component where the option should display the contact name but the value should be the contact id which will be used for back-end logic For this we can create a temporary Map variable in our lightning component and set the value and label parameters of the lightning:combobox. Here is the code for this component Combo.app <aura:application extends="force:slds" access="global" description="Lightning Combo Demo"> <c:Combo_Cmpt/> </aura:application> Combo_Cmpt.cmp <aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="ComboController"> <!-- ...
Post a Comment
Read more

Use of wrapper class in lightning:datatable

As you guys know the wrapper class concept in visualforce pages , we generally use it to create a data-table which fetches data from different objects or if we want to redirect user to some other page on click of a link as one of the column of data-table.        For example we want a column "Account Name" on the data-table which is a link and once user clicks it should redirect respective account record. Or , suppose we want to display a column with some images or icons as a visual indicator Or what not. These requirements require us to use a wrapper on the lighting data-table (lightning:datatable) I am going to use my previous account search example ( Account Search Lightning Component ) and explain the use of wrapper. AccountSearchWrapper.app <aura:application extends="force:slds" access="global" >     <c:AccountSearchWrapper /> </aura:application> AccountSearchWrapper.cmp <aura:component controller="...
Post a Comment
Read more