Salesforce | Basics of Aura | All You Need to Know

Hello Peeps!

I’ve come a long way in my Salesforce journey. Recently I started studying Aura Components, which indeed is a very interesting thing to learn. I’m amazed by how quickly I was able to design something beautiful at a point where I just started learning. This blog will show you how you can build a random quote generator by aura components using various concepts like Component and Application, Attributes, and Expressions, Calling JS Controller in Aura Component.

Please Note, this blog will only cover the very basic flow of Aura Development. So, let's get started!

What are Aura Components?

Aura components are a fundamental part of the Salesforce Lightning Platform, allowing developers to create custom user interfaces that seamlessly integrate with the Salesforce ecosystem. Aura components are the self-contained and reusable units of an app. They represent a reusable section of the UI, and can range in granularity from a single line of text to an entire app.

Building a Random Quote Generator!! Project Based Learning is one of my favorite things to do. This project aims to introduce you to the core concepts of Aura development:

Defining attributes and expressions.
Handling events.
Styling components with CSS.
Using a JavaScript controller for functionality.

I'll show you the complete flow that you need to have in your code inorder to get things running.

5 Steps to get started:

Setting Up the Aura Component
Defining Attributes and Expressions
Conquer the Controller
Styling Your Componen
Bring It All Together

Don't forget to check out: How to Display Images from File Tab to Salesforce App by using Aura Component?

Setting Up the Aura Component

Creating an Aura Component - The first step is to create your Aura component. In Salesforce, components are created using `.cmp` files. In our case, the component is named "RandomQuoteGenerator.cmp."

<aura:component >
</aura:component>

Defining Attributes and Expressions

Attributes are at the heart of Aura components. They allow you to manage the state and data within your component. In this project, we define an attribute "Quote" to hold the displayed quote. Next, we create a onclick event on button. Later, we will use this in Controller to handle the event. We use c. is used for controller and .v is used for view.

<aura:component >
    <aura:attribute name="Quote" type="String"  />
    TODAY'S QUOTE : 
    <lightning:button label="Get Quote" onclick="{!c.handleClick1}" />     
</aura:component>

Controller Logic

Aura components often require dynamic behavior. This is where the JavaScript controller comes into play. In our project, we'll implement a controller to handle user interactions, such as fetching random quotes. You can add your favorite quotes in data variable. We define our event handler here. Write logic for your code here. Below snippet allows you to select and display a random quote on UI.

({
    handleClick1 : function(component, event, helper) {
         var data = [
            "The only way to do great work is to love what you do. - Steve Jobs",
            "Life is what happens when you're busy making other plans. - John Lennon",
            "In the end, we will remember not the words of our enemies, but the silence of our friends. - Martin Luther King Jr."
        ];
        var QuoteIndex = Math.floor(Math.random() * data.length);
        var SelectedQuote = data[QuoteIndex];    
        component.set("v.Quote",SelectedQuote);
    },
})

Styling Your Component

CSS is used to style your Aura component. Styling is crucial for a polished user experience.

.THIS .box {
    /* Your CSS styles here */
}

You can style it beautifully according to you. Look at how I styled it below :

Bringing It All Together

To create a complete application, you'll need an Aura application to include your "RandomQuoteGenerator" component name it as "RandomQuoteGeneratorApp"

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

This is the glue that connects your component to the Salesforce ecosystem. Add all your components here otherwise it won't get rendered on UI.

You can look how your component is looking from - Click on Preview

Other Important Learnings : Aura provides many options in one place.

Aura gives many Interfaces where we can add our component just by a single click.

Check out another amazing blog by Nayan here: Custom Metadata Types: Your Recipe for API Key Security

Conclusion

In this beginner's guide, you've explored the basics of Aura components by building a "Random Quote Generator" application. You've learned how to define attributes, handle events, style components, and create a JavaScript controller for functionality.

As we continue this journey in Salesforce development, we'll find Aura components to be a powerful tool for creating custom and interactive applications that seamlessly integrate with the Salesforce platform. This is just the beginning, and there's a vast world of possibilities to explore in the world of Salesforce Aura components. I'll be sharing my learning in the next coming parts. Stay Tuned. Happy coding!