Salesforce Lightning Tutorial

Salesforce is a cloud-based Customer Relationship Management (CRM) platform. Its CRM applications are used for sales, service, marketing, and many more. As Salesforce is a cloud-based platform, it is easy to implement and manage it. The Salesforce applications don’t require IT, experts, to manage or even set up them. You can just simply log in and connect with your customers. Salesforce also has a vast and diverse community that helps companies with all the support required, starting from the development of an application to its customization.

It has three major advantages, and they are:

• Fastness: Salesforce will take a few months to get the application deployed whereas custom-built CRM may take years to get it deployed.
• Easy to use: Salesforce is simple to use compared to a complex custom CRM platform.
• Effective: It is effective as it is more customizable according to the need.

In Salesforce, we have two methods to build an application, and they are:

Classic Salesforce Application Architecture: It is a client application by which you can use it over mobiles. Salesforce uses wireless carrier networks which will connect or exchange data from users to Salesforce. All the data is stored in the mobile, and data sent to the mobile applications depend on the configuration of the mobile.

Lightning Application Architecture: It is a new approach to application development. Using Lightning, we can develop an application that supports any device like mobile, desktops, or Tabs. Lightning application is moreover a dynamic approach towards application development where a single page application will interact according to the user.

Due to its advantages, the Salesforce lightning application’s usage is more compared to Salesforce Classic. Slowly, all applications are moving from Salesforce Classic to Lightning application. As the trend has changed now, which is to have a more easy and interactive application approach, companies are giving more importance to modern and dynamic approaches of the CRM application, which are fulfilled by the lightning application. Using the Lightning application, you can get all the dynamism and easy-to-go approaches for your CRM  application.

Salesforce Lightning Tutorial for Beginners

This Salesforce Tutorial will help you learn about the Lightning Component Architecture, the creation of Lightning application and Lightning Component, and many other topics related to the Lightning Experience.

In this Salesforce Lightning Tutorial, we will discuss the following topics:

Introduction to Salesforce Lightning Component Salesforce Lightning Components Basics Create and Edit Lightning Components Attributes and Expressions Handle Actions with Controllers Input Data Using Forms Connect to Salesforce with Server-Side Controllers Connect Components with Events

Introduction to Salesforce Lightning Component 

Salesforce Lightning is a Component-based framework from Salesforce for design simplified processes for business users. The next big thing in Salesforce is the Lighting Component Architecture. Lightning Component Framework is one of the methods in Salesforce which is used to develop the user interface. It is used to create a dynamic web application for both mobiles and desktops.

Salesforce Lightning Architecture uses Single-page Application Architecture.  Single Page Applications are web applications that use a single HTML page and update dynamically when the user interacts with the page. In this tutorial, we will follow a modern approach to build a single web application using Salesforce Lightning Component.

Related Article: Salesforce Lightning Features

The below figure shows how the Lightning Component framework looks. We have three components here:

• Client-Side: This is handled by JavaScript
• Salesforce Cloud to connect both server and client-side.
• Server Side: This is handled by Apex Controller.

Enthusiastic about exploring the skill set of Salesforce Lightning? Then, have a look at the" Salesforce Lightning Online Training "together with additional knowledge.

Salesforce Lightning Component is built over Aura Component, Using the Aura component enables to development of dynamic web pages with scalable lifecycle to support building apps designed for growth.

Aura Components are reusable components and represent reusable sections of the UI. Usage of Aura Components can range from a single line to a complete app. Salesforce Lightning Component is built over Aura Component. Aura Component enables to development of dynamic web pages with a scalable lifecycle to support apps designed for growth. You can find more about the Aura component from this link ithub.com/forcedotcom/aura.

Aura Component has a multi-tier partitioned component that connects the server and client. As it is developed over the Aura framework, it uses the responsive design - In this method, the lightning component uses the same codebase for all desktops, mobiles, and tablets but displays according to the screen. This tutorial will show how you can reuse the same codes for different applications’ development.

