Hey guys, today in this post we are going to learn about How to lightning aura:handler change method to Call Multiple Apex Methods for different type of custom object uses of change radio button value in aura component controller Salesforce.
aura:handler change method event is fired when an attribute value changes. Handle this event using the aura:handler tag. A component can have multiple aura:handler tags to detect changes to different attribute values. To more details about aura:handler change method in Salesforce click Here.
Real time scenarios:- Create multiple custom object and fetch the records by selected radio button value uses of aura:handler change method in lightning component controller.
Files we used to Call Multiple Apex Methods in aura component controller in Salesforce
customCredentialCmp.cmp | Lightning Component | It is used for create a table for Iterate the list of custom object records on lightning component |
customCredentialCmpController.js | JavaScript Controller | It is hold Javascript handleChangeAction and setCredentialVal functionality to get the radio button selected value. |
customCredentialCmpHelper.js | JavaScript Controller Helper | It is hold for Javascript Helper Function to get multiple objects values from apex method. |
customCredentialCtrl.apxc | Apex Controller | It is used for get List of multiple objects records from Apex Class Method |
customCredentialCmpApp.app | Lightning Application | It is used for call the component and preview on browser. |
List of Custom Object:- Custom_Credential__c, HDFC_Credential__c, IDBI_Credential__c | Fields are same for all of three custom objects:- Name, API_Endpoint__c, ClientId__c, Client_Secret__c, |
Final Output
You can download file directly from github by Click Here.
Other related post that would you like to learn in Salesforce
- Find the below steps
Create Lightning Component
Step 1:- Create Lightning Component : customCredentialCmp.cmp
From Developer Console >> File >> New >> Lightning Component
customCredentialCmp.cmp [Lightning Component File]
<aura:component controller="customCredentialCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="customCrdtlObj" type="Custom_Credential__c" default="{'sobjectType':'Custom_Credential__c'}"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler name="change" value="{!v.landerVal}" action="{!c.handleChangeAction}"/>
<aura:attribute name="landerVal" type="string" default=""/>
<aura:attribute name="manageVal" type="string" default=""/>
<aura:attribute name="customCrdtlList" type="List"/>
<aura:attribute name="hdfcCrdtlList" type="List"/>
<aura:attribute name="idbiCrdtlList" type="List"/>
<aura:attribute name="landerPickListItems" type="Custom_Credential__c[]"/>
<aura:attribute name="managePickListItems" type="Custom_Credential__c[]"/>
<aura:attribute name="targetLanderVal" type="string"/>
<aura:attribute name="targetManageVal" type="string"/>
<aura:attribute name="customCrdtlCheck" type="boolean" default="false"/>
<aura:attribute name="isCredential" type="string"/>
<lightning:card>
<div class="slds slds-p-around_medium">
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_12-of-12">
<div class="slds-form-element slds-is-required">
<label class="slds-form-element__label"><b>Credential Master</b></label>
<div class="slds-form-element__controller">
<div class="slds-grid slds-wrap slds-m-top--x-small">
<label class="slds-radio">
<input type="radio" id="isCustomCredential" class="slds-m-right--medium" name="isCustomCredential" value="Custom Credential" onclick="{!c.setCredentialVal}"/>
<span class="slds-radio--faux"></span>
<span class="slds-form-element__label"> Custom Credential</span>
</label>
<label class="slds-radio">
<input type="radio" id="isHdfcCredential" name="isCustomCredential" value="HDFC Credential" onclick="{!c.setCredentialVal}"/>
<span class="slds-radio--faux"></span>
<span class="slds-form-element__label"> HDFC Credential</span>
</label>
<label class="slds-radio">
<input type="radio" id="isIdbiCredential" name="isCustomCredential" value="IDBI Credential" onclick="{!c.setCredentialVal}"/>
<span class="slds-radio--faux"></span>
<span class="slds-form-element__label"> IDBI Credential</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="slds-hide">handleChange#### - {!v.handleChange}-- landerVal:- {!v.landerVal}</div><br/><br/>
<div class="slds-grid slds-wrap">
<div class="slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium">
<div class="slds-form-element">
<label class="slds-form-element__label">Landers <!--:- {!v.targetLanderVal}--></label>
<div class="slds-form-element__controller">
<ui:inputSelect class="slds-select" aura:id="landersId" change="{!c.changeTarget}" value="{!v.targetLanderVal}">
<ui:inputSelectOption text="--None--"/>
<aura:iteration items="{!v.landerPickListItems}" var="landerItem">
<ui:inputSelectOption text="{!landerItem}"/>
</aura:iteration>
</ui:inputSelect>
</div>
</div>
</div>
<div class="slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium">
<div class="slds-form-element slds-hide">
<label class="slds-form-element__label">Landers Manage:- {!v.targetManageVal}</label>
<div class="slds-form-element__controller">
<ui:inputSelect class="slds-select" aura:id="manageId" change="{!c.changeManage}" value="{!v.targetManageVal}">
<ui:inputSelectOption text="--None--"/>
<aura:iteration items="{!v.managePickListItems}" var="manageItem">
<ui:inputSelectOption text="{!manageItem}"/>
</aura:iteration>
</ui:inputSelect>
</div>
</div>
</div>
</div>
<aura:if isTrue="{!v.landerVal == 'Custom Credential'}">
<div class="slds-section__title-action slds-p-around--small slds-m-bottom--medium">
<h2><strong>Custom Credential</strong></h2>
</div>
<table class="slds-table slds-table_bordered slds-table_col-bordered" style="border:1px #ddd solid;">
<thead>
<tr>
<th>Credential Name</th>
<th>Endpoint</th>
<th>Client Secret</th>
<th>Client Id</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.customCrdtlList}" var="item" indexVar="index">
<tr id="{!index}">
<td>{!item.Name}</td>
<td><div class="slds-grid slds-has-flexi-truncate" style="width:75px"><span class="slds-truncate" title="{!item.API_Endpoint__c}">{!item.API_Endpoint__c}</span></div></td>
<td>{!item.ClientId__c}</td>
<td>{!item.Client_Secret__c}</td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:if>
<aura:if isTrue="{!v.landerVal == 'HDFC Credential'}">
<div class="slds-section__title-action slds-p-around--small slds-m-bottom--medium">
<h2><strong>HDFC Credential</strong></h2>
</div>
<table class="slds-table slds-table_bordered slds-table_col-bordered" style="border:1px #ddd solid;">
<thead>
<tr>
<th>Credential Name</th>
<th>Endpoint</th>
<th>Client Secret</th>
<th>Client Id</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.hdfcCrdtlList}" var="item" indexVar="index">
<tr id="{!index}">
<td>{!item.Name}</td>
<td><div class="slds-grid slds-has-flexi-truncate" style="width:75px"><span class="slds-truncate" title="{!item.API_Endpoint__c}">{!item.API_Endpoint__c}</span></div></td>
<td>{!item.ClientId__c}</td>
<td>{!item.Client_Secret__c}</td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:if>
<aura:if isTrue="{!v.landerVal == 'IDBI Credential'}">
<div class="slds-section__title-action slds-p-around--small slds-m-bottom--medium">
<h2><strong>IDBI Credential</strong></h2>
</div>
<table class="slds-table slds-table_bordered slds-table_col-bordered" style="border:1px #ddd solid;">
<thead>
<tr>
<th>Credential Name</th>
<th>Endpoint</th>
<th>Client Secret</th>
<th>Client Id</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.idbiCrdtlList}" var="item" indexVar="index">
<tr id="{!index}">
<td>{!item.Name}</td>
<td><div class="slds-grid slds-has-flexi-truncate" style="width:75px"><span class="slds-truncate" title="{!item.API_Endpoint__c}">{!item.API_Endpoint__c}</span></div></td>
<td>{!item.ClientId__c}</td>
<td>{!item.Client_Secret__c}</td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:if>
<br/><br/>
<p><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong> <span style="font-size:15px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span> <a href="https://www.w3web.net/" target="_blank" style="text-decoration:none;" rel="noopener noreferrer">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click <span style="color:#ff8000; font-size:18px;">Here..</span></a></strong></p>
<br/><br/><br/>
<!--Start RelatedTopics Section-->
<div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">
<p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>
<br/><br/>
<p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>
<div style="display:block; overflow:hidden;">
<div style="width: 50%; float:left; display:inline-block">
<ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">
<li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>
<li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>
<li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>
<li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>
<li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>
</ul>
</div>
<div style="width: 50%; float:left; display:inline-block">
<ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">
<li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>
<li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>
<li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>
<li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>
<li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>
</ul>
</div>
<div style="clear:both;"></div>
<br/>
<div class="youtubeIcon">
<a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>
</div>
</div>
</div>
<!--End RelatedTopics Section-->
</div>
</lightning:card>
</aura:component>
Create JavaScript Controller
Step 2:- Create Lightning Component : customCredentialCmpController.js
From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller
customCredentialCmpController.js [JavaScript Controller]
({
doInit : function(component, event, helper) {
},
handleChangeAction:function(component, event, helper){
var landerChangeVal = component.get('v.landerVal');
//alert('landerChangeVal ' + landerChangeVal);
if(landerChangeVal == "Custom Credential"){
helper.customCrdtlHelper(component);
}
if(landerChangeVal == "HDFC Credential"){
helper.hdfcCrdtlHelper(component);
}
if(landerChangeVal == "IDBI Credential"){
helper.idbiCrdtlHelper(component);
}
},
setCredentialVal: function(component,event) {
var val = event.currentTarget.value;
//alert(val);
component.set("v.isCredential",val);
component.set('v.targetLanderVal',val);
component.set('v.landerVal',val);
},
})
Create JavaScript Helper
Step 3:- Create Lightning Component : customCredentialCmpHelper.js
From Developer Console >> File >> New >> Lightning Component >> JavaScript Helper
customCredentialCmpHelper.js [JavaScript Helper File]
({
customCrdtlHelper : function(component, event, helper) {
var action = component.get("c.getCustCredential");
action.setCallback(this, function(response){
var state = response.getState();
if(state == "SUCCESS"){
var result = response.getReturnValue();
// alert('result ' + JSON.stringify(result));
component.set('v.customCrdtlList', result);
}
});
$A.enqueueAction(action);
},
hdfcCrdtlHelper : function(component, event, helper) {
var action = component.get("c.getHdfcCredential");
action.setCallback(this, function(response){
var state = response.getState();
if(state == "SUCCESS"){
var result = response.getReturnValue();
// alert('result ' + JSON.stringify(result));
component.set('v.hdfcCrdtlList', result);
}
});
$A.enqueueAction(action);
},
idbiCrdtlHelper : function(component, event, helper) {
var action = component.get("c.getIdbiCredential");
action.setCallback(this, function(response){
var state = response.getState();
if(state == "SUCCESS"){
var result = response.getReturnValue();
// alert('result ' + JSON.stringify(result));
component.set('v.idbiCrdtlList', result);
}
});
$A.enqueueAction(action);
},
})
Create Apex Class Controller
Step 4:- Create Apex Class : customCredentialCtrl.apxc
From Developer Console >> File >> New >> Apex Class
customCredentialCtrl.apxc [Apex Class Controller]
public class customCredentialCtrl {
@AuraEnabled
public static List getCustCredential(){
List custCredentialList = [SELECT Id, Name, API_Endpoint__c, ClientId__c, Client_Secret__c, Credential_Landers__c, Landers_Manage__c, HDFC_Credential__c, IDBI_Credential__c, HDFC_Credential__r.Name, IDBI_Credential__r.Name FROM Custom_Credential__c WHERE Name !=NULL];
system.debug('custCredentialList ' + custCredentialList);
RETURN custCredentialList;
}
@AuraEnabled
public static List getHdfcCredential(){
List hdfcCredentialList = [SELECT Id, Name, API_Endpoint__c, ClientId__c, Client_Secret__c FROM HDFC_Credential__c WHERE Name !=NULL];
system.debug('hdfcCredentialList ' + hdfcCredentialList);
RETURN hdfcCredentialList;
}
@AuraEnabled
public static List getIdbiCredential(){
List idbiCredentialList = [SELECT Id, Name, API_Endpoint__c, ClientId__c, Client_Secret__c FROM IDBI_Credential__c WHERE Name !=NULL];
system.debug('idbiCredentialList ' + idbiCredentialList);
RETURN idbiCredentialList;
}
}
Create Lightning Application
Step 5:- Create Lightning Application : customCredentialCmpApp.app
From Developer Console >> File >> New >> Lightning Application
customCredentialCmpApp.app [Component Application File]
<aura:application extends="force:slds">
<c:customCredentialCmp/>
</aura:application>
Further post that would you like to learn in Salesforce
What is radio button in Salesforce lightning?
A lightning:radioGroup component represents a group of radio buttons that permit only one button to be selected at a time.
What is radio button what is its use?
Radio buttons allow the user to select one option from a set.
What is required to make a group of radio buttons?
To group radio buttons they must all have the same name value. This allows only one to be selected at a time and applies required to the whole group.
What is change handler in lightning?
Configure a component to automatically invoke a change handler, which is a client-side controller action, when a value in one of the component's attributes changes. When the value changes, the valueChange. evt event is automatically fired.
Related Topics | You May Also Like
Our Free Courses →
👉 Get Free Course →
📌 Salesforce Administrators 📌 Salesforce Lightning Flow Builder 📌 Salesforce Record Trigger Flow Builder |
👉 Get Free Course →
📌 Aura Lightning Framework 📌 Lightning Web Component (LWC) 📌 Rest APIs Integration |