You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Lightning Component Framework


By: Venkata

What is Lightning Component Framework?

In the modern electronic age, businesses are moving towards using different devices, such as Laptop, Smart Phones, and Tablets for their business processes. One of the major challenges these businesses have been facing is handling device compatibility.

Salesforce has introduced Lightning Component framework– a UI framework for developing dynamic web apps for mobile and desktop devices. The following image shows some of the major companies and their component frameworks for their application development.

 

Advantages of Lightning Components

The Lightning Component framework is built on open-source Aura framework. As per salesforce documentation, the following are the advantages that help you to build more sophisticated and device compatible applications.

  1. Lightning Components is the Client (JavaScript) – Server (Apex) framework and Multi-tier architecture. It’s ideal for use with the Salesforce 1 mobile app.
  1. It is an event-driven architecture for better decoupling between components.
  1. Helps faster development with improved performance.
  1. Also, we don’t need to spend our time for compatibility, but the Lightning App uses responsive design and provides a great user experience. The Lightning Component framework also supports the latest browser technologies, such as HTML5, CSS3, and touch events.

Overview of Lightning Component Usage

You can start building app by navigating Your Name  Developer Console. Please note that you cannot create lighting components from the Salesforce UI.

Application: To run the Lightning component, the application is important. Here, include the component in the application to use. This is the top-level component that contains all other components.

Component: We can build a User interface by using component as well collection of Lightning input components to collect user input. Once the components are created, there are several options you can see in the sidebar and a few of that options as follows:

Controller : This file contains the client-side JavaScript controller methods to handle events fired and handled by the components.

Helper : This file contains JavaScript functions that can be called from any JavaScript code in a component bundle. This will be a Helper class to the Controller. It will be useful when we need to reuse the same logic somewhere else.

Style  Creates CSS Styles to the particular components.

Documentation : By adding documentation, we can easily determine the usage of the particular component. It’s similar to comment.

 

Interface: Similar to Java, Lighting supports Interface. For example,

<aura: component implements=”force: appHostable”>

To make your component available in Salesforce1, you need to implement the interface. The above code implements the default appHostable interface in order to use this component in Salesforce1 and “force” is the namespace.

Event

There are two types of events available:

  1. Application Event (Changes made to the entire application).
  2. Component Event (Changes made to the specific components).

Life Cycle of Lightning Component

The below image shows how the lightning components work between the client and server side.

Steps to Enabling Lightning Components

Before starting building the Lightning application, you must need to enable this feature in your organization by following these steps:

Setup -> Build ->Develop ->Lightning Components ->Enable Lightning Components (Checkbox) ->Save

You can also Enable debug mode option to make it easier for debugging JavaScript code in your Lightning components.

Note: You can’t use Force.com Canvas app in Salesforce1, if you enable lighting components.

Simple Record Creation Example using Lightning Component

Step 1: Adding Bootstrap in Static Resource

The following Bootstrap is for demo purpose, and it is used for rich design and compatibility purpose.

Download the Salesforce1 styled theme available at http://developer.salesforcefoundation.org/bootstrap-sf1/ and upload the bootstrap.css file as a static resource. This file is located at the /dist/css directory.

a. From Setup, click Developer ->Static Resources. Click New.

b. Enter bootstrap in the Name field. Click the Choose File button, and select the bootstrap.css file.

c. Choose Cache Control as Public.

d. Click Save.

Step 2: Create Apex Class

Create a Server-Side Controller in Apex and use the @AuraEnabled annotation to enable client-and server-side access to the controller method.

  1. Go to Develop ->Apex Classes ->New
  2. In the source code editor, enter the following lines of code.

Code:

Public class AccountCreationController

{

@AuraEnabled

public static Account saveAccount(Account acc)

{

insert acc;

return acc;

}

}

Step 3: Creating Lightning Component

Components are the building blocks of an application. They can be wired up to an Apex controller class to load your data.

1. Click Your Name ->Developer Console to open the Developer Console.

2. Click File ->New ->Lightning Component.

