How to wrapper class retrieve all the values in Salesforce Lightning Component

Post Views: 876

Hey guys, In this post we are going to learn about that how to Wrapper class Retrieve all the Values in Salesforce lightning component.

In this example we will fetch all the values from Custom sObject by help of wrapper apex class in lightning component.

Files we used in this post example:-

File Name	File Type	Description
wrapperClassCustomObjApp.app	Lightning Component Application	It is used for Call the component to preview the output on browser.
wrapperClassCustomObjCmp.cmp	Lightning Component Application	It is used to user interface display on the client side.
wrapperClassCustomObjCmpConroller.js	JavaScript Controller File	It is used for client side javascript function.
wrapperClassCustomObjCmpConrollerHelper.js	JavaScript Helper File	Helper called in the Javascript controller Init function.
wrapperCustomObjCtrCmp.apxc	Apex Class Controller	For retrieve all the record from database server
Custom Object:- NewStudent__c Custom Object Fields:- Id, Name, Email__c, Address__c	Custom Object and their fields	Custom object like database and custom fields are column of data table.

Other related post that would you like to learn in LWC

How to delete selected record on click button using deleteRecord of uiRecordApi in Lightning web component -LWC
How to create a custom form validation and display required Error message upon handle input change in Lightning web component – LWC
How to pass the color code value from a child LWC component to parent lightning aura component using LWC Custom Event & Dispatch Event
A small example of dispatch event where we define a custom event in child lightning web component and passing values from child component to parent component in — LWC
How to Communicate Between Parent to Child and Passing the Value from Parent Component to Child component in Lightning Web Component — LWC
Insert New Record in Custom Object and Navigate to the Record on Detail Page Using Apex class method in Lightning Web Component — LWC
How to Insert, Edit/Update record without apex class by help of the lightning data service using “lightning-record-form” in Lighting Web Component — LWC
Calling an apex method imperatively and fetching contact record from database without @wire and create lightning data-table

Step 1:- Create Lightning Application : wrapperClassCustomObjApp.app

From Developer Console >> File >> New >> Lightning Application

wrapperClassCustomObjApp.app [Component Application File]

   <aura:application extends="force:slds">
    <c:wrapperClassCustomObjCmp/>    
   </aura:application>

<aura:application extends="force:slds">

<c:wrapperClassCustomObjCmp/>

</aura:application>

Step 2:- Create Lightning Component : wrapperClassCustomObjCmp.cmp

From Developer Console >> File >> New >> Lightning Component

wrapperClassCustomObjCmp.cmp [Lightning Component File]

   <aura:component controller="wrapperCustomObjCtrCmp" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:isUrlAddressable" access="global" >
    
    <aura:attribute name="wrapListItems" type="NewStudent__c[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="recSelectId" type="String" default=""/>    
   
    <div class="slds slds-p-horizontal--medium">
        <table class="slds-table slds-table--bordered slds-table--col-bordered" style="border-collapse:collapse;">
            <thead> 
                <tr>
                    <th>Student Name</th>                   
                    <th>Email</th>
                     <th>Address</th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.wrapListItems}" var="wrapVar" indexVar="index">
                    <tr id="{!wrapVar.recStudentId}">
                        <td>{!wrapVar.studentName}</td>                                                
                        <td>{!wrapVar.studentEmail}</td>
                        <td>{!wrapVar.studentAddress}</td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
     </div>
   
</aura:component>

<aura:component controller="wrapperCustomObjCtrCmp" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:isUrlAddressable" access="global" >

<aura:attribute name="wrapListItems" type="NewStudent__c[]"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<aura:attribute name="recSelectId" type="String" default=""/>

<thead>

<tr>

<th>Student Name</th>

<th>Email</th>

<th>Address</th>

</tr>

</thead>

<tbody>

<aura:iteration items="{!v.wrapListItems}" var="wrapVar" indexVar="index">

<td>{!wrapVar.studentName}</td>

<td>{!wrapVar.studentEmail}</td>

<td>{!wrapVar.studentAddress}</td>

</tr>

</aura:iteration>

</tbody>

</table>

</div>

</aura:component>

Step 3:- Create Lightning Component : wrapperClassCustomObjCmpConroller.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

wrapperClassCustomObjCmpConroller.js [JavaScript Controller]

   ({
	doInit : function(component, event, helper) {    
        
	  var action = component.get("c.appCustomWrapListMthd");         
        action.setCallback(this, function(response){
            var state = response.getState();            
            if(state=='SUCCESS'){
                var result = response.getReturnValue();            
                component.set('v.wrapListItems',result);
            }
        });
        $A.enqueueAction(action);
	},    
    
     })

