Hey guys, today in this post we are going to learn about how to Create a record on custom Object to insert record Id of lookup field value with passing parameters to apex class using custom controller in Lightning Component Salesforce .
- Don’t forget to check out:- How to create custom lookup on custom object in lightning component Click Here For More Information
We used the files in this example
feesCmp.cmp | Lightning Component | It is used for display the Input filed of Student Name, Course, Date Of Deposit, Paid Amount and Save button on the Table. |
feesCmpController.js | JavaScript Controller File | It is used for insert lookup field value, Date Of Deposit, Paid Amount value to server side apex method. |
feesCmp.css | Component Style CSS | It is used for alignment the lookup popup section and spinner loading image on component. |
newStudentCtr.apxc | Apex Class Controller | It is used for submit the lookup field value, Date Of Deposit, Paid Amount value to server through Save button |
Custom Object:- Fees__c Custom Object Fields:- StudentName__c CourseName__c &DateOfDeposit__c PaidAmount__c |
Lookup Object:- NewStudent__c :- Get the Student name from lookup object field | Lookup Object:- Course__c :- Get the Course name from lookup object field |
Note:-Static resource zip file
You need to create $Resource.SLDS2016 SLDS zip file (static resource zip file)
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.
Create Lightning Component
Step 1:- Create Lightning Component : feesCmp.cmp
From Developer Console >> File >> New >> Lightning Component
feesCmp.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 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 |
<aura:component controller="newStudentCtr" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:actionOverride,lightning:isUrlAddressable" access="global" > <aura:html tag="style">.forceStyle.desktop .viewport{background:#fff;}</aura:html> <aura:attribute name="feesObj" type="Fees__c" default="{'sobjectType':'Fees__c'}"/> <aura:attribute name="feesNameItems" type="Object[]"/> <aura:attribute name="feeSelectId" type="string"/> <aura:attribute name="feeSelectedSerchName" type="string"/> <aura:attribute name="courseFeeNameItems" type="Object[]"/> <aura:attribute name="courseFeeId" type="string"/> <aura:attribute name="courseFeeSelectedSerchName" type="string"/> <div class="slds slds-p-horizontal--medium"> <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">Student Name</label> <div class="slds-form-element__controller" style="position:relative;"> <div aura:id="feeStudentSpinId" class="slds-input-has-icon slds-input-has-icon--right spinnerItem"> <ui:inputText aura:id="feeStudentNameId" placeholder="Search student..." class="slds-input" keyup="{!c.lookupSearchFeeName}" updateOn="keyup" value="{!v.feesObj.StudentName__c}"/> <i class="spinnerIcon" ><img src="/resource/SLDS2016/assets/images/spinners/slds_spinner_brand.gif" /></i> <c:svg class="slds-input__icon" xlinkHref="/resource/SLDS2016/assets/icons/utility-sprite/svg/symbols.svg#search"/> </div> <div aura:id="feesOpenDivId" class="slds-m-top--small slds-dropdown-trigger slds-dropdown-trigger--click" > <section class="slds-dropdown slds-popover slds-nubbin--top-left slds-dropdown-trigger" style="position:absolute; left:158px; top: -9px;"> <div class="slds-popover__body slds-p-vertical--xx-small slds-p-horizontal--none slds-scrollable--y" style="max-height:150px;"> <ul class="slds-dropdown__list slds-dropdown--length10"> <aura:iteration items="{!v.feesNameItems}" var="feeStudentVar" indexVar="goNumber"> <li> <span class="slds-lookup__item-action slds-media"> <c:svg class="slds-icon slds-icon-standard-contact slds-icon--small slds-m-right--xx-small" xlinkHref="/resource/SLDS2016/assets/icons/utility-sprite/svg/symbols.svg#user" /> <a id="{!feeStudentVar.Id}" role="option" data-id="{!feeStudentVar.Id}" onclick="{!c.feeSelectSearchItem}"> {!feeStudentVar.Name} </a> </span> </li> </aura:iteration> </ul> </div> </section> </div> <div aura:id="feesPillListDivId" class="slds-hide"> <ul> <li class="slds-pill slds-show slds-show slds-m-around--none" > <a id="" role="option" onclick="{!c.removeSelectedSerchItem}" data-id=""> <c:svg class="slds-icon slds-icon-standard-contact slds-icon--small slds-m-right--xx-small" xlinkHref="/resource/SLDS2016/assets/icons/utility-sprite/svg/symbols.svg#user" /> {!v.feeSelectedSerchName} <button class="slds-button slds-butto--icon slds-float--right slds-pill__remove slds-m-top--xx-small" style="line-height:1.45rem;"> <c:svg class="slds-button__icon" xlinkHref="/resource/SLDS2016/assets/icons/utility-sprite/svg/symbols.svg#close" /> </button> </a> </li> </ul> </div> </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"> <label class="slds-form-element__label">Course</label> <div class="slds-form-element__controller" style="position:relative;"> <div aura:id="courseFeeStudentSpinId" class="slds-input-has-icon slds-input-has-icon--right spinnerItem"> <ui:inputText aura:id="courseFeeNameId" placeholder="Search course..." class="slds-input" keyup="{!c.courseLookupSearch}" updateOn="keyup" value="{!v.feesObj.CourseName__c}"/> <i class="spinnerIcon" ><img src="/resource/SLDS2016/assets/images/spinners/slds_spinner_brand.gif" /></i> <c:svg class="slds-input__icon" xlinkHref="/resource/SLDS2016/assets/icons/utility-sprite/svg/symbols.svg#search"/> </div> <div aura:id="courseFeeOpenDivId" class="slds-m-top--small slds-dropdown-trigger slds-dropdown-trigger--click" > <section class="slds-dropdown slds-popover slds-nubbin--top-left slds-dropdown-trigger" style="position:absolute; left:163px; top: -10px;"> <div class="slds-popover__body slds-p-vertical--xx-small slds-p-horizontal--none slds-scrollable--y" style="max-height:150px;"> <ul class="slds-dropdown__list slds-dropdown--length10"> <aura:iteration items="{!v.courseFeeNameItems}" var="courseFeeVar" indexVar="goNumber"> <li> <span class="slds-lookup__item-action slds-media"> <c:svg class="slds-icon slds-icon-standard-contact slds-icon--small slds-m-right--xx-small" xlinkHref="/resource/SLDS2016/assets/icons/utility-sprite/svg/symbols.svg#user" /> <a id="{!courseFeeVar.Id}" role="option" data-id="{!courseFeeVar.Id}" onclick="{!c.courseFeeVarSelectSearchItem}"> {!courseFeeVar.Name} </a> </span> </li> </aura:iteration> </ul> </div> </section> </div> <div aura:id="courseFeePillListDivId" class="slds-hide"> <ul> <li class="slds-pill slds-show slds-show slds-m-around--none" > <a id="" role="option" onclick="{!c.courseFeeRemoveSelectedItem}" data-id=""> <c:svg class="slds-icon slds-icon-standard-contact slds-icon--small slds-m-right--xx-small" xlinkHref="/resource/SLDS2016/assets/icons/utility-sprite/svg/symbols.svg#user" /> {!v.courseFeeSelectedSerchName} <button class="slds-button slds-butto--icon slds-float--right slds-pill__remove slds-m-top--xx-small" style="line-height:1.45rem;"> <c:svg class="slds-button__icon" xlinkHref="/resource/SLDS2016/assets/icons/utility-sprite/svg/symbols.svg#close" /> </button> </a> </li> </ul> </div> </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"> <div class="slds-form-element__controller"> <lightning:input type="date" autocomplete="off" name="dateOfDeposit" aura:id="dateOfDeposit" value="{!v.feesObj.DateOfDeposit__c}" label="Date Of Deposit" labelClass="slds-form-element__label" /> </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"> <label class="slds-form-element__label">Paid Amount</label> <div class="slds-form-element__controller"> <ui:inputCurrency class="slds-input" aura:id="paidAmount" value="{!v.feesObj.PaidAmount__c}"/> </div> </div> </div> </div> <div class="slds-text-align--center slds-m-top--medium"> <button class="slds-button slds-button--brand" onclick="{!c.submitFeeAction}">Submit</button> </div> <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> </aura:component> |
Create Component JavaScript Controller
Step 2:- Create Lightning Component : feesCmpController.js
From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller
feesCmpController.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 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 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 |
({ lookupSearchFeeName:function(component, event, helper){ var thisObjVal = event.getSource().get('v.value'); var feeStudentSpinId = component.find('feeStudentSpinId'); var feeStudentNameId = component.find('feeStudentNameId'); var feesOpenDivId = component.find('feesOpenDivId'); var feesPillListDivId = component.find('feesPillListDivId'); if(!$A.util.isUndefinedOrNull(thisObjVal) && thisObjVal.length>2){ $A.util.addClass(feeStudentSpinId,'spinner'); var action = component.get('c.getFeeStudent'); action.setParams({'searchFeeKey':thisObjVal}); action.setCallback(this, function(response){ var state = response.getState(); if(state == 'SUCCESS'){ var result = response.getReturnValue(); component.set('v.feesNameItems', result); $A.util.removeClass(feeStudentSpinId,'spinner'); $A.util.addClass(feesOpenDivId,'slds-is-open'); //alert('data saved successfully'); } }); $A.enqueueAction(action); } else{ component.set('v.feesNameItems', null); $A.util.removeClass(feeStudentSpinId,'spinner'); $A.util.removeClass(feesOpenDivId,'slds-is-open'); } }, feeSelectSearchItem:function(component, event, helper){ var getObjName = event.target.innerHTML; var getObjId = event.target.id; var feeStudentSpinId = component.find('feeStudentSpinId'); var feesOpenDivId = component.find('feesOpenDivId'); var feesPillListDivId = component.find('feesPillListDivId'); component.set('v.feeSelectId',getObjId); component.set('v.feeSelectedSerchName',getObjName); $A.util.addClass(feeStudentSpinId,'slds-hide'); $A.util.removeClass(feesOpenDivId,'slds-is-open'); $A.util.removeClass(feesPillListDivId,'slds-hide'); }, removeSelectedSerchItem:function(component, event, helper){ var feeStudentSpinId = component.find('feeStudentSpinId'); var feesOpenDivId = component.find('feesOpenDivId'); var feesPillListDivId = component.find('feesPillListDivId'); component.set('v.feeSelectId',''); component.set('v.feesObj.StudentName__c',''); $A.util.removeClass(feeStudentSpinId,'slds-hide'); $A.util.removeClass(feesOpenDivId,'slds-is-open'); $A.util.addClass(feesPillListDivId,'slds-hide'); }, submitFeeAction : function(component, event, helper) { var dateOfDeposit = component.get('v.feesObj.DateOfDeposit__c'); var paidAmount = component.get('v.feesObj.PaidAmount__c'); var action = component.get('c.postFeeData'); var feeSelectId = component.get('v.feeSelectId'); var courseFeeId = component.get('v.courseFeeId'); action.setParams({ 'studentName':feeSelectId, 'courseName':courseFeeId, 'dateOfDeposit':dateOfDeposit, 'paidAmount':paidAmount }); action.setCallback(this, function(response){ var state = response.getState(); alert(state); if(state == "SUCCESS"){ var result = response.getReturnValue(); //alert('date saved successfully'); var feeStudentSpinId = component.find('feeStudentSpinId'); var feesOpenDivId = component.find('feesOpenDivId'); var feesPillListDivId = component.find('feesPillListDivId'); component.set('v.feeSelectId',''); component.set('v.feesObj.StudentName__c',''); component.set('v.feesObj.DateOfDeposit__c',''); component.set('v.feesObj.PaidAmount__c',''); $A.util.removeClass(feeStudentSpinId,'slds-hide'); $A.util.removeClass(feesOpenDivId,'slds-is-open'); $A.util.addClass(feesPillListDivId,'slds-hide'); var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ 'title':'Success', 'type':'Success', 'message':'The record has been updated successfully' }); toastEvent.fire(); } }); $A.enqueueAction(action); }, courseLookupSearch:function(component, event, helper){ var thisObjVal = event.getSource().get('v.value'); var courseFeeOpenDivId = component.find('courseFeeOpenDivId'); var courseFeeStudentSpinId = component.find('courseFeeStudentSpinId'); $A.util.addClass(courseFeeStudentSpinId, 'spinner'); if(!$A.util.isUndefinedOrNull(thisObjVal) && thisObjVal.length>2){ var action = component.get('c.getCourseFee'); action.setParams({'searchFeeCourse':thisObjVal}); action.setCallback(this, function(response){ //alert(JSON.stringify(action)); var state = response.getState(); if(state == 'SUCCESS'){ var result = response.getReturnValue(); $A.util.removeClass(courseFeeStudentSpinId, 'spinner'); //ert('RESULT ' + JSON.stringify(result)); $A.util.addClass(courseFeeOpenDivId,'slds-is-open'); component.set('v.courseFeeNameItems',result); // alert('data saved successfully'); } }); $A.enqueueAction(action); }else{ component.set('v.courseFeeNameItems', null); $A.util.removeClass(courseFeeOpenDivId,'slds-is-open'); } }, courseFeeVarSelectSearchItem:function(component, event, helper){ var thisObjId = event.target.id; var thisObjName = event.target.innerHTML; var courseFeeStudentSpinId = component.find('courseFeeStudentSpinId'); var courseFeeOpenDivId = component.find('courseFeeOpenDivId'); var courseFeePillListDivId = component.find('courseFeePillListDivId'); component.set('v.courseFeeId',thisObjId); component.set('v.courseFeeSelectedSerchName',thisObjName); $A.util.addClass(courseFeeStudentSpinId,'slds-hide'); $A.util.removeClass(courseFeeOpenDivId,'slds-is-open'); $A.util.removeClass(courseFeePillListDivId,'slds-hide'); }, courseFeeRemoveSelectedItem:function(component, event, helper){ var courseFeeStudentSpinId = component.find('courseFeeStudentSpinId'); var courseFeeOpenDivId = component.find('courseFeeOpenDivId'); var courseFeePillListDivId = component.find('courseFeePillListDivId'); $A.util.removeClass(courseFeeStudentSpinId,'slds-hide'); $A.util.removeClass(courseFeeOpenDivId,'slds-is-open'); $A.util.addClass(courseFeePillListDivId,'slds-hide'); component.set('v.courseFeeId',''); component.set('v.courseFeeSelectedSerchName',''); component.set('v.feesObj.CourseName__c',''); }, }) |
Create Component Style CSS
Step 3:- Create Lightning Component : feesCmp.css
From Developer Console >> File >> New >> Lightning Component >> Component Style CSS
feesCmp.css [Component Style CSS]
1 2 3 4 5 6 7 |
.THIS { } .THIS .spinnerItem .spinnerIcon{display:none;} .THIS .spinnerItem.spinner .spinnerIcon{position:absolute; position: absolute; right: 5px; top: 6px; width: 20px; height:20px; display:block; } .THIS .spinnerItem.spinner .slds-input__icon{display:none;} .THIS .spinnerItem.slds-hide + .slds-dropdown-trigger{display:none;} |
Create Apex Class Controller
Step 4:- Create Apex Class : newStudentCtr.apxc
From Developer Console >> File >> New >> Apex Class
newStudentCtr.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 27 28 29 |
public class newStudentCtr { @AuraEnabled public static void postFeeData(string studentName, string courseName, date dateOfDeposit, Integer paidAmount){ Fees__c getFeeList = new Fees__c(); getFeeList.StudentName__c=studentName; getFeeList.CourseName__c=courseName; getFeeList.DateOfDeposit__c=dateOfDeposit; getFeeList.PaidAmount__c= paidAmount; insert getFeeList; } @AuraEnabled public static List<NewStudent__c> getFeeStudent(string searchFeeKey){ searchFeeKey = '%' + searchFeeKey + '%'; List<NewStudent__c> getFeeList = [Select Id, Name from NewStudent__c where Name Like:searchFeeKey]; return getFeeList; } @AuraEnabled public static List<Course__c> getCourseFee(string searchFeeCourse){ searchFeeCourse = '%' + searchFeeCourse + '%'; List<Course__c> getCourseList = [Select id, Name from Course__c where Name Like:searchFeeCourse]; return getCourseList; } } |
Further post that would you like to learn in lightning component.
Can we create record type on custom object?
From the object management settings for a custom object, go to Record Types. Click New in the Record Types related list. Select Master from the Existing Record Type dropdown list to copy all available picklist values, or choose an existing record type to clone its picklist values.
What is a custom record in Salesforce?
A custom object record page allows your user to access custom object related data.
What is custom record type?
Custom Record Type permission: This permission is assigned to users through role assignments or global permissions. This permission grants a user up to all four access levels (view, create, edit, or full) and controls the user's access level to all custom record types.
Related Topics | You May Also Like
- Your reaction of the article ▾
I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work.
Thanks For Sharing Wonderfull Ideas And Amazing content You Ever Create Please Keep Sharing And Keep It Up
May You Live Long
40 High Demand Gigs on Fiverr – Most Selling Gigs on Fiverr 2021
Hello Sir I’m having Error with C:svg found source.
As well not completed the closed loop for controller page.
please help for same.
Amazing article, and I have learned a lot