3. Enter AccountCreationComponent in the Name field in the New Lightning Bundle popup window.

4. In the source code editor, enter the following code.

Code:

<aura:component controller="AccountCreationController" implements="force:appHostable">

<aura:attribute name="newAccount" type="Account"

default="{'sobjectType': 'Account',

'Name': '',

'AccountNumber': ''

}"/>

<form>

<fieldset>

<ui:inputText aura:id="accname" label="Account Name"

class="form-control"

value="{!v.newAccount.Name}"

placeholder="Enter Account Name" required="true"/>

<ui:inputText aura:id="accnum" label="Account Number"

class="form-control"

value="{!v.newAccount.AccountNumber}"

placeholder="Enter Account Number"/>

<ui:button label="Create Account" press="{!c.createAccount}"/>

</fieldset>

</form>

</aura:component>

 

Usage:

  • <aura:attribute> describes an attribute available on an applicatoin, interface, component, or event.
  • Created form with inputText and Button. In “{!v.newAccount.Name}”, the “v” refers View of the page and “newAccount” is attribute name and “Name” is the account field.

 

Step 3: Creating Controller Component

After a Component is created, you will see the below options in the sidebar; double click the CONTROLLER option;

Now, paste the below code snippet.

 

Code:

({

createAccount : function(component, event, helper)

{

var accNameField = component.find("accname");

var accName = accNameField.get("v.value");

if (accName == '')

{

accNameField.setValid("v.value", false);

accNameField.addErrors("v.value", [{message:"Account Name is Mandatory. Please Enter the value and Save."}]);

}

else

{

accNameField.setValid("v.value", true);

var newAccount = component.get("v.newAccount");

var action = component.get("c.saveAccount");

action.setParams({

"acc": newAccount

});

$A.enqueueAction(action);

alert('Record Saved Successfully');

}

}

})

Usage:

  • To avoid account name being null, accessed the value of account name (available in the form) by using component.find(“accname”). Here, accname is the id of that particular input text component.
  • If the user tries to click Create Account button without providing Account Name, It will prevent from saving record and will show an error message. You can show error message by using addErrors method
  • If no errors are found, then accessed the values entered in the UI, using the component.get(“v.newAccount”)
  • Called the controller method saveAccount as component.get(“c.saveAccount”)
  • Assigned the parameter values using setParams and the parameter variable declared as acc.
  • EnqueueAction will process the record for insertion. After successful save, it will show an alert.

 

Step 4: Creating Lightning Application

1. Click Your Name ->Developer Console to open the Developer Console.

2. In the Developer Console, click File ->New ->Lightning Application.

3. Enter AccountCreationApplication for the Name field in the New Lightning Bundle popup window.

4. In the source code editor, enter the following code.

Code:

<aura:application >

<link href='/resource/bootstrap/' rel="stylesheet"/>

<div class="container">

<Lightning_Frame:AccountCreationComponent />

</div>

</aura:application>

Usage:

  • Link refers the static resource file.
  • Within the div, accessed the component. In the above code, Lightning_Frame refers the organization Namespace. If you don’t have a namespace, then use “c” instead of Lightning_Frame.

Step 5: Executing Lightning App

Save your changes, and click Preview button on the sidebar of AccountCreationApplication.app to preview your app.

You will the following page on your browser.

In the above page, Account name is mandatory. If you try to click Create Account button without entering the Account name, you will see an error message as below. These errors are handled at client side using JavaScript.

Then, enter the values and click the Create Account button.

After successful creation of the record, you will see an alert message as below.

 

You can check the created record by navigating Account tab in the Salesforce UI.

How to run Lightning App?

You can run the lightning application by navigating to the URL that follows this syntax:

https://<mySalesforceInstance>.lightning.force.com/<namespace>/AccountCreationApplication.app

<mySalesforceInstance> : Here, use the instance name of your org; for example, na1.

<namespace>: Here, use your organization namespace, If your organization don’t have namespace, then use “c” in the place of namespace.

Reference

Salesforce Lightning Components Developer’s Guide