Salesforce Lightning Aura in Detail

Introduction to Lightning Aura

Lightning Aura is a component-based framework provided by Salesforce for building web applications on the Salesforce platform. It allows developers to create reusable and customizable UI components using a combination of markup (HTML-like syntax), style (CSS), and behavior (JavaScript). Aura components are designed to be modular and can be easily assembled to create complex applications. They are supported in Lightning Experience, Salesforce mobile app, and standalone applications built on the Salesforce platform.

Lightning Component Bundle

A Lightning Component Bundle is a collection of files and resources that define a Lightning component. It provides a structure to organize the component's code and configuration. Let's explore the components of a typical bundle:

• Component Markup (ComponentName.cmp): This is the core file that defines the structure and layout of the component using HTML-like syntax with custom Aura tags. It represents the user interface of the component and contains the component's attributes, event handlers, and associated JavaScript controller.
• Component Controller (ComponentNameController.js): The controller is responsible for handling user interactions and defining the component's behavior. It contains methods that can be invoked from the component's markup to perform actions, process data, and interact with the server or other components.
• Component Helper (ComponentNameHelper.js): The helper is an optional JavaScript file that provides additional utility methods to assist the controller. It allows for code reuse and separates complex logic from the controller, promoting cleaner and more maintainable code.
• Component Style (ComponentName.css): The style file contains CSS rules and declarations specific to the component. It is used to define the component's visual appearance, layout, and formatting.
• Component Design (ComponentName.design): The design file is used to configure the component's user interface in the Lightning App Builder. It allows admins or users to customize the component's attributes and appearance without modifying the underlying code.
• Component Renderer (ComponentNameRenderer.js): The renderer is an optional JavaScript file that allows developers to override the default rendering behavior of the component. It is used for advanced customization and is typically used in rare scenarios.
• Other Resources: A bundle may also include other files such as images, icons, or additional JavaScript libraries required by the component.

Example: Display Contact List using Aura Component

Let's take an example of a basic Aura component that displays a list of contacts. Here are the relevant code snippets:

contactListComponent.cmp

<aura:component>
  <aura:attribute name="contacts" type="List" default="[]" />
  
  <ul class="slds-list--dotted">
    <aura:iteration items="{!v.contacts}" var="contact">
      <li class="slds-list__item">
        <p>{!contact.Name}</p>
        <p>{!contact.Email}</p>
      </li>
    </aura:iteration>
  </ul>
</aura:component>

contactListComponentController.js

({
  doInit: function(component, event, helper) {
    // Fetch the list of contacts from the server
    // and set the attribute "contacts"
    // with the response data
    helper.getContacts(component);
  }
})

contactListComponentHelper.js

({
  getContacts: function(component) {
    // Perform server call to fetch the list of contacts
    // and update the attribute "contacts" with the response data
    // Example code:
    var action = component.get("c.getContactList");
    action.setCallback(this, function(response) {
      var state = response.getState();
      if (state === "SUCCESS") {
        component.set("v.contacts", response.getReturnValue());
      }
    });
    $A.enqueueAction(action);
  }
})

In the above example, the Aura component contactListComponent defines an attribute contacts of type List to hold the contact records. The <aura:iteration> tag is used to loop through the contacts and display their names and email addresses using data binding expressions {!contact.Name} and {!contact.Email}. The controller and helper files handle the server call to retrieve the contact list and update the attribute accordingly.

Use Cases of Lightning Aura

• Building custom user interfaces in Salesforce Lightning Experience
• Creating standalone Lightning apps that can be hosted outside of Salesforce
• Integrating Lightning components with other web technologies and frameworks
• Developing Lightning components for Salesforce mobile app
• Extending and customizing Salesforce's standard Lightning components