Regular-Expressions-in-Salesforce-Lightning

How To Make Dynamic Search Using Salesforce Lightning and Regular Expression?

Hello guys,

Today, I am sharing the code, that, how you can implement Dynamic Search using Lightning Component, the output is similar to the previous post, but the strategy is different. Here I am going to use JavaScript Library called Regular Expression, name as, regex. And I am also going to use lightning:datatable.

For this task, we need three things:-

  1. Lightning Component Bundle
  2. A Lightning Application Bundle
  3. An Apex Controller.

First, let’s create an apex controller:-


public class AccountShowController {

@AuraEnabled

public static List<Account> showAccounts()

{

return [SELECT Id, Name, Phone, AnnualRevenue From Account];

}

}

Let’s now create our Lightning Component( AccountShowUsingJS.cmp)-

<aura:component controller="AccountShowController" >
<aura:attribute name="Account" type="Account[]" />

<aura:attribute name="AccountDuplicate" type="Account[]" />

<aura:attribute name="columns" type="List" />

<aura:attribute name="SearchKey" type="String" />

<aura:handler name="init" value="{!this}" action="{!c.myAction}"/>

<div class="slds-form-element">

<div class="slds-form-element__control">

<div class="slds-grid slds-gutters">

<div class="slds-col slds-size_2-of-3">

<label class="slds-form-element__label" for="text-input-id-1">Search Account</label>

<lightning:input type="text" value="{!v.SearchKey}" onkeyup="{!c.SearchAccount}" id="myInput" class="slds-input" placeholder="Search Accounts" />

</div>

<div class="slds-col slds-size_1-of-3">

<span></span>

</div>

</div>

</div>

</div><br /><br />

<div id="myTable">

<lightning:datatable

keyField="id"

data="{!v.Account}"

columns="{!v.columns}"

hideCheckboxColumn="true" />

</div>

</aura:component>

JS Controller:-


({

myAction : function(component, event, helper) {

component.set('v.columns', [

{label: 'Account name', fieldName: 'Name', type: 'text'},

{label: 'Phone', fieldName: 'Phone', type: 'number'},

{label: 'Annual Revenue', fieldName: 'AnnualRevenue', type: 'number'}

]);

var action = component.get("c.showAccounts");

action.setCallback(this, function(response){

var state=response.getState();

if(state === 'SUCCESS')

{

component.set("v.Account", response.getReturnValue());

component.set("v.AccountDuplicate", response.getReturnValue());

}

else

{

alert("error");

}

});

$A.enqueueAction(action);

},

SearchAccount : function(component, event, helper) {

//var searchKey = component.get("v.SearchKey");

var term = component.get("v.SearchKey");

var data = component.get("v.AccountDuplicate");

//component.set("v.Account", data);

console.log(term);

var results = data, regex;

try {

console.log("inside try");

regex = new RegExp(term, "i");
// filter checks each row, and the constructs new array where function returns true

results = data.filter(row=>regex.test(row.Name));

console.log('results:-'+JSON.stringify(results));

} catch(e) {

// invalid regex, use full list

}

component.set("v.Account", results);

}

})

An application component( Trial.app):-

<aura:application extends="force:slds">

<c:AccountShowUsingJS />

</aura:application>

Output-

Thanks.

Happy Coding.

0 Comments

Leave a Reply

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2018 Forcetalks. All Right Reserved.

Log in with your credentials

or    

Forgot your details?