Salesforce lighting component

The Lightning Component framework is a UI framework for developing web apps for mobile and desktop devices. It’s a modern framework for building single-page applications with dynamic, responsive user interfaces for Lightning Platform apps. It uses JavaScript on the client-side and Apex on the server-side. You can build Lightning components using two programming models: the Lightning Web Components model and the original Aura Components model. Lightning web components and Aura components can coexist and interoperate on a page.

Let’s dig into a small example

<aura:component controller=”BatchAPexController” access=”global” >
<div class=”slds-page-header”>
<span class=”slds-icon_container slds-icon-standard-opportunity” title=”opportunity”>
<span class=”slds-assistive-text”>Gift Entry</span>
</span>
</div>
<ui:inputText aura:id=”inputName” label=”First Name” class=”slds-input” labelClass=”slds-form-element__label” onError=”{!c.handleError}” onClearErrors=”{!c.handleClearError}”/>

<lightning:inputField fieldName=”FirstName”/>

First of all, it’s XML markup and mixes both static HTML tags with custom Aura component tags, such as the <aura:component> tag. In the above example, we have two input box with lighting component and UI namespace.
one last thing to notice is the use of static HTML with a number of CSS class names that start with “slds”

The better way to understand the flow let’s start with creating a component

Once you create a component you get all the bundle details on the right side of your component. Here you will get all the option controller, helper, style, etc.

Component: Basically it holds all the HTML part and the lighting component tag that we use to create a UI.

you can see the controller=ContactAura which is our server-side controller.

Its calling method doinit() in handler file. “c” stands for “Controller” and “v” stands for “View” in Aura syntax.

Controller: Client-side controller methods to handle events in the component.
({
doAction : function(component, event,helper) {
//manage your client side script here
//You can call your Helper from here ( helper.dataGet(component,helper) )

}
})

Helper: It will also create a new JavaScript file which will be used by Component. This file mostly interacts with the Apex method defined in @AuraEnabled static public method.

Component.get(‘c.get10contact’): This will the server-side method.

To send a parameter to the server-side controller you can pass it thorough using setParams.
acton.setParams ({
“Key”:”value”
“Key1”:”value1”
})

$A.enqueueAction(action) sends the request the server. More precisely, it adds the call to the queue of asynchronous server calls. That queue is an optimization feature of Lightning.

ApexController: This is the server-side controller which interact with the server-side controller to pull data from the database.

The AuraEnabled annotation enables Lightning components to access Apex methods and properties.

Important Note

The AuraEnabled annotation is overloaded and is used for two separate and distinct purposes.

Use @AuraEnabled on Apex class static methods to make them accessible as remote controller actions in your Lightning components.

Use @AuraEnabled on Apex instance methods and properties to make them serializable when an instance of the class is returned as data from a server-side action.

Caching Method Results

To improve runtime performance, set @AuraEnabled(cacheable=true) to cache the method results on the client. To set cacheable=true, a method must only get data. It can’t mutate data.

Marking a method as storable (cacheable) improves your component’s performance by quickly showing cached data from client-side storage without waiting for a server trip. If the cached data is stale, the framework retrieves the latest data from the server. Caching is especially beneficial for users on high latency, slow, or unreliable connections such as 3G networks.

Using Continuations

Use the Continuation class in Apex to make a long-running request to an external Web service.

Continuations use the @AuraEnabled annotation. Here are the rules for usage.

@AuraEnabled(continuation=true)An Apex controller method that returns a continuation must be annotated with @AuraEnabled(continuation=true).@AuraEnabled(continuation=true cacheable=true)To cache the result of a continuation action, set cacheable=true on the annotation for the Apex callback method.

Some other important fact that you may encounter while working with Lightning Component

Navigation between component

navigate : function(component, event, helper) {
var navigateEvent = $A.get(“e.force:navigateToComponent”);
navigateEvent.setParams({
componentDef: “c:BatchNewGift”,
componentAttributes :{“key”:value,”key”:”value"}
});
navigateEvent.fire();
}

Create Dynamic Component
createModal : function(component, event, helper) {
$A.createComponent(
“c:dynamicComponent”,{“aura:id”:”hello”},
function(myModal){
if (component.isValid()) {
var targetCmp = component.find(‘ModalDiv’);
var body = targetCmp.get(“v.body”);
body.push(myModal);
targetCmp.set(“v.body”, body);
}
}
);
},

How to access the dynamic Component
Dynamic component can not be accessed by the find method.To access the dynamic component please see the below steps.

<div aura:id=”ModalDiv”>
//Pleased your compenent here by using dynamic componenet cration mention above
</div>
In controller
var parentCmp = component.find(“ModalDiv”);
var parentBody = parentCmp.get(“v.body”);