All You Need to Know About the Wrapper Class In Salesforce

A class, data structure, or abstract data type that has a variety of objects or collections of objects as members is known as a wrapper class or container class. This article will demonstrate how to utilize a wrapper class in a lightning component to display data. 

Wrapper Class in Lightning Web Component 

We will create an Apex class with Name WrapperDemo which has a wrapper class defined inside it. This wrapper class is being used inside a method with the name fetchAccountContactDetails (). This method returns a List of wrappers defined inside the class with the name AccountContactWrapperClass. Also, the method is annotated with @AuraEnabled(cacheable=true). 

Let’s see an example of a wrapper class in lightning web component salesforce. In this example, we will create an Account Wrapper and will display- the Account Name, Account type, Number of associated contacts with the account, and Account address when clicking on the account name then it will be directly navigated to the account detail page, and display on the lightning web component. 

Let’s create a Lightning web component with WrapperClassDemo. Every lightning web component will have three files by default. 

Don’t forget to check out: Wrapper Class in Java | The Salesforce Developer Guide

Apex Controller Class with Wrapper Class

public with sharing class WrapperDemo { 
    @AuraEnabled(cacheable=true) 
    public static List<AccountContactWrapperClass>      fetchAccountContactDetails(){ 
        List<AccountContactWrapperClass> lstAccountContWrapper =   new List<AccountContactWrapperClass>(); 
        for(Account acc : [select id,name,type,BillingCity,BillingCountry,BillingStreet, (select id from Contacts) from  
        Account where Name !=null LIMIT 10]){                                  
            lstAccountContWrapper.add(new AccountContactWrapperClass(acc,acc.Contacts.size())); 
        } 
        return lstAccountContWrapper; 
    } 
    public class AccountContactWrapperClass{ 
        @AuraEnabled 
        public Account acc; 
        @AuraEnabled 
        public Integer totalContacts; 
        @AuraEnabled 
        public String billingAdress; 
        @AuraEnabled 
        public String type; 
        @AuraEnabled 
        public String AccountName; 
        @AuraEnabled
        public String AccountLink;  
        public AccountContactWrapperClass(Account acc, Integer totalContacts){ 
            this.acc = acc; 
            this.totalContacts = totalContacts; 
            this.AccountLink = "https://www.forcetalks.com/" + acc.Id; 
            this.type = acc.type; 
            this.AccountName = acc.Name; 
            this.billingAdress = acc.BillingStreet + ',' + acc.BillingCity + ',' + acc.BillingCountry ; 
        } 
    }
}

 Wrapperclassdemo.html 

<template> 
    <lightning-card> 
        <template if:true = {data}> 
            <lightning-datatable 
                key-field="id" 
                data = {data} 
                columns= {columns} 
            > 
            </lightning-datatable> 
        </template> 
        <template if:true={error}> 
            {error} 
        </template> 
    </lightning-card> 
</template>

Check out another amazing blog by Narendra Sa here: CSV Files in Salesforce | Data Import | How-to Guide

Wrapperclassdemo.js 

You should import the apex class in order to use its method. We can make an apex method call in two ways:- Using a Wire decorator and wiring it with property or a function or directly making an imperative call. 

In the below code, we have used a wire decorator to call the apex method and get the wrapper class data from apex into Lightning Web Component. The method has been called and wired with property with the name wiredAccountdata. 

import { LightningElement, track, wire } from ‘lwc’; 

import getAccContacts from ‘@salesforce/apex/WrapperDemo.fetchAccountContactDetails‘; 

 const columns = [ 
    { 
        label : 'Account Name', 
        fieldName : 'AccountLink', 
        type : 'url', 
        typeAttributes :{ 
            label : { 
                fieldName : 'AccountName' 
            }, 
            target : '_blank' 
        } 
    }, 
    { 
        label : 'Type', 
        fieldName : 'type', 
    }, 
    { 
        label : 'Total Contacts', 
        fieldName : 'totalContacts', 
    }, 
    { 
        label : 'Address', 
        fieldName : 'billingAdress', 
    } 
]  
export default class Wrapperclassdemo extends LightningElement { 
    @track columns = columns; 
    @track data; 
    @track error; 
    @wire(getAccContacts) 
    wiredAccountdata({error,data}){ 
        if(data){ 
            this.data = data; 
        } 
        else{ 
            this.error = error; 
        } 
    } 
}

OUTPUT