({

doInit : function(component, event, helper) {

var action = component.get("c.appCustomWrapListMthd");

action.setCallback(this, function(response){

var state = response.getState();

if(state=='SUCCESS'){

var result = response.getReturnValue();

component.set('v.wrapListItems',result);

}

});

$A.enqueueAction(action);

})

Step 4:- Create Lightning Component : wrapperClassCustomObjCmpConrollerHelper.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Helper

wrapperClassCustomObjCmpConrollerHelper.js [JavaScript Helper File]

   ({
	refreshView : function(component, event, helper) {
		var action = component.get("c.appCustomWrapListMthd"); 
        
        action.setCallback(this, function(response){
            var state = response.getState();            
            if(state=='SUCCESS'){
                var result = response.getReturnValue();
                component.set('v.wrapListItems',result);
            }
        });
        $A.enqueueAction(action);
	}
})

({

refreshView : function(component, event, helper) {

var action = component.get("c.appCustomWrapListMthd");

action.setCallback(this, function(response){

var state = response.getState();

if(state=='SUCCESS'){

var result = response.getReturnValue();

component.set('v.wrapListItems',result);

}

});

$A.enqueueAction(action);

}

})

Step 5:- Create Lightning Application : wrapperCustomObjCtrCmp.apxc

From Developer Console >> File >> New >> Apex Class

wrapperCustomObjCtrCmp.apxc [Apex Class Controller]

   public class wrapperCustomObjCtrCmp {    
   
    public class wrapperCustomClass{
        @AuraEnabled
        public string studentName;
        @AuraEnabled
        public string studentEmail;
        @AuraEnabled
        public string studentAddress;
        @AuraEnabled
        public Id recStudentId;
        
        public wrapperCustomClass(string studentName, string studentEmail, string studentAddress, Id recStudentId){
         this.studentName = studentName;
         this.studentEmail = studentEmail;
         this.studentAddress = studentAddress;  
         this.recStudentId = recStudentId;  
         
        }
        
    }
    
    
    @AuraEnabled
    public static List<wrapperCustomClass> appCustomWrapListMthd(){
       List<NewStudent__c> newStudent = new List<NewStudent__c>();       
       List<wrapperCustomClass> custWrapObj = new  List<wrapperCustomClass>();
       List<NewStudent__c> newStudentView =[Select Id, Name, Email__c, Address__c From NewStudent__c];
        
        Set<Id> projChecklistIdSet= new Set<Id> ();
        for(NewStudent__c de: newStudentView) {
            projChecklistIdSet.add(de.Id);
        }
            
        for(NewStudent__c studentObj:newStudentView){
            custWrapObj.add(new wrapperCustomClass(studentObj.Name,studentObj.Email__c, studentObj.Address__c,studentObj.Id));
        }        
        return custWrapObj;       
       }     
   }

public class wrapperCustomObjCtrCmp {

public class wrapperCustomClass{

@AuraEnabled

public string studentName;

@AuraEnabled

public string studentEmail;

@AuraEnabled

public string studentAddress;

@AuraEnabled

public Id recStudentId;

public wrapperCustomClass(string studentName, string studentEmail, string studentAddress, Id recStudentId){

this.studentName = studentName;

this.studentEmail = studentEmail;

this.studentAddress = studentAddress;

this.recStudentId = recStudentId;

}

@AuraEnabled

public static List<wrapperCustomClass> appCustomWrapListMthd(){

List<NewStudent__c> newStudent = new List<NewStudent__c>();

List<wrapperCustomClass> custWrapObj = new List<wrapperCustomClass>();

List<NewStudent__c> newStudentView =[Select Id, Name, Email__c, Address__c From NewStudent__c];

Set<Id> projChecklistIdSet= new Set<Id> ();

for(NewStudent__c de: newStudentView) {

projChecklistIdSet.add(de.Id);

}

for(NewStudent__c studentObj:newStudentView){

custWrapObj.add(new wrapperCustomClass(studentObj.Name,studentObj.Email__c, studentObj.Address__c,studentObj.Id));

}

return custWrapObj;

}

Further post that would you like to learn…

4 thoughts on “How to wrapper class retrieve all the values in Salesforce Lightning Component”

Stock Homes

September 9, 2020 at 7:14 am

You Can Join Stock Market Classes In IndoreBest NISM & Trading Share Market Technical Analysis
Ahsan khan

November 18, 2020 at 1:52 pm

I am also proggrammer easy to understandalbe
pinjara khubsurti kaa

December 9, 2020 at 4:39 pm

Thanks For Sharing The Amazing content. I Will also share with my friends. Great Content thanks a lot.
Joganireinforcement

February 12, 2021 at 9:27 am

Nice Content
5 Internet Approval Site (Do Follow Backlinks)

How to wrapper class retrieve all the values in Salesforce Lightning Component

Files we used in this post example:-

wrapperClassCustomObjApp.app [Component Application File]

wrapperClassCustomObjCmp.cmp [Lightning Component File]

wrapperClassCustomObjCmpConroller.js [JavaScript Controller]

wrapperClassCustomObjCmpConrollerHelper.js [JavaScript Helper File]

wrapperCustomObjCtrCmp.apxc [Apex Class Controller]

Related Topics

4 thoughts on “How to wrapper class retrieve all the values in Salesforce Lightning Component”

Leave a Comment Cancel reply

Files we used in this post example:-

wrapperClassCustomObjApp.app [Component Application File]

wrapperClassCustomObjCmp.cmp [Lightning Component File]

wrapperClassCustomObjCmpConroller.js [JavaScript Controller]

wrapperClassCustomObjCmpConrollerHelper.js [JavaScript Helper File]

wrapperCustomObjCtrCmp.apxc [Apex Class Controller]

Related Topics

4 thoughts on “How to wrapper class retrieve all the values in Salesforce Lightning Component”

Leave a Comment Cancel reply

Please Contribute to Support If Some Value Added in Your Project or Website