Apex Wire Method to Property with Parameters

Now, we will see how we can get the Salesforce Record details based on some parameters using Apex Class – Wiring to Property with Parameters mechanism.

To do this exercise, we will try to search Contact Records based on Account Name in Lightning App.

Step 1: We have created an Apex Class named “LWC_ContactController” by which we will send the Contact record to Lightning Web Component based on Account Name. We can update the same Apex Class to consider the specific business.

LWC_ContactController.cls

public with sharing class LWC_ContactController{
       
      @AuraEnabled(cacheable = true)
       public static List<Contact> searchContactList(String accountName){
           if (String.isBlank(accountName)) {
                return new List<Contact>();
            }
           
            String key = '%' + accountName + '%';            
            return [SELECT Id, Name, Email FROM Contact WHERE Account.Name LIKE : key];
       }
}

searchContactList() method of the Apex Class “LWC_ContactController” returns the Contact Records based on Account Name.

Step 2: After that, we have built a LWC named “showContactsWMPP“. As per previous examples, we need to update the “showContactsWMPP.js-meta.xml” file to set the visibility in Lightning App Builder.

showContactsWMPP.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="showContactsWMP">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Step 3: Need to write the respective HTML file.

showContactsWMPP.html

<template>
        <lightning-card title="Apex Wire Method With Property Parameters">            
            <lightning-layout> 
              <lightning-layout-item flexibility="auto" padding="around-small">
                   <lightning-input label="Enter Account Name" type="search"  onchange={searchContact} value={searchKey}></lightning-input>
                    <template if:true={contacts.data}> 
                        <br/>                       
                        <template for:each={contacts.data} for:item="contact">                        
                            <p key={contact.Id}>                               
                                {contact.Name}
                            </p> 
                        </template>
                    </template>
                    <template if:true={contacts.error}>
                        {contacts.error}>
                    </template>
              </lightning-layout-item>
            </lightning-layout>
          </lightning-card>
</template>

Step 4: Now, we need to work on the JS file.

showContactsWMPP.js

import { LightningElement, track, wire } from 'lwc';
import searchContactList from '@salesforce/apex/LWC_ContactController.searchContactList';

const DELAY = 300;

export default class ShowContactsWMFP extends LightningElement {
    @track searchKey = '';
    
    @wire(searchContactList, {accountName:'$searchKey'}) contacts;

    searchContact(event){
        window.clearTimeout(this.delayTimeout);
        const searchKey = event.target.value;
        // eslint-disable-next-line @lwc/lwc/no-async-operation
        this.delayTimeout = setTimeout(() => {
            this.searchKey = searchKey;
        }, DELAY);
    }
}

As per the wire method writing rules, first we have imported “searchContactList” from the Apex Class, “LWC_ContactController“. Then, property contacts is wired to searchContactList with parameters in this way

@wire(searchContactList, {accountName:’$searchKey’}) contacts;  – where “searchkey” is the user input defines the Account Name. During passing of the parameters, we need to put ‘$’ sign before the property.

Remember, contacts is the property of wiring, that means we can get the data of contact using {contacts.data} & also we can get the error using {contacts.error} in html file and contacts is also the reactive property.

We have used wire mechanism so, the cacheable of the respective method, searchContactList() of the Apex Class “LWC_ContactController” should be true.

Here, we have defined searchContact(event) function to capture the Search Key as Account Name and set to the original searchKey property and wire adapter will automatically filtered out the Contact records based on Search Key. If the result is same, it will not make the server call.That is the beauty of Lightning web Component.

Step 5: At last, need to add this LWC into Lightning App/Home or Record Page.

Result

18,207 total views, 3 views today