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
You can download file directly from github by Click Here.
Other related post that would you like to learn in Salesforce
Create Lightning Component
Step 1:- Create Lightning Component : feesCmp.cmp
From Developer Console >> File >> New >> Lightning Component
feesCmp.cmp [Lightning Component File]
![]() |
<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]
![]() |
({
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]
![]() |
.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]
![]() |
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 Salesforce
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
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 |