wrapper class sample

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

Lightning Component

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 :
Lightning Component Output:wrapper class
Lightning Component Output:

Apex class Controller [Include Wrapper/Inner class].

public class wrapperDisplayController {
    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> 
      <p style="color:red">Total Contacts = {!v.wrapperList.contactCount}</p>
    <table class="slds-table slds-table--bordered slds-table--cell-buffer">
        <tr class="slds-text-title--caps">
          <th scope="col">
            <div class="slds-truncate" title="First Name">First Name</div>
          <th scope="col">
            <div class="slds-truncate" title="First Name">Last Name</div>
          <th scope="col">
            <div class="slds-truncate" title="Department">Department</div>
          <th scope="col">
            <div class="slds-truncate" title="First Name">Lead Source</div>
      <!--table body start, 
        Iterate contact list as a <tr>
        <aura:iteration items="{!v.wrapperList.lstContact}" var="con">
            <th scope="row">
              <div class="slds-truncate" title="{!con.FirstName}">{!con.FirstName}</div>
            <th scope="row">
              <div class="slds-truncate" title="{!con.LastName}">{!con.LastName}</div>
            <th scope="row">
              <div class="slds-truncate" title="{!con.Department}">{!con.Department}</div>
            <th scope="row">
               <div class="slds-truncate" title="{!con.LeadSource}">{!con.LeadSource}</div>
  • 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());
  • see code comments
demo.app [Lightning Application]
<aura:application extends="force:slds">
<!-- here c: is org. default namespace prefix-->
Lightning Component Output: wrapper class
Lightning Component Output:

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 🙂


  • Hi piyush

    I am getting internal server error when I execute your code. The only change I made is I added in component  <ltng:require styles=”{!$Resource.SLDS24 + ‘/assets/styles/salesforce-lightning-design-system.css’}”/>

  • Hi piyush,

    When i am saving the component I am encountering below error:


    Failed to save testWrapper.cmp: Invalid <aura:attribute> type:wrapperClass: Source

    Could  you please suggest on this.

    Thanks in advance.



  • @Vardhan

    I got same error in API Version 41.0 but not in API Version 38.0. Still I’ll find solution for this error.

  • Thank you so much for your quick response.

    I have updated the below code and it is working fine now.

    Existing code:

    <aura:attribute name=“wrapperList” type=“wrapperDisplayController.wrapperClass”/>

    Updated code:

    <aura:attribute name=”wrapperList” type=”object”/>

  • I don’t want use aura:attribute type as Wrapper returns I will use a Object Type but I am getting internal Salesforce error why?

  • Hello, it is a very useful post. I did help me a lot. But how do you make the tests of the server side controller and the client side controller? Do you have an example. It would be very useful to me.

    • we don’t need to write test code for client side controller and for server side apex controller find following test class code :

      public class wrapperDisplayControllerTest {

      private static testmethod void testWrapper(){
      contact oContact = new contact();
      oContact.lastName = 'test';
      // add all required fields here
      insert oContact;


Leave a Reply