How to Use Wrapper Class In Lightning Component.

Apex Class:- wrapperContactController
public class wrapperContactController
{
@AuraEnabled
public static wrapperClassContact initMethod()
{
// create a wrapper class object and set the wrapper class @AuraEnabled properties and return it to the lightning component.

List<Contact> lstContact = [SELECT firstName, LastName, Email,Phone from contact Limit 25]; 
wrapperClassContact wrapCnctObj = new wrapperClassContact (); 
wrapCnctObj.lstContact = lstContact;
wrapCnctObj.contactCount = lstContact.size(); 
wrapCnctObj.headerMsg = 'This is Sample Header Msg from Wrapper Class';
return wrapCnctObj; 
}

// wrapper or Inner class with @AuraEnabled {get;set;} properties* 
public class wrapperClassContact
{
@AuraEnabled 
public List<contact> lstContact{get;set;}
@AuraEnabled 
public Integer contactCount{get;set;}
@AuraEnabled 
public String headerMsg {get;set;}
}
}

// Lightning Component:- wrapperContactComponent

<aura:component controller="wrapperContactController">
<!--aura init handler , call js "loadData" function on component load, and display contact data on table--> 
<aura:handler name="init" value="{!this}" action="{!c.loadData}"/>
<!--Declare Attributes--> 
<aura:attribute name="wrapperClass" type="object" />

<div class="slds-p-around--large">

<h1 style="font-size:25px;">{!v.wrapperClass.headerMsg}</h1> 
<br/>
<p style="color:red">Total Contacts = {!v.wrapperClass.contactCount}</p>

<!--https://www.lightningdesignsystem.com/components/data-tables/-->
<table class="slds-table slds-table--bordered slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">
<div class="slds-truncate" title="First Name">First Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="First Name">Last Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Department">Email</div>
</th>
<th scope="col">
<div class="slds-truncate" title="First Name">Phone</div>
</th>
</tr>
</thead>
<!--table body start, 
Iterate contact list as a <tr>
-->
<tbody>
<aura:iteration items="{!v.wrapperClass.lstContact}" var="con">
<tr>
<th scope="row">
<div class="slds-truncate" title="{!con.FirstName}">{!con.FirstName}</div>
</th>
<th scope="row">
<div class="slds-truncate" title="{!con.LastName}">{!con.LastName}</div>
</th>
<th scope="row">
<div class="slds-truncate" title="{!con.Email}">{!con.Email}</div>
</th>
<th scope="row">
<div class="slds-truncate" title="{!con.Phone}">{!con.Phone}</div>
</th>
</tr>
</aura:iteration>
</tbody>
</table>
</div>

</aura:component>

Lightning Component JavaScript Controller:-

({
loadData: function(component, event, helper) 
{ 
//call apex class method
var action = component.get('c.initMethod');

action.setCallback(this, function(response) 
{
//store state of response
var state = response.getState();
if (state === "SUCCESS")
{
var respVal=response.getReturnValue();
console.log('>>>respVal>>>'+respVal);
//set response value in wrapperList attribute on component.
component.set('v.wrapperClass', respVal);
}
});
$A.enqueueAction(action);
}
})

Lightning Application:- wrapperContactApp

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

One thought on “How to Use Wrapper Class In Lightning Component.

  • Thanks for providing a solution. We need the theoretical/flow steps for better understanding for this.

Leave a Reply