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.
1 |
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
- Do you know:- The cheapest and best smartphone in your budget 2022?
Other related post that would you like to learn in lightning component.
- 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]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
<div class="slds slds-p-around_medium"> <div class="slds-col slds-size_6-of-12 slds-p-horizontal--small slds-m-bottom--small"> <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 id="isCustomCredential" class="slds-m-right--medium" name="isCustomCredential" type="radio" value="Custom Credential" /> <span class="slds-form-element__label"> Custom Credential</span> </label> <label class="slds-radio"> <input id="isHdfcCredential" name="isCustomCredential" type="radio" value="HDFC Credential" /> <span class="slds-form-element__label"> HDFC Credential</span> </label> <label class="slds-radio"> <input id="isIdbiCredential" name="isCustomCredential" type="radio" value="IDBI Credential" /> <span class="slds-form-element__label"> IDBI Credential</span> </label></div> </div> </div> </div> </div> </div> <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> <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> </tbody> </table> <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> <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> </tbody> </table> <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> <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> </tbody> </table> <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> |
Create JavaScript Controller
Step 2:- Create Lightning Component : customCredentialCmpController.js
From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller
customCredentialCmpController.js [JavaScript Controller]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
({ 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]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
({ 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]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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]
1 |
List your blog on Flyout and start making money for publishing sponsored content on your blog. Here’s the invite link. Get Started for Free
Check Out:- Earn Unlimited Everyday With This Trick:- Click Here
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
- Your reaction of the article ▾
Best informative blog.