How to Use Wrapper Class In Lightning Component -Inner Class Example

Hi Guys, Today In this post we are going to learn about how to Use wrapper class or Inner Class in salesforce lightning component OR how to display data from wrapper class in lightning component.

In this sample example we are create a lightning component, and display standard object contact records and other data using wrapper class properties.

Using Wrapper Class In Lightning Component Example :

Apex class Controller [Include Wrapper/Inner class].

public class wrapperDisplayController {
    
    @AuraEnabled
    public static wrapperClass initMethod(){
        // create a wrapper class object and set the wrapper class @AuraEnabled properties and return it to the lightning component.
        wrapperClass returnwrapperClass = new  wrapperClass ();        
        returnwrapperClass.lstContact = [SELECT firstName, LastName, Department,LeadSource from contact Limit 25];
        returnwrapperClass.contactCount = returnwrapperClass.lstContact.size(); 
        returnwrapperClass.headerMsg = 'This is Sample Header Msg from Wrapper Class';
        return returnwrapperClass;    
    }
    
    // wrapper or Inner class with @AuraEnabled {get;set;} properties*    
    public class wrapperClass{
        @AuraEnabled public List<contact> lstContact{get;set;}
        @AuraEnabled public Integer contactCount{get;set;}
        @AuraEnabled public String headerMsg {get;set;}
    }
}

• To access apex[wrapper ] class properties in Lightning Component you have need to make them @AuraEnabled.
• see code comments

Lightning Component [testWrapper.cmp]

<aura:component controller="wrapperDisplayController">
	<!--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="wrapperList" type="object"/>
    
  <div class="slds-p-around--large">
      
      <h1 style="font-size:25px;">{!v.wrapperList.headerMsg}</h1> 
      <br/>
      <p style="color:red">Total Contacts = {!v.wrapperList.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">Department</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="First Name">Lead Source</div>
          </th>
        </tr>
      </thead>
      <!--table body start, 
        Iterate contact list as a <tr>
        -->
      <tbody>
        <aura:iteration items="{!v.wrapperList.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.Department}">{!con.Department}</div>
            </th>
            <th scope="row">
               <div class="slds-truncate" title="{!con.LeadSource}">{!con.LeadSource}</div>
            </th>
          </tr>
        </aura:iteration>
      </tbody>
    </table>
  </div>
</aura:component>

• see code comments

javaScript Controller [testWrapperController.js]

({
    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") {
          //set response value in wrapperList attribute on component.
          component.set('v.wrapperList', response.getReturnValue());
        }
      });
      $A.enqueueAction(action);
    },
})

• see code comments

demo.app [Lightning Application]

<aura:application extends="force:slds">
    <c:testWrapper/>
<!-- here c: is org. default namespace prefix-->
</aura:application>

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box 🙂