How to access apex class property in lightning component

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-:

apex class properties
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

  • 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.

  • 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.

     

Leave a Reply