Salesforce lightning component architecture has the advantage of using components like HTML, CSS, JavaScript, and many other web-enabled codes, providing a sophisticated user interface. The lightning component is flexible, interactive, and helps to focus on the visualization of the business. The lightning component uses different technology at both server and client-side - JavaScript is used at the client-side and the apex is used at the server-side.

As the lightning in real life strikes fast and does not repeat its pattern, the Salesforce lightning design system also is quick in use and does not repeat the same design for different service users. It helps to provide customer support, product knowledge, different cases in a single environment.

Reasons to use the Lightning component are mentioned below.

• Out-of-box component sets.
• The ecosystem in use has rich components.
• Fast and better performance.
• Event-driven architecture.
• Responsive design with reusability.
• Advantages of cross-browsability.
• Beautiful user interface.
• Driven towards visualization.
• More user interactive.

Salesforce lightning design system is used in many ways, we will learn these different ways of Salesforce lightning design in this tutorial. This Salesforce developer guide will help in an organized way of developing the lightning component.

As we talk about where the Salesforce lightning component ecosystem can be used, we can get a long list. The lightning component can be deployed in the following.

• Lightning experience.
• Salesforce1 app.
• Lightning pages.
• Lightning apps.
• Visualforce pages.
• Apps with lightning out.
• Standalone apps in Salesforce.
• Community builder.
• Lightning tabs.
• Mobile Hybrid SDKs

But, the lighting components cannot be deployed or used on external sites.

Related Article: Salesforce Trigger Scenarios

Salesforce Lightning Experience Basics

The lightning component architecture consists of a lightning application, component, controller, helpers, and Apex controller. Lightning components are based on an open-source UI for web development. The below figure will help you understand.

Components of Lightning Application Architecture

The basic components of Lightning component architecture are explained below.

• Lightning application: These are standalone pages containing many lightning components. Markup code used in the lightning application is similar to HTML to create a lightning application, we use a developer console.
• Lightning Component: These are Markup components present in the application. It consists of helper(JS), Controller (JS), Style(CSS), Documentation, SVG, Re-Renderer and Design. Also, it can have HTML+ Aura Component supported by Salesforce. Lightning components can be created in the developer console.
• Controller (JavaScript): Controller is a resource made up of JavaScript which defines the functionality of all components in the action. Clicking the controller link present in the component will create a controller.js file. JavaScript is used for the controller as shown in the below example.?

Controller Source

({
handleClick : function(cmp, event) {
var attributeValue = cmp.get("v.text");
console.log("current text: " + attributeValue);
var target = event.getSource();
cmp.set("v.text", target.get("v.label"));
}})

Example: Controller.js

• Helper(JavaScript): Helper is another JavaScript resource that helps to connect both the Apex side and the Application side. It is like a controller we will have the link to create the helper which will give Helper.Js file.
• Apex Controller: Apex Controller is a custom Controller which implements all the logic of the page. This is of apex class which doesn’t have an argument constructor for the output. Apex Classes is similar to Java classes where it defines functions of code.

Related Article: Salesforce Tutorial for Beginners

To create Apex Controller:

1. From the component Bundle, enter apex classes in the quick find box and select apex Classes
2. Click New.
3. Now set the apex version in the version setting.

• CSS style: This is basic CSS styling as used in the HTML. It is used for styling and coloring the page.

Create and Edit Lightning Components

Before starting to build an application in Salesforce lightning Component creation, we need some setups. To develop the lightning application, you need an org setup which is as follows.

• Go to this link https://developer.Salesforce.com/signup?d=70130000000td6N
• Fill in the fields required.
• In the email field, provide a public address so that you can access it easily from the web browser.
• Provide a username that is easy to remember, and in the pattern of your mail. For example, firstname@lastname.com.
• Read and select the checkbox for the subscription agreement.
• After this, you will get an email notification and for the password change. Change the password.

