Lightning Aura 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.
With JavaScript being used at the client-side as well as the involvement of Apex on the server-side, Lightning framework is known as a new app-centric model that provides business and data logics to develop dynamic web applications meant for desktop and mobile devices. This framework does not entirely replace a page at a time, rather, it leverages JavaScript to create, transform, and animate the user interface. Lightning Components and Applications use “Bundles” to store necessary files.
- Component– A markup language is used for configuring the layout of the component.
- Controller– A JavaScript Controller is used for handling client-side processing or an apex controller is preferred for server-side processing.
- Design File– A design file is used for describing the design-time behavior of the component being used in Lightning pages or in Lightning App Builder.
- Documentation File– A documentation file is used to provide reference documents or sample code to users who have received your component.
- Helper– A helper aims at storing reusable JavaScript functions that are handled by the controller.
- SVG File– An SVG File enables you to include custom icons that can be used for reference further.
Prerequisite for LC
Custom Domain
Developer Org
Basics of Javascript
Let’s break down the Lighting in module wise.
Module 1- Create a simple aura component
Open the developer console->new->lighting component
Name of the component and check all the checkboxes.
<aura:component implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction” access=”global” ><h1>Hello world</h1>
</aura:component>
Module 2- View Aura component
To view this we need to create the aura application.New->lighting application
<aura:application extends=”force:slds” >
<c:Hello/>
</aura:application>Module 3- Aura Interfaces
Interfaces determine a component’s shape by defining its attributes. Implement an interface to allow a component to be used in different contexts, such as on a record page or in Lightning App Builder.
ex: flexipage:availableForRecordHome,force:hasRecordId
Module 4- Attributes
This is nothing but a kind of variable in the lighting component which we use to flow the data. It has two mandatory parameters Name and type. Access denotes the access of variables.
Note: v is a value provider and c is an action provider.
Module 5- Flow of data using Attributes
We use the attribute to flow the data
<aura:component implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction” access=”global” >
<h1>Hello Component</h1>
<aura:handler name=”init” action=”{!c.myAction}” value=”{!this}”/><aura:attribute type=”string” name=”name”/>Hello {!v.name}
</aura:component>This is the controller
({
myAction : function(component, event, helper) {component.set(‘v.name’,’World’);}
})Note Every aura: handler has attributes it needs to work: name and value (for component events), or event (for application events), and action. Name is a predefined name for system events like init or change. This tells aura: handler which event to attach to. The event specifies an event to attach, which might actually be a custom event. The value specifies what the event is attached to for an init, it will be the current component (“{!this}”);
Module 6- Aura Fetch data
This is the component
<aura:component implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction” controller=”ContactListController” access=”global” >
<h1>Hello Component</h1>
<aura:handler name=”init” action=”{!c.myAction}” value=”{!this}”/>
<aura:attribute name=”contactList” type=”List” />
<aura:attribute type=”string” name=”name”/>
Hello {!v.name}
<div aura:id=”recordViewForm”>
<aura:iteration items=”{!v.contactList}” var=”contact”>
<! — recordViewForm to view the record →
<lightning:recordViewForm recordId=”{!contact.Id}” objectApiName=”Contact”>
<div class=”slds-box slds-theme_default”>
<! — outputfield used to output the record field data inside recordViewForm →
<lightning:outputField fieldName=”FirstName” />
<lightning:outputField fieldName=”LastName” />
<lightning:outputField fieldName=”Email” />
<lightning:outputField fieldName=”Phone” />
</div>
</lightning:recordViewForm>
<! — Line break between two records →
<br />
</aura:iteration>
</div>
</aura:component>
This is Controller
({
myAction : function(component, event, helper) {
component.set(‘v.name’,’World’);
// Helper function — fetchContacts called for interaction with server
helper.fetchContacts(component, event, helper);
}
})This is Helper
({
// Function to fetch data from server called in initial loading of page
fetchContacts: function(component, event, helper) {
// Assign server method to action variable
var action = component.get(“c.getContactList”);
// Getting the account id from page
//var accountId = component.get(“v.recordId”);
// Setting parameters for server method
action.setParams({
// accountIds: accountId
});
// Callback function to get the response
action.setCallback(this, function(response) {
// Getting the response state
var state = response.getState();
// Check if response state is success
if(state === ‘SUCCESS’) {
// Getting the list of contacts from response and storing in js variable
var contactList = response.getReturnValue();
// Set the list attribute in component with the value returned by function
component.set(“v.contactList”,contactList);
}
else {
// Show an alert if the state is incomplete or error
alert(‘Error in getting data’);
}
});
// Adding the action variable to the global action queue
$A.enqueueAction(action);
}
})
This is Apex class
public class ContactListController {
@AuraEnabled
public static List<Contact> getContactList() {
// Getting the list of contacts from where Id is in accountIds
List<Contact> contactList = [SELECT Id, FirstName, LastName, Email, Phone, AccountId FROM Contact limit 10];
// Returning the contact list
return contactList;
}
}
Module 7- Traversing
We can pass the data in two way
- Using the attribute set in the child component
- Using methods
Create a parent component
<aura:component implements=”flexipage:availableForAllPageTypes”>
<c:Child aura:id=”compB” passingparam=”heelo child”/>
<lightning:button label=”Call child method” onclick=”{! c.onAction}” />
</aura:component>
Parent component controller
({
onAction : function(component, event, helper) {
var objCompB = component.find(‘compB’);
objCompB.sampleMethod(“Hello”, “world”,”India”);
}
})
Child Component
<aura:component>
Child Component
<aura:attribute type=”string” name=”passingparam”/>
<aura:method name=”sampleMethod” action=”{!c.doAction}”>
<aura:attribute name=”param1" type=”String” default=”parameter 1"/>
<aura:attribute name=”param33" type=”String” default=”parameter 1"/>
<aura:attribute name=”param2" type=”String” />
</aura:method>
</aura:component>
Child Component Controller
({
doAction : function(cmp, event) {
var params = event.getParam(‘arguments’);
if (params) {
var param1 = params.param1;
var par2 = params.param2;
var par3 = params.param33;
alert(param1);
alert(par2);
alert(par3);
var insight = cmp.get(“v.passingparam”);
alert(“got the insight: “+insight);
}
}
})
Events
A component event is fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event.
Step 1: Create an event.The ceEvent.evt component event has one attribute. We’ll use this attribute to pass some data in the event when it’s fired.
<! — c:ceEvent →
<aura:event type=”COMPONENT”>
<aura:attribute name=”message” type=”String”/>
</aura:event>
Step 2: Create a Notifier Component
The c:ceNotifier component uses aura:registerEvent to declare that it may fire the component event.
The button in the component contains an onclick browser event that is wired to the fireComponentEvent action in the client-side controller. The action is invoked when you click the button.
<! — c:ceNotifier →
<aura:component>
<aura:registerEvent name=”cmpEvent” type=”c:ceEvent”/>
<h1>Simple Component Event Sample</h1>
<p><lightning:button label=”Click here to fire a component event” onclick=”{!c.fireComponentEvent}” /></p>
</aura:component>
The client-side controller gets an instance of the event by calling cmp.getEvent(“cmpEvent”), where cmpEvent matches the value of the name attribute in the <aura:registerEvent> tag in the component markup. The controller sets the message attribute of the event and fires the event.
Step 3: create the notofier controller
/* ceNotifierController.js */
{
fireComponentEvent : function(cmp, event) {
// Get the component event by using the
// name value from aura:registerEvent
var cmpEvent = cmp.getEvent(“cmpEvent”);
cmpEvent.setParams({
“message” : “A component event fired me. “ + “It all happened so fast. Now, I’m here!” });
cmpEvent.fire();
}
}
Create Handler component
<aura:component>
<aura:attribute name=”messageFromEvent” type=”String”/>
<aura:attribute name=”numEvents” type=”Integer” default=”0"/>
<! — Note that name=”cmpEvent” in aura:registerEvent
in ceNotifier.cmp →
<aura:handler name=”cmpEvent” event=”c:ceEvent” action=”{!c.handleComponentEvent}”/>
<! — handler contains the notifier component →
<c:ceNotifier />
<p>{!v.messageFromEvent}</p>
<p>Number of events: {!v.numEvents}</p>
</aura:component>
Handler component Controller
({
handleComponentEvent : function(cmp, event) {
var message = event.getParam(“message”);
// set the handler attributes based on event data
cmp.set(“v.messageFromEvent”, message);
var numEventsHandled = parseInt(cmp.get(“v.numEvents”)) + 1;
cmp.set(“v.numEvents”, numEventsHandled);
}
})
