In Salesforce Apex classes, we can define class methods in two ways: one without parameters, where we simply want to fetch static data in the LWC component by calling the Apex method. The other method is with parameters, which are mapped with input fields in the Lightning web component and used in scenarios such as creating or searching for records.
In this Salesforce tutorial, we will learn how to call the Apex method with parameters in Lightning Web Component.
What is an Apex Call With Parameters?
An Apex call with parameters refers to the method of invoking or triggering an Apex method from a Lightning Web Component (LWC) or another Salesforce component by passing input values (parameters) to the method.
These parameters are used within the Apex method to perform operations such as querying, creating, updating, or deleting Salesforce records based on user input.
Call Apex Method With Parameters in Lightning Web Component
In the example below, we create an Apex controller class with defined parameters, and we will call that Apex class in the Lightning web component to create opportunity records.
We will fetch the Apex method from the controller class with parameters using the @wire decorator.
- Create an apex controller class that will take the parameters to create the opportunity records.
public class OpportunityController {
@AuraEnabled
public static Id createOpportunity(String oppName, Decimal oppAmount, Date closeDate) {
try {
Opportunity opp = new Opportunity();
opp.Name = oppName;
opp.Amount = oppAmount;
opp.CloseDate = closeDate;
opp.StageName = 'Prospecting';
insert opp;
return opp.Id;
} catch(Exception ex) {
System.debug('An Exception error occurred: ' + ex);
return null;
}
}
}In this controller class, we have included the parameters to take the input for the fields opportunity name, amount, close date, and prospecting.
- After this, create a Lightning web component and enter the code below in the JS file to define the logic for creating an opportunity record.
In the JS file, we have imported the createOpportunity method from the Apex controller class.
import { LightningElement, track, wire } from 'lwc';
import createOpportunity from '@salesforce/apex/OpportunityController.createOpportunity';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class OpportunityCreator extends LightningElement {
@track oppName = '';
@track oppAmount = null;
@track oppCloseDate = null;
@track oppId;
@track error;
handleNameChange(event) {
this.oppName = event.detail.value;
}
handleAmountChange(event) {
this.oppAmount = event.detail.value;
}
handleCloseDateChange(event) {
this.oppCloseDate = event.detail.value;
}
@wire(createOpportunity, { oppName: '$oppName', oppAmount: '$oppAmount', closeDate: '$oppCloseDate' })
wiredOpportunity({ error, data }) {
if (data) {
this.oppId = data;
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Opportunity created successfully with ID: ' + this.oppId,
variant: 'success'
})
);
} else if (error) {
this.error = error;
this.dispatchEvent(
new ShowToastEvent({
title: 'Error',
message: 'Error creating opportunity: ' + error.body.message,
variant: 'error'
})
);
}
}
}In the above code, we have used the @wire decorator to track the changes in the input fields.
We have created events handleNameChange(), handleAmountChange(), and handleCloseDateChange() to update the parameters from the controller class, opp.Name, opp.Amount and opp.Stage.
At last, Submit action will call the createOpportunity apex method with the component’s property values.
- After this, enter the code below in the HTML file to define the UI of the Lightning web component.
In this, we have defined the input fields: opportunity name, amount, and close date. At last, there is a Submit button that will call the handleSubmit method and create the opportunity record.
<template>
<div class="slds-box slds-theme_default">
<div class="slds-p-around_medium">
<lightning-input
type="text"
label="Opportunity Name"
value={oppName}
onchange={handleNameChange}>
</lightning-input>
</div>
<div class="slds-p-around_medium">
<lightning-input
type="number"
label="Amount"
value={oppAmount}
onchange={handleAmountChange}>
</lightning-input>
</div>
<div class="slds-p-around_medium">
<lightning-input
type="date"
label="Close Date"
value={oppCloseDate}
onchange={handleCloseDateChange}>
</lightning-input>
</div>
<template if:true={oppId}>
<div class="slds-p-around_medium slds-text-color_success">
Opportunity Created Successfully! ID: {oppId}
</div>
</template>
<template if:true={error}>
<div class="slds-p-around_medium slds-text-color_error">
Error: {error}
</div>
</template>
</div>
</template>- At last, enter the code below in the meta.xml file to expose the lightning web component to the lightning pages.
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>63.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>- After this, deploy the Lightning Web Component to the Lightning home page or the record page.
The lightning web component shows the input fields for opportunity name, amount, and close date. As we click on the submit button, the apex method createOpportunity will be called.
The Apex method creates an Opportunity record with these values and returns its ID. The parameters are passed as a record with values matching the Apex method’s parameter names.
Call Apex Methods With Parameters in LWC Using Imperative Method
Now, we will see how we can call the Apex methods with parameters in LWC using the imperative method.
In the imperative method, we can invoke an Apex method directly using JavaScript code. In this example, we will invoke the apex method to display the searched account record.
- First, we will create a controller class where the user can give input parameters for the account search.
public with sharing class LWC_AccountController {
@AuraEnabled
public static List<Account> searchImperativeAccountList(String accountName){
if (String.isBlank(accountName)) {
return new List<Account>();
}
String key = '%' + accountName + '%';
return [SELECT Id, Name, Phone FROM Account WHERE Name LIKE :key];
}
}In this controller class, we have the @AuraEnabled annotation, which makes the method accessible from LWC. The method createOpportunity accepts three parameters: oppName, oppAmount, and closeDate.
- Enter the code below in the HTML file to render the UI of the Lightning Web Component.
<template>
<lightning-card title="Apex Imperative Method With Parameters">
<lightning-layout>
<lightning-layout-item flexibility="auto" padding="around-small">
<lightning-layout-item flexibility="grow">
<lightning-input label="Enter Account Name"
type="search"
onchange={searchAccount}
value={searchKey}>
</lightning-input>
</lightning-layout-item>
<lightning-layout-item class="slds-p-left_xx-small">
<lightning-button
label="Search"
onclick={doSearch}
></lightning-button>
</lightning-layout-item>
<lightning-layout-item class="slds-m-bottom_small">
<template if:true={accounts}>
<template for:each={accounts} for:item="account">
<p key={account.Id}>
{account.Name} - {account.Phone}
</p>
</template>
</template>
<template if:true={error}>
{error}
</template>
</lightning-layout-item>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>In the above HTML code, we have used the <lightning-input> tag, where the user enters the name of the account to be searched for. Upon clicking, it calls the searchAccount method to check whether the account exists or not.
After this, value={searchKey} will bind the input value to the searchKey property in the JS file.
- Enter the below code in the JS file of the Lightning Web Component.
import { LightningElement, track } from 'lwc';
import searchImperativeAccountList from '@salesforce/apex/LWC_AccountController.searchImperativeAccountList';
export default class ShowAccounts extends LightningElement {
@track accounts;
@track error;
searchKey = '';
searchAccount(event){
this.searchKey = event.target.value;
}
doSearch() {
searchImperativeAccountList({ accountName: this.searchKey })
.then(result => {
this.accounts = result;
this.error = undefined;
})
.catch(error => {
this.error = error;
this.accounts = undefined;
});
}
}In the above code, we have imported the method searchImperativeAccountList from an Apex controller class to fetch data.
The searchAccount method updates searchKey as the user types, while doSearch calls the Apex method with searchKey, handling the response where it returns success, sets accounts with results, and failure sets error.
- Deploy the Lightning Web Component to the Lightning page, and you will see the search bar input. Here, search for the account name and click the search button.
In this lightning web component, users can type an account name, click search, and see matching accounts or an error message, all handled through an imperative Apex call.
This way, we can call an apex class method with parameters in the lightning web component using the imperative method.
Imperative Apex Call in LWC With Multiple Parameters
Let’s take another example, where we will call the apex method with multiple parameters in LWC with the imperative call method.
In this example, we will create a Lightning web component through which the user can create contact records. This component will have an apex class with multiple parameters for the contact fields.
We are calling the apex via the imperative method, which will be invoked when the user clicks the Create button after entering input fields.
- Enter the code below in the Apex controller class.
public with sharing class ContactController {
@AuraEnabled
public static Contact createContact(String firstName, String lastName, String email, String phone) {
Contact con = new Contact(
FirstName = firstName,
LastName = lastName,
Email = email,
Phone = phone
);
insert con;
return con;
}
}This Apex controller class defines a method that creates a new Contact record. It takes four parameters- first name, last name, email, and phone- to create a Contact record.
- Next, create the Lightning Web Component and enter the code below in the JS file.
import { LightningElement, track } from 'lwc';
import createContact from '@salesforce/apex/ContactController.createContact';
export default class ContactCreator extends LightningElement {
@track firstName = '';
@track lastName = '';
@track email = '';
@track phone = '';
@track result;
@track error;
handleInputChange(event) {
this[event.target.name] = event.target.value;
}
handleCreate() {
createContact({
firstName: this.firstName,
lastName: this.lastName,
email: this.email,
phone: this.phone
})
.then(result => { this.result = result; })
.catch(error => { this.error = error; });
}
}In the JS file, we have imported the contact fields and then set up properties with @track, which handles input changes in a single method using the name attribute and makes an imperative Apex call with multiple parameters when the Create button is clicked.
- Enter the code below in the HTML file to define the UI of the lightning web component.
<template>
<lightning-card title="Create Contact">
<div class="slds-m-around_medium">
<lightning-input name="firstName" label="First Name" onchange={handleInputChange}></lightning-input>
<lightning-input name="lastName" label="Last Name" onchange={handleInputChange}></lightning-input>
<lightning-input name="email" type="email" label="Email" onchange={handleInputChange}></lightning-input>
<lightning-input name="phone" type="tel" label="Phone" onchange={handleInputChange}></lightning-input>
<lightning-button label="Create" variant="brand" onclick={handleCreate}></lightning-button>
<template if:true={result}>
<div>Created: {result.FirstName} {result.LastName} - {result.Id}</div>
</template>
<template if:true={error}>Error: {error.body.message}</template>
</div>
</lightning-card>
</template>In the HTML file, we have defined a form within a card component. It includes four input fields with specific types and matching name attributes corresponding to JS properties. The button triggers the handleCreate method and creates the contact record.
- After this, make the component accessible to Lightning pages by entering the code below in the meta.xml file.
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>63.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>- Navigate to the lighting page and deploy the Lightning Web Component with the Lightning App Builder.
In the Lightning web component, you will see the input fields to create the contact records.
This way, we can create a Contact record using an imperative Apex call with multiple parameters in the Salesforce Lightning web component.
Conclusion
In this Salesforce tutorial, we have learned about the methods for calling the apex class with single or multiple parameters in the Lightning web component. In the above example, we first called the apex method with multiple parameters in the LWC using the @wire API method.
After this, we also learned about the imperative way to call the apex in LWC, in which we took two examples, one for searching Account records based on user input and another for creating Contact records using multiple parameters.
You may also like to read:
- Retrieve Data From Salesforce in LWC Without Apex
- Override Standard Button Using Lightning Web Component
- Concatenate Columns in LWC Lightning Datatable
I am Bijay Kumar, the founder of SalesforceFAQs.com. Having over 10 years of experience working in salesforce technologies for clients across the world (Canada, Australia, United States, United Kingdom, New Zealand, etc.). I am a certified salesforce administrator and expert with experience in developing salesforce applications and projects. My goal is to make it easy for people to learn and use salesforce technologies by providing simple and easy-to-understand solutions. Check out the complete profile on About us.
