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 | how to insert lookup field in salesforce using apex

Post Views: 1,549

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

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]

    <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/>
    <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 tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;">Here..</span></a></strong></p>

    </div>
</aura:component>

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

<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"/>

<label class="slds-form-element__label">Student Name</label>

<ui:inputText aura:id="feeStudentNameId" placeholder="Search student..." class="slds-input" keyup="{!c.lookupSearchFeeName}" updateOn="keyup" value="{!v.feesObj.StudentName__c}"/>

<c:svg class="slds-input__icon" xlinkHref="/resource/SLDS2016/assets/icons/utility-sprite/svg/symbols.svg#search"/>

</div>

<aura:iteration items="{!v.feesNameItems}" var="feeStudentVar" indexVar="goNumber">

<li>

<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>

<ul>

<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}

<c:svg class="slds-button__icon" xlinkHref="/resource/SLDS2016/assets/icons/utility-sprite/svg/symbols.svg#close" />

</button>

</a>

</li>

</ul>

</div>

<label class="slds-form-element__label">Course</label>

<ui:inputText aura:id="courseFeeNameId" placeholder="Search course..." class="slds-input" keyup="{!c.courseLookupSearch}" updateOn="keyup" value="{!v.feesObj.CourseName__c}"/>

<c:svg class="slds-input__icon" xlinkHref="/resource/SLDS2016/assets/icons/utility-sprite/svg/symbols.svg#search"/>

</div>

<aura:iteration items="{!v.courseFeeNameItems}" var="courseFeeVar" indexVar="goNumber">

<li>

<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>

<ul>

<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}

<c:svg class="slds-button__icon" xlinkHref="/resource/SLDS2016/assets/icons/utility-sprite/svg/symbols.svg#close" />

</button>

</a>

</li>

</ul>

</div>

<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>

<label class="slds-form-element__label">Paid Amount</label>

<ui:inputCurrency class="slds-input" aura:id="paidAmount" value="{!v.feesObj.PaidAmount__c}"/>

</div>

<button class="slds-button slds-button--brand" onclick="{!c.submitFeeAction}">Submit</button>

</div>

<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 tutorial, To know more Click <span style="color:#ff8000; font-size:18px;">Here..</span></a></strong></p>

</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','');        
    },
    
})

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]

  .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;}

.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;
    } 
    
}

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;

}

TechW3web:- To know more, Use this Link

Further post that would you like to learn in lightning component.

The Sitemap to Find all Published Post of The Tutorial w3web.net Click Here For More Information

Author of w3web.net

Hi, This is Vijay behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | The Sitemap where you can find all published post on w3web.net

3 thoughts on “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 | how to insert lookup field in salesforce using apex”

mor liyan

June 1, 2021 at 9:10 am

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.
muhammad kashif bilal

July 23, 2021 at 2:12 pm

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
Fiona Xu

August 9, 2021 at 6:12 am

Amazing article, and I have learned a lot

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 | how to insert lookup field in salesforce using apex

We used the files in this example

Note:-Static resource zip file

Create Lightning Component

feesCmp.cmp [Lightning Component File]

Create Component JavaScript Controller

feesCmpController.js [JavaScript Controller]

Create Component Style CSS

feesCmp.css [Component Style CSS]

Create Apex Class Controller

newStudentCtr.apxc [Apex Class Controller]

Related Topics | You May Also Like

Author of w3web.net

3 thoughts on “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 | how to insert lookup field in salesforce using apex”

Leave a Comment Cancel reply