Application Component Bundle (Parts of Lightning Application)

The basic use of lightning applications is to preview the lightning components for development purposes. But the lightning application does have its own bundle just as the lightning components.

The application component bundle consists of the following:

Application
Controller
Helper
Style
Documentation
Renderer
SVG

Application

The application consists of the markup for the application (just like the component for the lightning component bundle). We need to put our component in this application part to view it by the application preview.

For example :

<aura:application >
    
    <c:HelloWorld/>
    
</aura:application>

Here ‘<c:HelloWorld/>’ is the custom lightning component that we wish to preview with the app. The syntax is, <(namespace):(component name)/>, so ‘c’ represents the default namespace of the org. If we want to use a managed package component then we need to use the managed package namespace instead of ‘c’.

The ‘preview’ button on the right hand side allows you to preview the component (if you see an error for enabling a custom domain, go to the enabling custom domain part of our guide to fix it).

Screenshot for the preview button :

Output became:

Hello World

Controller

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

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

We can use this in the same way we use the controller for the lightning components.

Helper

The helper part of an application 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 application.

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 application. This is a .css file which can be used to apply custom css, since the application doesn’t support using a <style> tag.

Click on ‘Style’ to create the application’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 :

Documentation

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

Once created, you go to https:///<your-salesforce-instance>/auradocs to view the documentation for your lightning component. The screen will look like this :

The default code will look like this :

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

Renderer

The renderer is used to define custom renderer methods to override the standard render lifecycle for your lightning application (for more information about the standard rendering lifecycle, refer to the renderer section under the ‘lightning component bundle’.

For example, if we wanna override the standard ‘rerender’ function we just need to extend the standard ‘rerender’ by calling the ‘superRerender’ method to call the standard rerender.

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

SVG

The SVG is used to define a custom icon which is displayed for the lightning application. 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 :

Salesforce Menu

Salesforce Lightning

Salesforce LWC

Application Component Bundle (Parts of Lightning Application)

The application component bundle consists of the following: