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

Post Views: 44

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…

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;

}

Related further post that you want to learn……

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

Leave a Comment Cancel reply