Skip to main content

Lightning Component Basic and Advanced

Lightning Component also refer as Aura Component Or Aura Framework is base on View-Controller Architecture. Refer the Below Image which has been taken from Trailhead Module.
Aura architecture

Server-Side Controller (Apex):

Server calls are expensive, and can take a bit of time. Milliseconds when things are good, and long seconds when the network is congested. You don’t want apps to be locked up while waiting for server responses.
The solution to staying responsive while waiting is that server responses are handled asynchronously. What this means is, when you click the Create Expense button, your client-side controller fires off a server request and then keeps processing. It not only doesn’t wait for the server, it forgets it ever made the request!
Then, when the response comes back from the server, code that was packaged up with the request, called a callback function, runs and handles the response, including updating client-side data and the user interface.
If you’re an experienced JavaScript programmer, asynchronous execution and callback functions are probably your bread and butter. If you haven’t worked with them before, this is going to be new, and maybe pretty different. It’s also really cool.

There are only two specific things that make this method available to your Lightning Components code.

  • The @AuraEnabled annotation before the method declaration.
  • The static keyword. All @AuraEnabled controller methods must be static methods, and either public or global scope.
Note: “Aura” is the name of the framework at the core of Lightning Components. You’ve seen it used in the namespace for some of the core tags, such as <aura:component>. Now you know where it comes from.

Load Data From Server:
The next step is to wire up the expenses component to the server-side Apex controller.
<aura:component controller="ExpensesController">

However, pointing to the Apex controller doesn’t actually load any data, or call the remote method. Like the auto-wiring between the component and (client-side) controller, this pointing simply lets these two pieces “know about” each other. This “knowing” even takes the same form, another value provider. But the auto-wiring only goes so far. It remains our job to complete the circuit.

In this case, completing the circuit means the following.
  1. When the expenses component is loaded,
  2. Query Salesforce for existing expense records, and
  3. Add those records to the expenses component attribute.

Handler Tag in Component :
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>

Calling Server-Side Controller Methods

    // Load expenses from Salesforce
    doInitfunction(componenteventhelper) {
        // Create the action
        var action = component.get("c.getExpenses");
        // Add callback behavior for when response is received
        action.setCallback(thisfunction(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
            else {
                console.log("Failed with state: " + state);
        // Send action off to be executed

The outline of what this code does:
  1. Create a remote method call.
  2. Set up what should happen when the remote method call returns.
  3. Queue up the remote method call.
var action = component.get("c.getSomething");
This line of code creates our remote method call, or remote action which has been Static and AuraEnabled in Apex.

Looks Similar?
Yes! It was “v.something” that we were getting, with v being the value provider for the view. Here it’s “c”, and yes, c is another value provider. And we’ve seen a c value provider before, in expressions like press="{!c.clickCreate}" and action="{!c.doInit}".


We saw $A briefly before, but didn’t discuss it. It’s a framework global variable that provides a number of important functions and services. $A.enqueueAction(action) adds the server call that we’ve just configured to the Aura component framework request queue. It, along with other pending server requests, will be sent to the server in the next request cycle.
That sounds kind of vague. The full details are interesting, and important for advanced use of Aura components. But for now, here’s what you need to know about $A.enqueueAction(action).
  1. It queues up the server request.
  2. As far as your controller action is concerned, that’s the end of it.
  3. You’re not guaranteed when, or if, you’ll hear back.
In this specific callback function, Salesforce do the following.
  • Get the state of the response.
  • If the state is SUCCESS, that is, our request completed as planned, then:
  • Set the component’s expenses attribute to the value of the response data.
Do the Following Trialhead for hands On : Lightning Component Basic and Advanced


Popular posts from this blog

Platform Developer I Certification Maintenance (Winter '23)

 Maintain Your Platform Developer I Certification for Winter ’23 1. Field update actions have changed in API Version 54.0. Which record-triggered flows do field update actions now execute? Answer: Before-Save after After-Save 2. Which Apex class is used to determine the hostnames for the domains that Salesforce hosts for your org? Answer: System.DomainCreator 3. Which modules can be used for notifications in a Lightning web component instead of native APIs? Answer: LightningAlert, LightningConfirm, and LightningPrompt 4. What determines an org’s “shape” in Salesforce? Answer: Features, settings, edition, limits, and licenses 5. Which lightning-modal-* component is required to create a modal? Answer: Body 6. How do you call an invocable action from Apex code? Answer: Reference Invocable.Action Get Hands-On With Apex Assertions 1. Create Two Apex class: Copy and Paste below codes (A.) TestFactory @isTest public class TestFactory {    public static Account getAccount(String accountName, B

Administrator Certification Maintenance (Spring '23)

 Maintain Your Administrator Certification for Spring '23 1. What information is listed in the Details panel for recently used reports? Answer: A, B, C 2. What is used to give sales reps access to a guided process to import contacts and leads? Answer:  Sample CSV file 3. Which feature efficiently removes inactive picklist values? Answer: Bulk Delete Unused Values 4. Which type of Process Builder processes can be converted using the Migrate to Flow tool? Answer: Record-triggered Get Hands-on with Enhance Record Pages With Dynamic Forms Follow steps show in Screenshot also highlighted with Red Box:

Platform App Builder Certification Maintenance (Winter ’23)

Maintain Your Platform App Builder Certification for Winter ’23 1. What component customizes related lists directly from the Lightning App Builder? Answer:      Dynamic Related List – Single 2. Where can a debug flow test be created and saved? Answer:      Flow Builder 3. What action enables smart email auto-responses in Flow Builder? Answer:      Create Article Recommendations 4. Custom address fields improve address data accuracy for your users using what type of list? Answer: State and Country/Territory Picklists 5. What are the benefits of using Dynamic Forms on record pages? Answer:      Place fields anywhere on the page  Use Visibility Rule to show and hide fields  6. Restriction or scoping rules now allow multiple values. When should double quotes surround a value? Answer:      If a single value contains a comma  Get Hands-On With Permission Set Expiration Verify before performing this: Permission Set & Permission Set Group Assignments with Expiration Dates should be enabled