Quick Start: Lightning Components

In this section, we will create your first Lightning Component. We can say it is a combination of Markup, JavaScript, and CSS. We will approach it stepwise.

Step 1: Open Your Console.

Go to your Salesforce domain and select Developer Console as marked in the below picture.

Link:  https://ap8.lightning.force.com/lightning/setup/SetupOneHome/home

Screen Shot from the Salesforce Lightning Experience web page

Step 2: Go to File-->New--> Lightning Component.

 New Lightning Component.

Step3: After clicking on the lightning component, give the name for your component like Myfirst_lightcomponent and submit the form, as shown below screenshot.

Naming The Lightning Component.

Step4: Once you submit, you will get two tabs opened, one is myfirst_lightcomponent component bundle and the other is myfirst_lightcomponent.cmp tab. Close the myfirst_lightcomponent tab and keep myfirst_lightcomponent.cmp opened, as shown below.

Lightning Component Page and Component Bundle.

Step5: Now, you can edit with markup code, for example, you can write sample code shown below.

Creating New Salesforce Lightning Application 

The below steps will help to create a new lighting application.

Step1: Go to file-->new--> Lightning application

Link: https://ap8.salesforce.com/_ui/common/apex/debug/ApexCSIPage

 Opening Lightning Application

Step2:  Give the name for the application, like myfirst_lightapp, and Submit the form.

Naming Lightning application.

After the submission, a page will open with a new myfirst_lightapp bundle and myfirst_lightapp.app page. Close bundle page and continue with the. app page as shown in the below screenshot.

Application Page.

Step3: Now, with the heading, embed the component name in the file, as shown in the below code, and save the file. C tag in the code is the default namespace to access the lightning component.

My first lightning application

Step4:  Now, go to the lightning application component bundle and click it on preview, it will show the output of the lightning component. Below shows the output of the lightning component.

The output of the Lightning Component.

Lightning Components Basics: Attributes and Expressions

While creating the Lightning Component, we use Attributes and Expressions to make the component more dynamic. It is mostly used for holding a value and reusing it in the code. Thus, attributes and Expressions are essential aspects of the lightning component.

The attribute is like a variable where we store a value that can be used again and again in the code. Using attributes in lighting components will increase the dynamics of the code. Attributes can be added using tag

The attribute has rules for naming, and they are:

1. Should start with the alphabet or underscore.
2. Should contain only alphanumeric or underscore characters.

Expression: This field is actually used for calculation, using property values and other information in the markup. It is used for giving output dynamically or getting values in the component dynamically.
Expressions can be any literal values, sub-expressions, variables, and operators. The expression can only be declared inside the attribute as a field, which can be declared by tag {!v.whom}. The expression can be only case sensitive and should be maintained like that.

Attribute Types

We have different types of attributes, and they are.

• Basic types.
• Function type.
• Object Type.
• Standard and Custom type.
• Collection Type.
• Custom Apex Class type.
• Framework Specific Type.

Related Article: Salesforce Data Loader

How to declare an Attribute?

Attribute use in the Lightning component is similar to any markup language, here we define attribute under the aura component tag. You can see the attribute declaration below.

Here, we have many components which declare the Attribute, and they are:

Name: Which is the name given to an attribute.
Type: Its data type to which it belongs like string or number.
Default: If left null what value should be filled to the attribute by default choice.
Description: The Description of the attribute for which it is used.
Access:  It determines whether it is a Global attribute or a Private attribute.
Required: Whether the attribute is mandatory or not.

Let us see an example code for the attribute Declaration.

Name of Unknown is {!v.FirstName}

{!v.FirstName} is {!v.Age} Years Old.

{!v.FirstName} is male? = {!v.isMale}

Now, open your Developer Console and type the above code in lightning Component, and save it by any name like my_first_attribute. Now, create a lightning application and embed your component in the lighting application.

