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

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

Salesforce CPQ Pricing Models

This post briefly covers the different pricing models which Salesforce CPQ has currently :- 1. Discount Schedule It has two types :-     a> Slab     b> Range Steps to implement :- - Create a discount schedule record , select slab or Range as type and Percent/Amount as discount unit. - Create discount tiers with the unit range. Tier Name  Lower Boundary Upper Boundary Discount(%) 1-10 Units 1 11 0 11-20 Units 11 21 5 21-30 Units 21 31 10 30+ Units 31 41 15  - Add this discount schedule to the Product you want to apply the pricing. Calculation :- if Type = Slab , List price = $100 and Quantity = 11 Total Price = Tier 1 Quantity * List Price * (1- Disc.%) + Tier 2 Quantity * List Price * (1- Disc. %)                   =  10 * 100 * (1-0)  + 1* 100 * (1-0.05)          ...
Post a Comment
Read more