Apex Class:
Lightning Web Component HTML:
Lightning Web Component JavaScript:
Lightning Component:
Output:
Create a Lightning component tab to view the output.
- public with sharing class AccountController {
- @AuraEnabled( cacheable = true )
- public static List< Account > fetchAccounts( String searchKey ) {
- String strKey = '%' + searchKey + '%';
- return [ SELECT Id, Name, Industry FROM Account WHERE Name LIKE: strKey LIMIT 10 ];
- }
- }
Lightning Web Component HTML:
- <template>
- <lightning-card title = "Search Accounts" icon-name = "custom:custom63">
- <div class = "slds-m-around_medium">
- <lightning-input type = "search" onchange = {handleKeyChange} class = "slds-m-bottom_small" label = "Search" >
- </lightning-input>
- <template if:true = {accounts}>
- <template for:each = {accounts} for:item = "account">
- <p key = {account.Id}>{account.Name}</p>
- </template>
- </template>
- <template if:true = {error}>
- {error}>
- </template>
- </div>
- </lightning-card>
- </template>
Lightning Web Component JavaScript:
- import { LightningElement, track } from 'lwc';
- import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';
- export default class sample extends LightningElement {
- @track accounts;
- @track error;
- handleKeyChange( event ) {
- const searchKey = event.target.value;
- if ( searchKey ) {
- fetchAccounts( { searchKey } )
- .then(result => {
- this.accounts = result;
- })
- .catch(error => {
- this.error = error;
- });
- } else
- this.accounts = undefined;
- }
- }
Lightning Component:
- <aura:component implements="force:appHostable">
- <article class="slds-card">
- <c:sample/>
- </article>
- </aura:component>
Output:
Create a Lightning component tab to view the output.
No comments:
Post a Comment