Aura Components in Salesforce - Here's All You Need to Know!

What is Aura Component?

A UI framework for creating web applications for desktop and mobile platforms is called the Aura Lightning Component Framework. This contemporary framework can be used to create dynamic single-page applications. On the client and server sides, it employs JavaScript as the controller of the component class. Numerous user interface (UI) elements offered by the lightning namespace come pre-configured to use the Salesforce Lightning Design System (SLDS). Salesforce administrators use these parts to build single-page web applications that offer a seamless platform experience for a range of tasks.

Where we Can Use Lightning Components?

Your Salesforce org can be customised in a variety of ways using Aura Lightning components. Additionally, you can use Lightning components to build apps that are already available on the Salesforce Org. Additionally, it is possible to develop apps that run on several platforms. The necessary files are stored in "Bundles" by Lightning Components and Applications:

1. Component – The layout of the component is configured using a markup language.

2. Controller – For client-side processing, a JavaScript Controller is required, but an apex controller is used for server-side processing.

3. Design File – When a component is used in Lightning pages or Lightning App Builder, its design-time behaviour is described in a design file.

4. Documentation File – Users who have received your component can find sample code or reference materials in a documentation file.

5. Helper – A helper's purpose is to store reusable JavaScript operations that the controller manages.

6. SVG File –Custom icons that can be used as extra references can be included in an SVG file.

Don't forget to check out: Javascript for Lightning Web Component | Salesforce Lightning

We will discuss the Aura Lightning Component

1: First we will create Lightning Component.

For this Open Developer Console -> New -> Lightning Component.

Name the Lightning Component and Check all Component Configuration and we can add our components to the Salesforce.

Code:-

<aura:component implements=”force:appHostable,flexipage:availableForAll  
PageTypes,flexipage:availableForRecordHome,force:hasRecordId, 
forceCommunity:availableForAllPageTypes,force:lightningQuickAction”          access=”global” > 
<h1>Hello Lightning!</h1> 
</aura:component>

2: To preview that Aura Component, We have to use the Lightning Application in which we call that Aura Component as shown below:

<aura:application extends="force:slds"> 
<c:ComponentName/> 
</aura:application>

3. Attributes - Attributes have two important parameters i.e. Name and Type.

4. Value Providers - The value provider enables us to access the value of a component attribute in component markup and Javascript controller.

Example:- {!v.AccountData}

5. Action Providers - The action provider enables us to handle actions, events, handlers for the component.

Example:- <lightning:button label="Save" onclick="{!c.onSave}" />

Check out another amazing blog by Harsh here: Using Batch Apex in Salesforce | The How-to Guide

Events in Salesforce Lightning Component

The Lightning Framework's event-driven architecture enables the communication between various events. When a user interacts with the user interface, JavaScript controller actions that are triggered by that interaction fire lightning events. Events can handle the communication between Components.

There are two types of custom events in Lightning: