How to access apex class property in lightning component
Prerequisites : basic understanding of Lightning Component and Apex programming
classController.apxc
public class classController { // create properties in apex class @AuraEnabled public String DeveloperName {get;set;} @AuraEnabled public integer DeveloperAge {get;set;} @auraEnabled public List<account> lstOfAccount{get;set;} @AuraEnabled public static classController initClass(){ //create class instance classController obj = new classController(); //set value in class properties obj.DeveloperName = 'Piyush soni'; obj.DeveloperAge = 19 ; // query accounts list for lstOfAccount property obj.lstOfAccount = [select id,name from account LIMIT 10]; // return class instance return obj ; } }
- First we create component controller class .
- It’s have 3 {get ;set;} property variable on line number 5,6 and 7, with @AuraEnabled annotation .
- The @AuraEnabled annotation enables client- and server-side access to an apex controller method and controller property. Providing this annotation makes your methods and properties available to your Lightning components.
- In this controller we have a single method which return type is class type .
Test.cmp
<aura:component controller="classController"> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:attribute name="objClassController" type="classController"/> <!--access apex class Property with oClassController attribute--> <div style="border:1px solid black; padding:18px; background-color:lightgreen"> <li>my name is {!v.objClassController.DeveloperName} .</li> <li>i'm {!v.objClassController.DeveloperAge} years old.</li> </div> <div style="border:1px solid black; padding:18px; background-color:lightblue"> Account list-: <aura:iteration items="{!v.objClassController.lstOfAccount}" var="oAcc"> <li>{!oAcc.Name}</li> </aura:iteration></div> </aura:component>
- In our test component we have a aura:attribute which type is class Type.
- On the component initialize call initClass() method and set return value in aura:attribute.
- And finally access class property in component by {! v.objClassController.PropertyName }
TestController.js
({ doInit : function(component, event, helper) { //call apex class method var action = component.get('c.initClass'); action.setCallback(this,function(response){ //store state of response var state = response.getState(); if (state === "SUCCESS") { //set response value in objClassController attribute on component component.set('v.objClassController', response.getReturnValue()); } }); $A.enqueueAction(action); }, })
TestApp.app
<aura:application > <c:Test /> <!-- here c: is org. namespace prefix--> </aura:application>
output-:
Like our facebook page for new post updates.
9 comments
Hi I have a issue using apex class property in lightning component, I used this to replicate the custom javascript button in classic to lightning. please help me
can you elaborate your requirement here :
https://developer.salesforce.com/forums
after post your question kindly share post URL here, so i can check it
Thanks
Awesome. Thank you
This is awesome example. its really helpful
How can this be acheived in Opposite direction? passing a value from Component to an Auraenabled method in Server and using that value for other dependent methods in same class
It would have been much better if minimal code were to have been put up. Maybe one to get and one to set. Also, the standard coding conventions have not been followed. If I were to have known these, maybe, I would have started with Apex class with a string and passing that to Lightning and displaying it. Not sure why aura iterators, getters, setters, and all others are in one page without much explanation. Works for copy paste. But, not easy for learners.
good
This is great, thank you for sharing. This works for me to initialize the wrapper class and preload values. What if I want to update the class property values when an event occurs after the page is initialized? Ive tried this…
component.set(‘v.objClassController.DeveloperName’, ‘John Brown’);
But received…
Action failed: c:Component_Name$controller$updateName [Cannot read property ‘DeveloperName’ of null]
Surely I don’t have to do a callback each time I want to update the values. Thoughts?
Thanks ahead of time.