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

What is Wrapper Class?

A wrapper class is a class within a class that stores a collection of values of different or similar data types in a single object.

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;}
    }
}

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);
    },
})

demo.app [Lightning Application]

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

Test class

    
@isTest

public class wrapperDisplayControllerTest {

    private static testmethod void testWrapper(){

        contact oContact = new contact();

        oContact.lastName = 'test';

        // add all required fields here

        insert oContact;
        test.startTest();

         wrapperDisplayController.initMethod();

        test.stopTest();

    }

}

Visualforce Code:

<apex:page controller="AccountSelectClassController" sidebar="false">
    <script type="text/javascript">
        function selectAllCheckboxes(obj,receivedInputID){
            var inputCheckBox = document.getElementsByTagName("input");                  
            for(var i=0; i<inputCheckBox.length; i++){          
                if(inputCheckBox[i].id.indexOf(receivedInputID)!=-1){                                     
                    inputCheckBox[i].checked = obj.checked;
                }
            }
        }
    </script>
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton value="Show Selected Accounts" action="{!processSelected}" rerender="table2"/>
            </apex:pageBlockButtons>
            
            <apex:pageblockSection title="All Accounts" collapsible="false" columns="2">
            
                <apex:pageBlockTable value="{!wrapAccountList}" var="accWrap" id="table" title="All Accounts">
                    <apex:column >
                        <apex:facet name="header">
                            <apex:inputCheckbox onclick="selectAllCheckboxes(this,'inputId')"/>
                        </apex:facet>
                        <apex:inputCheckbox value="{!accWrap.selected}" id="inputId"/>
                    </apex:column>
                    <apex:column value="{!accWrap.acc.Name}" />
                    <apex:column value="{!accWrap.acc.BillingState}" />
                    <apex:column value="{!accWrap.acc.Phone}" />
                </apex:pageBlockTable>          
                      
                <apex:pageBlockTable value="{!selectedAccounts}" var="c" id="table2" title="Selected Accounts">
                    <apex:column value="{!c.Name}" headerValue="Account Name"/>
                    <apex:column value="{!c.BillingState}" headerValue="Billing State"/>
                    <apex:column value="{!c.Phone}" headerValue="Phone"/>
                </apex:pageBlockTable>
            
            </apex:pageblockSection>
        </apex:pageBlock>
    </apex:form>
  
</apex:page>

Apex Class Controller:

public class AccountSelectClassController{

    //Our collection of the class/wrapper objects wrapAccount 
    public List<wrapAccount> wrapAccountList {get; set;}
    public List<Account> selectedAccounts{get;set;}
    
    public AccountSelectClassController(){
        if(wrapAccountList == null) {
            wrapAccountList = new List<wrapAccount>();
            for(Account a: [select Id, Name,BillingState, Website, Phone from Account limit 10]) {
                // As each Account is processed we create a new wrapAccount object and add it to the wrapAccountList
                wrapAccountList.add(new wrapAccount(a));
            }
        }
    }

    public void processSelected() {
    selectedAccounts = new List<Account>();

        for(wrapAccount wrapAccountObj : wrapAccountList) {
            if(wrapAccountObj.selected == true) {
                selectedAccounts.add(wrapAccountObj.acc);
            }
        }
    }


    // This is our wrapper/container class. A container class is a class, a data structure, or an abstract data type whose instances are collections of other objects. In this example a wrapper class contains both the standard salesforce object Account and a Boolean value
    public class wrapAccount {
        public Account acc {get; set;}
        public Boolean selected {get; set;}

        //This is the contructor method. When we create a new wrapAccount object we pass a Account that is set to the acc property. We also set the selected value to false
        public wrapAccount(Account a) {
            acc = a;
            selected = false;
        }
    }
}