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 :
Apex class Controller [Include Wrapper/Inner class].
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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;} } } |
- To access apex[wrapper ] class properties in Lightning Component you have need to make them @AuraEnabled.
- see code comments
Lightning Component [testWrapper.cmp]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<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]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
({ 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); }, }) |
- see code comments
demo.app [Lightning Application]
|
1 2 3 4 5 6 7 8 |
<aura:application extends="force:slds"> <c:testWrapper/> <!-- here c: is org. default namespace prefix--> </aura:application> |
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 🙂
(Visited 44,886 times, 1 visits today)
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:
FIELD_INTEGRITY_ExCEPTION
Failed to save testWrapper.cmp: Invalid <aura:attribute> type:wrapperClass: Source
Could you please suggest on this.
Thanks in advance.
Regards,
Vardhan
is custom namespace is enabled in your org ?
@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.
I had the same error with Spring ’18.
It’s related to issue: https://success.salesforce.com/issues_view?id=a1p3A0000001CBeQAM
Solution was to remove the wrapper class from the attribute in testWrapper.cmp
<aura:attribute name=“wrapperList” type=“wrapperDisplayController.wrapperClass”/>
becomes
<aura:attribute name=“wrapperList” type=“wrapperDisplayController”/>
Thanks to Srikanth Ragi at Saleforce support.
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?
Good Post
Hola como puedo seleleccionar los registros y mandarlo como parametro a otro componente lihgtning?
Thank you a lot! Very useful article.
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 :
@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();
}
}