Preview
HTML
<template>
<lightning-card title="Account Search">
<div class="slds-m-around_medium">
<lightning-input label="Account Name" value={accountName} onchange={handleNameChange}></lightning-input>
<lightning-input label="Phone Number" value={phoneNumber} onchange={handlePhoneChange}></lightning-input>
<lightning-button label="Search" onclick={searchAccounts}></lightning-button>
</div>
<div class="slds-m-around_medium">
<template if:true={accounts}>
<lightning-datatable
key-field="Id"
data={accounts}
columns={columns}
hide-checkbox-column="true">
</lightning-datatable>
</template>
<template if:true={error}>
<p>{error}</p>
</template>
</div>
</lightning-card>
</template>
Java Script
import { LightningElement, track } from 'lwc';
import searchAccounts from '@salesforce/apex/AccountUtility.searchAccounts';
const columns = [
{ label: 'Account Name', fieldName: 'Name' },
{ label: 'Phone', fieldName: 'Phone' },
];
export default class SearchAccount extends LightningElement {
@track accountName = '';
@track phoneNumber = '';
@track accounts = [];
@track error;
columns = columns;
handleNameChange(event) {
this.accountName = event.target.value;
}
handlePhoneChange(event) {
this.phoneNumber = event.target.value;
}
searchAccounts() {
// Call Apex method to search for accounts
searchAccounts({ accountName: this.accountName, phoneNumber: this.phoneNumber })
.then(result => {
this.accounts = result;
this.error = null;
})
.catch(error => {
this.error = error.message;
this.accounts = null;
});
}
}
Apex Class
public class AccountUtility {
@AuraEnabled(cacheable=true)
public static List<Account> searchAccounts(String accountName, String phoneNumber) {
String query = 'SELECT Id, Name, Phone FROM Account WHERE ';
if (!String.isEmpty(accountName)) {
query += 'Name LIKE \'%' + accountName + '%\' AND ';
}
if (!String.isEmpty(phoneNumber)) {
query += 'Phone = \'' + phoneNumber + '\' AND ';
}
query += 'Id != null LIMIT 10';
return Database.query(query);
}
}
Video
Video does not exists.
