Aura Component Bundle Simplified

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.

Aura component bundle is a composition of all the related resources which together makes an Aura Component.

Let’s view the aura component bundle which we have created in the previous part.

We can see that our MyAwesomeComponent is a bundle of multiple resources as seen on the right.

These resources work together to form your aura component.

Let’s learn them one by one.

Please get the MyAwesomeComponent component open in the developer console as we will be modifying few resources which will be later used in the next part 🙂

Component

It contains a mark-up for the component where you can add valid HTML tags or another aura component.

<aura:component>
    <aura:attribute name="welcome" type="String" default="Hey, Welcome to SalesforceBlue :)" />

    <lightning:card title="AwesomeAuraComponent">
        <aura:set attribute="actions">
            <lightning:button label="Click Me!" onclick = "{!c.greetings}"/>
        </aura:set>

        <p class="slds-p-horizontal_small" aura:id = "p1">
            <p>{!v.welcome}</p>
        </p>
    </lightning:card>
</aura:component>	

In the above code block, we have implemented an interface, created an attribute, used a standard lightning aura component, and provided an onclick event handler.

We will be covering all of them in detail as you progress with the lightning aura component series in the next parts.

Controller

It Contains client-side controller methods to handle events in the component.

({
    greetings : function(component, event, helper) {
       helper.doGreetings(component, event);
    }
})

In the above code block, we are declaring a client-side controller method.

This method is calling the helper javascript method.

Helper

It contains JavaScript functions that can be called from any JavaScript code in a component’s bundle.

Helper as the name says contains helper methods where the business logic is performed and are called from the aura controller javascript code.

You can call any other helper method from one helper method within the same component.

({
    doGreetings : function (component, event) {
        component.set("v.welcome", "Hey, Have an awesome day!");
    }
})

In the above code block, we are setting an attribute with a given value.

Style

It contains css to style your component.

If you click on the style resource it will look like below.

Please leave it as default and we will be covering them in a separate section – Aura Component Styling

Documentation

It allows developers to write documentation for their components. It will look like below :

Salesforce developer docs provide a great description of how one can write documentation for their component. Feel free to visit it.

Renderer

It contains a client-side renderer to override default rendering for a component. It will look like the below :

Please leave it as default and we will be covering them in a separate section – Modifying DOM

Design

It allows you to create configurable attributes for your aura component which are exposed to builder tools like the Lightning App Builder, Experience Builder, or Flow Builder.

<design:component>
    <design:attribute name="welcome" label="Welcome Message" description="Welcome Message For Logged In User" />
</design:component>

In the above code block, we have created a design attribute that will be exposed to the builder tools. We will be configuring and playing around with this attribute in the next part – Lighting App Builder.

SVG

We can use an SVG resource to define a custom icon for our component when it appears in the Lightning App Builder’s component pane. It will look like the below :

Please leave the above code as default.

What we have covered above is just the tip of the iceberg for the aura components.

We have requested you to just copy-paste the above code in the developer console and leave a few as default.

As we progress in the Aura Component series we will be learning them in more depth and detail.

Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