Apex Wire Method to Function with Parameters

Now, we will see how we can get the Salesforce Record details based on some parameters using Apex Class – Wiring to Function with Parameters mechanism. This mechanism is needed if you want to pre-process the data before going to the Lightning App.

To do this exercise, we will try to show a Contact Record 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. We can take the same Apex Class with the same method for this exercise as mentioned in the session “Apex Wire Method to Property with Parameters”.

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];
       }
}

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

showContactsWMFP.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="showContactsWMFP">
    <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.

showContactsWMFP.html

<template>
        <lightning-card title="Apex Wire Method With Function 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>
                        <br/>
                        <template if:true={contacts}>                        
                            <template for:each={contacts} for:item="contact">                        
                                <p key={contact.Id}>                               
                                    {contact.Name}
                                </p>
                            </template>
                        </template>
                        <template if:true={error}>
                            {error}>
                        </template>                    
              </lightning-layout-item>
            </lightning-layout>
          </lightning-card>
</template>

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

showContactsWMFP.js

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

export default class ShowContactsWMFP extends LightningElement {
    @track searchKey = '';
    @track contacts;
    @track error;      

    searchContact(event){        
        this.searchKey = event.target.value;        
    }

    @wire(searchContactList, {accountName:'$searchKey'})
    wiredContacts({data, error}){
        if(data){
            this.contacts = data;
            this.error = undefined;
        }
        else if (error) {
            this.error = error;
            this.contacts = undefined;
        }
    }
}

As per the wire method writing rules, first we have imported “searchContactList” from the Apex Class, “LWC_ContactController“. Then, the function named wiredContacts is wired to searchContactList with parameters in this way
@wire(searchContactList, {accountName:’$searchKey’})
wiredContacts({data, error}){ }

where “searchkey” is the user input defines the Account Name. During passing of the parameters, we need to put ‘$’ sign before the property.

We have defined two private reactive properties such as contacts and error. We have set these two properties into the wired function named wiredContacts. Hence, we will get the Contact record details using only {contacts} instead of {contact.data} applied for wire method to property mechanism in HTML file. And obviously, we will get the errors using {error} in HTML file.

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

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

Result

96,903 total views, 123 views today