After this, go to Developer Console and press preview, and you will be able to see your output as shown below. In the above code, we have used three attributes, name, age, and Gender.

 The output of the attribute

As you observe in the code, we have used the tag {!v. Name}, this tag is the example for Expression. As we enter the value of the attribute dynamically, the Tag{!v. Name} is the function of expression. There are different types of Expressions used in the lightning component, and they are:

1. Dynamic Output Expression.
2. Conditional Expression.
3. Data binding between components.
4. Value provider.
5. Expression Evaluation.
6. Expression operators Reference.
7. Expression Function Reference.

In the above code, we have used both value provider expression and Dynamic Output expression.  The expression used with the tag is a Dynamic output expression and using it in the next tag {!v.name } is of age {!.age} makes it value provider expression. 

Related Article: Salesforce Scenario Based Interview Questions

Handle Actions with Controllers

Actions are any function or working of code that are handled by the controller on the specific operation. Like in the web browser when we click on a new tab and a new tab for browsing is created, likewise, we can have an action button in the lightning component which will perform such operations on click go. 

Action: Actions are operations or any function which performs any specific task in the application.

The above-mentioned tag is a click tag which upon clicking it will perform a specific action. 

Event: Any action like notification given to a user on performing an action is called an event.  These events are controlled by a client-side controller which is basically written in JavaScript.

The below examples show the action created with the event in a  controller.

({
    myAction : function(cmp, event, helper) {
        // add code for the action
    },
    anotherAction : function(cmp, event, helper) {
        // add code for the action
    }
})

Each function above contains three components,

• cmp→ Lightning component having a controller.
• Event→ To handle the action.
• helper→ This is optional which can be reused in the component bundle.

Now, to handle the action, we need the controller from the client-side. The controller is a part of the component bundle. To create a Controller, click the controller option in a component bundle. The component bundle is shown below.

Component Bundle

Once clicked on the tab, it will create the page, as shown below.

Once the controller page is shown we write down the below code, which will create the two actions.

{!v.text}

Observer the below example to create two actions with a button. Clicking on these buttons will update the text component of the attribute with specified values. Here, we have used the lightning button which is a standard lightning component.

The lightning framework has its own event system called DOM (Documented Object Model) event. Events that are mapped to lightning events as HTML tags are mapped to the lightning component. All the browsers can be mapped with Onkeys and Onclick which are then mapped to the lightning component. After that, the click button is mapped to the lightning button component to handle click action.

The below-mentioned code is for the client-side controller source which will help us to use onclick button created in the above code in the application.

{!v.text}

handle click function in the above is the action which uses event getSource(). getSource() is a built-in event of the lightning component which helps to determine from which component an event is fired. The lightning button in markup is the source component. When the button is pressed, the text is set to attribute value for the label which is declared as v.label. To execute this again, go to the previewer and click the button, and it will do the work.

[Check Out: Bucket Field In Salesforce]

Input Data Using Forms

Now, let us continue with the form building and inputting the data. For this topic, we will consider building a form for expense calculation. This form will create new expenses. For this, we will proceed with the steps as followed.

Step1: Pull Salesforce lightning design system (SLDS), and activate this in Lightning Component. We will get SLDS automatically inside. This SLDS is not available in the stand-alone app.

Now create a lightning application named myexpenseapp. app with the following mark-up.

extends=“Force:slds” will activate SLDS in the application, C: expenses will embed components in the application.

Step2: Now, create a component with the name expense and write down below markup

The above code is to create a grid layout.  When you preview it, you will get the output as below.

As you can see it is blank, now we have to add the form fields.

Step3: Now, you have to add fields to the empty form. In the above code, we have commented on line number 18. Now replace that line with the below code. Now, without SLDS and Classes, it's just a 
series of input fields. 

Step4: Now, go to the Lightning application component bundle and click the preview tab. You get output as below.

Application Component Bundle

Connect to Salesforce with Server-Side Controllers

