Aura Component Bundle

A lightning component bundle consists of the following parts :

Component
Controller
Helper
Style
Documentation
Renderer
Design
SVG

Component

The ‘Component’ stores all the html markup in the aura component and is responsible for the User Interface of the aura component. For example, here is an aura component which creates a form :

As we can see, all the content in the ‘Component’ is markup which is used to create the form UI for our component.

Controller

Click the ‘Create’ link on the right hand side breakdown to create the javascript controller for your aura component.

The javascript controller houses javascript functions for our aura component, these javascript functions can be called from our aura component markup. For example :

Controller Block

({
	myAction : function(component, event, helper) {		
          alert('My First Function');
	}
})

This is a javascript function inside the controller which alerts the ‘My First Function’ value.

Helper

The helper part of an aura component also stores javascript, but it is used to store reusable javascript functions which can be used multiple times in our javascript controller.

Click create on the helper to create the helper for your aura component.

Once created, we can define javascript functions inside the helper as well.

CODE:

({
	helperMethod : function() {		
       		 alert('Helper!');
	}
})

Then, this helper method can be called from our javascript controller multiple times, implementing reusability.

CODE :

({
	method1 : function(component, event, helper) {		
        		helper.helperMethod();
		},    
   	method2 : function(component, event, helper) {		
        		helper.helperMethod();
	}
})

NOTE : A method inside a helper class can call other methods in the helper, but a JavaScript method inside the controller cannot call other methods in the controller.

Style

The ‘style’ is used to apply custom css to the aura component. This is a .css file which can be used to apply custom css, since the aura component doesn’t support using a <style>tag.

Click on ‘Style’ to create the aura component’s style.css.

This supports all standard css validators (by class, by id), we just need to use the ‘.THIS’ keyword to apply CSS to the lightning markup. For example :

CSS Code

.THIS {background-color : red;}
.THIS h3{color : white; background-color:green;}
/* This is for top level CSS */
h4. THIS{color:gold;}
#p. THIS{color:green;}
/* This is for nested level CSS */
.THIS h4{color : gray;}

Documentation

The ‘Documentation’ part is used to document information about your aura component. Click create on the ‘Documentation’ to create the .aura doc file for your aura component.

The default code will look like this :

Once created, you go to this to view the documentation for your aura component. The screen will look like this :

Go to the left search bar and search for your aura component name, in our case ‘HelloWorld’.

Once, you find your aura component in the results, click on its name and that will open the documentation for that aura component!.

Renderer

The renderer is used to define custom renderer methods to override the standard render lifecycle. This is the standard render lifecycle in aura components :

render() : This is called to render the component body on the browser.
rerender() : This is called if any data is modified on an aura component.
afterRender() : This is called after the render() method has finished.
unrender() : This is called when a component is destroyed from the browser view.

We can override each of these, but we must create the ‘renderer’ for our aura component first.

Overriding Render()

To override the default render() method we need to extend default render by calling superRender() method then adding custom code to it. Example :

render : function(component, helper) { 	 
var superMethod  = this.superRender();
// Write your custom code here.
  	 return superMethod; 
}

Overriding Rerender()

It’s the same as overriding Render(), it just does not return a value. Example :

rerender : function(component, helper) { 	 
this.superRerender();
  	 // Write your custom code here. 
}

Overriding AfterRender()

It allows you to change the values in your aura component after the render() method, it also does not return a value. Example :

afterRender : function(component, helper) { 	 
this.superAfterRerender();
  	 // Write your custom code here. 
}

overriding render

Overriding UnRender()

It allows you to modify data in your component after it is destroyed. It also does not return a value. Example :

unRender : function(component, helper) { 	 
this.superUnrerender();
  	 // Write your custom code here. 
}

Overriding UnRender

Design

Combined Example

({
    render : function(component, helper) {        
        var superMethod  = this.superRender();
        // Write your custom code here.
        return superMethod; 
    },
    rerender : function(component, helper) {        
        this.superRerender();
        // Write your custom code here. 
    },
    
    afterRender : function(component, helper) {        
        this.superAfterRerender();
        // Write your custom code here. 
    },
    unRender : function(component, helper) {        
        this.superUnrerender();
        // Write your custom code here. 
    }
})

The design part of aura components allows us to define configurable options in our aura component. This allows us to make our aura components dynamic which can be used to pass values in our aura component directly through the lightning app builder/experience builder.

To create a design part for our aura component, click the ‘create’ link on the design part on the right hand side in the bundle.

We can then create individual design attributes, these must match with aura:attributes in our aura component.

Syntax :

<design:attribute name="attributeName" label="Label" />

Each design attribute has two required values :
Name — The name of the corresponding attribute in the .cmp file.
Label — The label for the setting that will be visible to the user in the page builder.

For example :

<design:component>
    <design:attribute name="text" label="Text Value" />
</design:component>

And the aura component is,

<aura:component >
    <aura:attribute name="text" type="String"/>
    
    {!v.text}
    
</aura:component>

Now, if we use this aura component via the lightning app builder, we should be able to pass the ‘Text Value’ value to it.

We can pass the value and that value will show up in the component.

Output :

SVG

The SVG is used to define a custom icon which is displayed in the lightning app builder. The default icon is this :

We can override this icon to any custom icon with the SVG part of the bundle.

Once created we can override the icon with the custom svg structure.

Example :