Hi Good Morning Everyone, Today’s Topic is Aura Component in which I will be Explaining why it is

used, Its Use Cases, Its Advantages, Aura Component Bundle, and we will be looking into its
implementation with the Example of simple Use Case. So let me share my screen.

Slide 1- Introduction

I would like to share my learnings about aura components

I Get to work with Karan/Vidish/Raghav in Universal Lightning Migration project

There in we used Aura Components to customize our solution that fit their Requirements

So now I will start with introduction of Aura Components.

Slide 2- Aura Components

- Aura Component is a powerful open source framework for building dynamic and interactive user
interfaces.

- Aura Components enable developers to create reusable units of functionality that improve the
performance, and maintainability of their applications."

- They encapsulate HTML, JavaScript, and CSS into self-contained units that interact with Salesforce
data and can be reused across applications."

- Basically We design our Application in such a way that each component performs a small unit of
work independently so multiple components Weave together to create an application.

- They have responsive Design, Since they are Built in with mobile first approach and are compatiable
with wide range of browsers.

Slide 3 –

Aura Components in Salesforce help us make dynamic and interactive web applications that work
well both on computers and mobile devices. Even though Salesforce has introduced a newer way of
building applications with Lightning Web Components, Aura Components are still important for some
projects.

- One of its Major use case is that it allows users to create Custom User Interfaces which are
reusable components and can be reused across different Parts of Application

Now I will move to developer Console to show how the component is created and what it provides.
Move to dev console and show the component.

For creating a new lightning component just go to new and click on lightning component here you
can name your component according to your functionality.

- Once you create a lightning component it will create a new bundle,

Bundle basically is a set of resources which we can use to write our code in order to modify the
behaviour of our component.

Slide 4 - Component Bundle

- So whats inside the lightning component bundle (Back to slides) -

- So the first we have "Component File .cmp" inside which we write User Interface/What are the
things our component will display.

- Then we have two types of JS File One is controller and other is Helper.

- Controller is the first point of interaction in your lightning Component andd the user. We specify the
methods here that will be called when your user interacts with LC.

- Then next is Helper File

- Basically a JS Helper contains small peices of reusable code that we can use inside our Controller.

- Then the Lightning Framework allows you to use our own Stylesheets so we can just put our
customized style inside this css files.

- Today we will be majorly focusing on these only.

Now let's move to Dev Console to Understand further -

- First of all let's Understand the Use Case which I will be covering.

- So I have created an Aura Component that is Used to search the Exisitng Cases in Our Org. Here it
contains a search box.

- In Our cmp File

- Aura:Component - This line declares the Aura component itself.

Then we have a controller attribute

- Controller - It specifies that the component uses a server-side Apex controller named
customSearchCaseController. This is used to fetch the records from our org.

- It also implements interfaces that allow it to be used on a record home page

(flexipage:availableForRecordHome), makes it aware of record IDs (force:hasRecordId), and enables it
to be hosted in the Salesforce app (force:appHostable).
- Aura Attributes are kind of containers or varibales that holds values, here.... Explain the Attributes.

- Aura Handler - Sets up an event handler for the component's initialization event (init). When the
component is initialized, the doInit function from the component's controller (c) will be called.

- Includes a Lightning input field of type text, allowing users to enter a case number. It has a label, an
aura:id (which helps to identify the element programmatically), and an onchange event handler that
calls the searchKeyChange function in the component's controller when the value changes.

- Aura If - Starts a conditional rendering block that will only render its contents if isRecord is true.

- Includes a lightning:datatable component which is a data table used to display rows of the cases
data. It specifies Id as the unique key field for the rows, binds the cases attribute to the data of the
table, and the tableColumns attribute to the columns configuration. The hideCheckboxColumn
attribute set to true indicates that the checkbox column used for row selection should be hidden.

In my Method

- SearchKey – It is a variable which stores the value of the key attribute.

- Action - Defines a callback function to handle the response from the server-side method call.

- SetParams - Sets the parameter for the findByName method call, passing the search key obtained
from the input field.

Action.setCallback – defining the callback method for our action.

Once the Cases are returned from the Apex Method we move further.
If the setCallback method returns SUCCESS then we move further, in case any error comes in Apex
Method we can handle it using toast method which is considered as best practice.

-Value – We are setting whatever we are getting from our apex method.

- Iterates over each returned record to enhance the data, by creating a URL path using the record's
ID.

- Enqueues the action for sending to the server, which will execute the Apex method and
handle the
- response using the defined callback function.

What are the highlights from the code –

- Whatever we are viewing is from basic component file. And

- While we are entering the values it is handled by js controller file
- Whatever the data is coming in datatable is coming through apex class.

So that’s it for the session, if you have any questions you can ask. Thankyou.