Tag Archives: Wrapper Class

Wrapper Class In Lightning Component

Lightning Component:

<!--
Name: ContactList.cmp
--> 
<aura:component controller="ContactController">
    <!--Declare Event Handlers-->  
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    
    <!--Declare Attributes-->
    <aura:attribute name="contactList" type="ContactController.ContactWrapper[]" />   
    <aura:attribute name="isSelectAll" type="boolean" default="false"/>
    
    <div class="slds-m-around_xx-large">
        <h1 class="slds-text-heading--medium">Contacts</h1>
        <br/>
        <!--Contact List Table-->
        <table class="slds-table slds-table--bordered slds-table--cell-buffer" role="grid">      
            <thead>  
                <tr class="slds-text-title--caps">
                    <th>           
                        <label class="slds-checkbox">
                            <ui:inputCheckbox value="{!v.isSelectAll}" change="{!c.handleSelectAllContacts}" aura:id="selectAll"/>
                            <span class="slds-checkbox--faux" />
                            <span class="slds-form-element__label"></span>
                        </label>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Name">Name</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Account">Account</div>
                    </th>
                    
                    <th scope="col">
                        <div class="slds-truncate" title="Phone">Phone</div>
                    </th>
                    
                    <th scope="col">
                        <div class="slds-truncate" title="Email">Email</div>
                    </th>
                </tr>
            </thead>
            <tbody>        
                <aura:iteration items="{!v.contactList}" var="con">
                    <tr>
                        <th>
                            <label class="slds-checkbox">
                                <ui:inputCheckbox aura:id="checkContact" value="{!con.isSelected}" text="{!con.Id}"/>
                                <span class="slds-checkbox--faux" />
                                <span class="slds-form-element__label"></span>
                            </label>
                        </th>
                        <th scope="row">
                            <div class="slds-truncate" title="{!con.Name}">{!con.Name}</div>
                        </th>
                        <td>
                            <div class="slds-truncate" title="{!con.Account}">{!con.Account}</div>
                        </td>
                        <th scope="row">
                            <div class="slds-truncate" title="{!con.Phone}">{!con.Phone}</div>
                        </th>
                        <td>
                            <div class="slds-truncate" title="{!con.Email}">{!con.Email}</div>
                        </td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
        <div>
            <br/>
            <lightning:button label="Submit" class="slds-button_brand" onclick="{!c.handleSelectedContacts }"  />
        </div>
    </div>
</aura:component>

Lightning JS Controller:

({
    //get Contact List from apex controller
    doInit : function(component, event, helper) {
        var action = component.get("c.getContactList");
        action.setCallback(this, function(result){
            var state = result.getState();
            if (component.isValid() && state === "SUCCESS"){
                component.set("v.contactList",result.getReturnValue());   
            }
        });
        $A.enqueueAction(action);
    },
    
    //Select all contacts
    handleSelectAllContacts: function(component, event, helper) {
        var getID = component.get("v.contactList");
        var checkvalue = component.find("selectAll").get("v.value");        
        var checkContact = component.find("checkContact"); 
        if(checkvalue == true){
            for(var i=0; i<checkContact.length; i++){
                checkContact[i].set("v.value",true);
            }
        }
        else{ 
            for(var i=0; i<checkContact.length; i++){
                checkContact[i].set("v.value",false);
            }
        }
    },
    
    //Process the selected contacts
    handleSelectedContacts: function(component, event, helper) {
        var contactList = component.get("v.contactList");
        var isSelectAll = component.get("v.isSelectAll");
        
        var selectedContacts = [];
        
        if(isSelectAll){
            selectedContacts = contactList;
        }
        else{
            var k = 0;
            for (var i=0; i<contactList.length; i++){
                var c = contactList[i];
                if(c.isSelected) {
                    selectedContacts[k] = c;
                    k++; 
                }     
            }
        }
        
        if(selectedContacts.length > 0){
            var contactRecords = JSON.stringify(selectedContacts);
            var action = component.get("c.processSelectedContacts");
            action.setParams({
                contactRecords : contactRecords
            });
            action.setCallback(this, function(result){
                var state = result.getState();
                if (component.isValid() && state === "SUCCESS"){
                    alert('Success in calling server side action');
                }
                else if(state == "ERROR"){
                    alert('Error in calling server side action');
                }
            });
            $A.enqueueAction(action);
        }
    }
})

Apex Controller:

public class ContactController {
    
    @AuraEnabled
    Public static List<ContactWrapper> getContactList(){
        List<ContactWrapper> contactList = new List<ContactWrapper>(); 
        //get all contact list
        List<Contact> conList = [SELECT Id, Name, Account.Name, Phone, Email FROM Contact LIMIT 10];
        for(Contact con : conList){
            ContactWrapper obj = new ContactWrapper();
            obj.ContactId = con.Id;
            obj.Name = con.Name;
            obj.Account = con.Account.Name;
            obj.Phone = con.Phone;
            obj.Email = con.Email;
            obj.isSelected = false; 
            contactList.add(obj);
        }
        return contactList;
    }
    
    @AuraEnabled
    Public static void processSelectedContacts(string contactRecords){
        system.debug('contactRecords-' + contactRecords);
        List<ContactWrapper> contactList = new  List<ContactWrapper>();
        if(!string.isBlank(contactRecords)){
            contactList = (List<ContactWrapper>)System.JSON.deserialize(contactRecords,List<ContactWrapper>.class);
            system.debug('contactList-' + contactList);
        }
    }
    
    public class ContactWrapper{
        @AuraEnabled
        public String ContactId {get;set;}
        @AuraEnabled
        public String Name {get;set;}
        @AuraEnabled
        public String Account {get;set;}
        @AuraEnabled
        public String Phone {get;set;}
        @AuraEnabled
        public String Email {get;set;}
        @AuraEnabled
        public boolean isSelected {get;set;}
    }
}

Wrapper Class in Apex

A wrapper class is a class, a data structure, or an abstract data type which contains different primitive data types and objects as a class member variable. We can go for wrapper class when we need to perform some operation in the records using other then object fields in that case we can use it.

Here is an example, I want to display list of account data in a table along with a check box on the right side of the table for every row, and I want to show selected account records in another table.

I’ve created a wrapper class with Account object and a Boolean variable members. Retrieving list of account records and binding it to wrapper class. For every account and checkbox value(false) I’m storing a new wrapper class records in the wrapper class list, and in the Visualforce page the value of pageBlockTable is wrapper class list.

Visualforce Page:

<apex:page controller="SampleController" tabStyle="Account" sidebar="false">
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton value="Show Selected Accounts" action="{!getSelectedAccounts}" rerender="pbTable2"/>
            </apex:pageBlockButtons>
            
            <apex:pageblockSection title="All Accounts" collapsible="false" columns="2">
                <apex:pageBlockTable value="{!accWrapList}" var="accWrap" id="pbTable1" title="All Accounts">
                    <apex:column>
                        <apex:inputCheckbox value="{!accWrap.isSelected}"/>
                    </apex:column>
                    <apex:column value="{!accWrap.acc.Name}"/>
                    <apex:column value="{!accWrap.acc.Industry}"/>
                    <apex:column value="{!accWrap.acc.Phone}"/>
                </apex:pageBlockTable>
                
                <apex:pageBlockTable value="{!selectedAccountList}" var="acc" id="pbTable2" title="Selected Accounts">
                    <apex:column value="{!acc.Name}" headerValue="Account Name"/>
                    <apex:column value="{!acc.Industry}" headerValue="Industry"/>
                    <apex:column value="{!acc.Phone}" headerValue="Phone"/>
                </apex:pageBlockTable>
                
            </apex:pageblockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Apex Controller:

public class SampleController{
    
    //Account List and AccountWrapper Class List Variables
    public List<AccountWrapper> accWrapList {get; set;}
    public List<Account> selectedAccountList {get;set;}
    
    public SampleController(){
        accWrapList = new List<AccountWrapper>();
        List<Account> accList = new List<Account>();
        accList = [SELECT Id, Name, Type, Industry, Phone FROM Account LIMIT 10];
        for(Account a: accList) {
            //Add each Account record to AccountWrapperList
            accWrapList.add(new AccountWrapper(a));
        }
    }
    
    public void getSelectedAccounts() {
        selectedAccountList = new List<Account>();
        for(AccountWrapper obj : accWrapList) {
            if(obj.isSelected == true) {
                selectedAccountList.add(obj.acc);
            }
        }
    }
    
    //Account Wrapper Class.
    //This wrapper class contains both the standard salesforce object Account and a Boolean value.
    public class AccountWrapper {
        public Account acc {get; set;}
        public Boolean isSelected {get; set;}
        
        public AccountWrapper(Account a) {
            acc = a;
            isSelected = false;
        }
    }
}

Output:

How to Access Wrapper Class Variable in Visualforce Page?

Controller:

public class SampleController
{
    //Wrapper class variable
    public Wrapper obj {get;set;}
    
    //Constructor
    public SampleController(){
        obj = new Wrapper();
        obj.name = 'Biswajeet';
    }
    
    //Wrapper class
    public class Wrapper
    {
        public String name {get;set;}
    }
}

Visualforce Page:

<apex:page controller="SampleController">
    <apex:outputText value="{!obj.name}"></apex:outputText>
</apex:page>