Till now, we were playing at the client-side, and we have not connected to the server yet. An event is wired to client-side controller action which can call server-side controller action. We have methods to connect to Salesforce, and you can see them below.

Apex Server-Side Controller Overview

The server-side controller is created in the apex and uses @auraenabled annotation for accessing the controller method. Only annotated methods are exposed and are bounded to apex limits. Apex controller has this server Echo action which adds a string to the value passed in.

Aura-enabled Annotation helps the lightning components to connect to the apex methods and properties.  Aura-enabled annotation is used for two separate and distinct purposes. Use @AuraEnabled class static methods of Apex to Access remote controllers in the lightning component. Use @AuraEnabled  instance methods and properties of Apex to serialize as data received from the server-side.

//Use @AuraEnabled to enable client- and server-side access to the method
    @AuraEnabled
    public static String serverEcho(String firstName) {
        return ('Hello from the server, ' + firstName);
    }
}

Lightning application component bundle

Creating an Apex Server-Side Controller

Step1: Open your Developer Console.

Step2: Go to file-->New-->Apex Class

Apex Server-Side Controller

Step3: Enter a name to the controller.

Step4: Now, enter the method for each server-side controller. Add aura enabled so that methods get exposed.

Step5: Now, save the apex controller, after that open the component with which you want to wire the apex controller with. Now, add the controller to the component with the below tag.

Returning an Apex Server-Side Controller

After creating the server-side controller, we need to retrieve data from the server-side to the client-side. This can be done by using the return keyword in the component. The result must be serialized and should be in JSON format. 

The return data type can be:

• Simple.
• Subject.
• Apex.
• Collection.

Returning Apex Object.

Example code to return the object:

public with sharing class SimpleAccountController {
    @AuraEnabled
    public static List getAccounts() {
        // Perform isAccessible() check here
        // SimpleAccount is a simple "wrapper" Apex class for transport
        List simpleAccounts = new List();
        List accounts = [SELECT Id, Name, Phone FROM Account LIMIT 5];
        for (Account acct : accounts) {
            simpleAccounts.add(new SimpleAccount(acct.Id, acct.Name, acct.Phone));
        }
        return simpleAccounts;
    }
}

Connect Components with Events

Events: An event is a notification of an action that is performed in the application. Browser events are controlled by a client-side controller which uses JavaScript.

When an action is performed, the following things happen.

• User clicks on the action, triggering browser events.
• Action clicked will invoke the client-side controller providing custom logic and invokes the helper.
• Helper improves the code reuse.
• Helper calls the Apex server-side controller. This can be done by the client-side controller also.
• Apex controller invokes the Apex method and returns the data.
• Callback evaluates the logic and updates the UI.
• User views updated data.
• JavaScripts callback is invoked.

Handling Events with Client-Side Controllers

A client-side controller handles the event in a component. It is JavaScript that controls all functions to happen. 

Now, follow the steps to create an event attached to a Component.

Step1: Create an event. Go to developer console and in a component bundle, click on Controller, and write down below code.

({
    myAction : function(cmp, event, helper) {
        // add code for the action
    },

    anotherAction : function(cmp, event, helper) {
        // add code for the action
    }
})

Step2: Save the controller and now open the new component into which our event will be embedded.

Step3: Add this below code to attach our event to the component. Here, in the code, marked data, where we have used tag {!c.handleclick}, will wire our event into the component through a function.

    
    
    

    {!v.text}

This will connect your event to the component.

In lightning application, we have a type of event called a component event. This event is fired from the instance of a component. This makes both events and actions fired from the same component.

Component Event

We have another method where we can have our event handled by the component, and that is the Component event. Component Event is one such type of event which is defined inside the component itself which fires it. Both defining of event and firing of event happens in the same component. Below are the steps to create the Component Event. 

Step1:  Create a lightning component in the Developer Console.

Step2: Use type=” Component” tag for the component event, Use the below code.

Get trained and certified from Salesforce Online Course now!