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