Introduction

In this Salesforce tutorial, you will learn all the basics of Salesforce Lightning and you will learn how important Salesforce Lightning is. Let’s see what is CRM and what made Salesforce come into play?
CRM stands for customer’s relationship management which is a tool by which a company manages the customer’s interaction based on the data analysis.

Salesforce Lightning:

As this digital age is changing, so it was needed to transform ways through which an organization’s interaction with its customers. This is where Salesforce Lightning came into play.

Watch the following video for a better understanding of Salesforce Lightning

Salesforce Lightning Tutorial Introduction In this Salesforce tutorial, you will learn all the basics of Salesforce Lightning and you will learn how important Salesforce Lightning is. Let’s see what is CRM and what made Salesforce come into play? CRM stands for customer’s relationship management which is a tool by which a company manages

Table of Contents

What is Salesforce Lightning?

Salesforce is a cloud-based business application that helps to stay connected to their customers. Salesforce can be very useful in lead generation, improving sales, deals closure, marketing domain, customer service, analytics, etc.
What is salesforce lightning
With Salesforce, you can develop apps, and maintain an app ecosystem. Virtual CRM is to hold customers end-to-end information which can be accessed by everyone. Apps can be easily built even without coding. App ecosystem provides billions of installed apps that can be sold to the customers. It’s the world’s best CRM platform enabling organizations to sell, service and market.

Salesforce Lightning:

Salesforce Lightning is a platform that provides tools to every organization to build next-generation UI and UX in Salesforce. Lightning created a modern productivity-boosting user experience.
Let’s see about the Lightning experience for the better understanding of the Salesforce Lightning.
What is salsforce lightning

Lightning Experience

The lightning name refers to the real lightning like that in storms. Lightning is used to create fast, beautiful and unique user experience just like real lightning so that sale teams can sell faster and this helps sales reps to be focused on what’s important. Lightning Experience uses open-source aura framework. Lightning Experience is a completely re-designed framework to create a modern user interface.
Let’s see what’s new in the lightning experience.
Look at the previous Salesforce Classic’s interface.
Salesforce classicNow see Salesforce Lightning Experience.
lightning experience
You can see that the whole interface has changed. That’s why Salesforce Lightning is used because it provides modern experience across every device and provides tools to extends or builds new applications with the Lightning application builder and Lightning components.

Get certified from this top Salesforce Course in Singapore today!

Lightning Component

The lightning component framework is a UI framework to develop dynamic web applications for mobiles and desktops. It uses Javascript(client-side) and Apex(server-side) to create single-page web applications. This framework is a collection of codes where you can create applications without writing codes. Lightning Component consists of event-driven architecture which has made easy to build many applications.
Example:
Let’s say you want to build or update weather application with Lightning framework.

<aura:application>
<ns: myAwesomeMaplat=”12.9049314.77.6460073.6z”
lon=”122.4167” />
<ns: weather lat=”37.7833” lon =”12.904” />
</aura:application>
  • Lighting component framework can also be used to create single page applications.

See the below picture:
Salesforce lightning

  • Lightning Component is used by salesforce to deal with the client-side and for server-side, it relies on the apex.

salesforce
Lightning Event Handler

  • Lightning Component is build using event-driven architecture. User interface events are driven by a user interacting with the UI. It provides handlers(write handler codes) to handle UI events.

Event driven programming

  • Lightning Component contains a number of related resources that work together.

Related resources

  • Build a personalized app with lightning app exchange, i.e. develop in the way you want to increase sale reps.

Personalized app

  • You can use lightning components anywhere even offline.
  • Customize CRM to use it effectively and successfully.
  • Lightning components are built on the open-source aura framework.

Why Use the Lightning Component Framework?

Benefits of Lightning Component Framework
benefits

  • Out-of-the-box component: This includes more than 175 features which help in many things that Salesforce classic lacks.
  • Rich component ecosystem: You can use the already available components in the salesforce through Lightning.
  • Performance: The server side is dealt with JavaScript. Suppose if you want some data then it will send only the necessary data to increase the efficiency.
  • Event-driven architecture: It provides event handlers to handle events.
  • Faster Development

Open Source Aura Framework

Open source aura framework means you can build apps regardless of what data you have, i.e. either structured or unstructured in Salesforce. In other words, you have everything to develop an app and build UI without having the need of knowing technical coding.
This framework you can get from https://github.com/forcedotcom/aura
The aura namespace contains the components to simplify your app logic, ui namespace contains components for user interface and force namespace contains components for Salesforce. The aura framework is not totally available in Lightning Component Framework.

Prepare yourself for the industry by going through this Top Salesforce Interview Questions and Answers!

Browser Support Considerations for Lightning Components

Different browsers support different versions of salesforce lightning. Here is the list of the browsers with versions of Salesforce:

Microsoft® Internet Explorer®Google Chrome™Apple® Safari®Microsoft® EdgeMozilla® Firefox®
Lightning OutIE 11 (support for IE 9 and 10 ends on April 5, 2019)Latest11.x+LatestLatest
Lightning ExperienceIE 11 (support for IE 9 and 10 ends on April 5, 2019) 1Latest11.x+LatestLatest
Outlook integration (Web)IE 11 (support for IE 9 and 10 ends on April 5, 2019)Latest11.x+LatestLatest
Outlook integration (Client)IE 11 (support for IE 9 and 10 ends on April 5, 2019)LatestN/ALatestLatest
Salesforce Console in Lightning ExperienceN/ALatest11.x+LatestLatest
Standalone Lightning App (my.app)IE 11 (support for IE 9 and 10 ends on April 5, 2019)Latest11.x+LatestLatest

Using the Developer Console

Developer console
This is called a developer console. It provides tools and components to develop your tools.
Features of developer console:

  • Box-1 represents the menu bar to create or open these lightning resources.
    • Tokens
    • Interface
    • Application
    • Component
    • Event
  • Box-2 represents the workspace to work on your lighting resource.
  • Box-3 represents the sidebar to create or relocate the client site resources.
    • Design
    • Helper
    • Style
    • Controller
    • SVG
    • Documentation
    • Renderer

Create a Component for Lightning Experience and the Salesforce Mobile App

Now, as you have learned the basics of the Salesforce Lightning. Let’s see the following examples to learn how to create a component for Lightning Experience and the Salesforce Mobile App.

Load the Contacts

Loading contacts
Here are the following steps to load the contacts:
This is a component in the Salesforce App. Two components, i.e. contactList and contacts iterates over and displays contacts components. Contacts are displayed in the contact list. You can also select different lead sources to view a subset of contacts.
Contact list

Contacts BundleDescription
contacts.cmpdisplays individual contacts
contactsController.jsNavigates to a contact record using
force: NavigateToObject event
contactList BundleDescription
contactList.cmpLoads list of contacts
contactListController.jsLoads the contact data and handles the lead source selection
contactListHelper.js displays a message on successful loading of contact data, displays and update the total number of contacts
Apex ControllerDescription
ContactController.apxcqueries contacts records and records based on different lead sources.

Let’s create the above resources:
You can load the contacts on the Apex controller after its creation. Apex controller connects the components and data in the Salesforces. Before starting this, you must have a better understanding of HTML and CSS. Once you know HTML and CSS, you can easily understand the below codes.
Assume an organization has the contact records then,

  • Goto File > New > Apex Class

Enter ContactController in the New Class.
A new Apex class ContactController.apxc is now created.
Code and Save:

public with sharing class ContactController{
@AuraEnabled public static List<Contact>getContacts(){
List<Contact> contacts =[SELECT Id, Name, MailingStreet, Phone, Email, LeadSource     FROM Contact];
}
}
  • Click File > New > Lightning Component

Enter contacts for the Name field in the New Lightning Bundle window.
Component contacts.cmp is created.
Code and Save:

<aura:component>
<aura:attribute name=”contact” type=”Contact” />
<lightning:card variant=”Narrow” title=”{!v.contact.Name}”
iconName=”standard:contact”>
<aura:set attribute=”actions”>
<lightning:button name=”details” label=”Details” onclick=”{!c.goToRecord}” />
</aura:set>
<aura:set attribute=”footer”>
<lightning:badge label=”{!v.contact.Email}”/>
</aura:set>
<p class=”slds-p-horizontal_small”>
{!v.contact.Phone}
</p>
<p class=”slds-p-horizontal_small”>
{!v.contact.MailingStreet}
</p>
</lightning:card>
</aura:component>
  • Click File > New > Lightning Component

Enter contactList for the Name field in the New Lightning Bundle window
Component contactList.cmp is created.
For namespace, replace ContactController with myNamespace.ContactController
Wire up the Apex controller to the component:
Syntax: controller=”ContactController”
Code and Save:

<aura:component implements=”force:appHostable” controller=”ContactController”>
<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}”/>
<aura:attribute name=”contacts” type=”Contact[]”/>
<aura:attribute name=”contactList” type=”Contact[]”/>
<aura:attribute name=”totalContacts” type=”Integer”/>
<div class=”slds-page-header slds-page-header_object-home”>
<lightning:layout>
<lightning:layoutItem>
<lightning:iconiconName=”standard:contact” />
</lightning:layoutItem&gt
<lightning:layoutItem class=”slds-m-left_small”>
<p class=”slds-text-title_capsslds-line-height_reset”>Contacts</p>
<h1 class=”slds-page-header__titleslds-p-right_x-small”>Contact Viewer</h1>
</lightning:layoutItem>
</lightning:layout>
<lightning:layout>
<lightning:layoutItem>
<p class=”slds-text-body_small”>{!v.totalContacts} Contacts • View Contacts Based on Lead Sources</p>
</lightning:layoutItem>
</lightning:layout>
</div>
<lightning:layout>
<lightning:layoutItem padding=”horizontal-medium” >
<lightning:selectaura:id=”select” label=”Lead Source” name=”source” onchange=”{!c.handleSelect}” class=”slds-m-bottom_medium”>
<option value=””>– Select a Lead Source –</option>
<option value=”Referral” text=”Referral”/>
<option value=”Social Media” text=”Social Media”/>
<option value=”All” text=”All”/>
</lightning:select>

 

<aura:iteration var=”contact” items=”{!v.contacts
<c:contacts contact=”{!contact}”/>
</aura:iteration>
</lightning:layoutItem>
</lightning:layout>
</aura:component>
  • Click CONTROLLER to create a resource, i.e. contactListController.js.

    Replace the placeholder code the below code and save:

({
doInit : function(component, event, helper){
helper.loadContacts(component);
}
handleSelect : function(component, event, helper){
var contacts = component.get(“v.contacts”);
var contactList = component.get(“v.contactList”);
var selected = event.getSource().get(“v.value”);
var filter = []; var k = 0;
for (var i=0; i<contactList.length; i++){
var c = contactList[i];
if (selected != “All”){
if(c.LeadSource == selected){
filter[k] = c;k++;
}
} else {
filter = contactList;
}
} component.set(“v.contacts”, filter); helper.updateTotal(component);}
}}
  • Click HELPER to create a resource, i.e. contactListHelper.js.

    Replace the placeholder code with the below code and save:

({
loadContacts : function(cmp) {
var action = cmp.get(“c.getContacts”);
action.setCallback(this, function(response){
var state = response.getState();
if (state === “SUCCESS”){
cmp.set(“v.contacts”, response.getReturnValue());
cmp.set(“v.contactList”, response.getReturnValue()); this.updateTotal(cmp);
var toastEvent = $A.get(“e.force:showToast”);
if (state === ‘SUCCESS’){
toastEvent.setParams({
“title”: “Success!”, “message”: ” Your contacts have been loaded successfully.”
});
}
else{
toastEvent.setParams({
“title”: “Error!”, “message”: ” Something has gone wrong.” });
}
toastEvent.fire(); }); $A.enqueueAction(action); })
updateTotal: function(cmp){
var contacts = cmp.get(“v.contacts”);
cmp.set(“v.totalContacts”, contacts.length); }
})

Fire the Event

In client-side or helper functions, fire the event. Lightning Experience handles the force events. Let’s test:

  • Click CONTROLLER to create a resource, i.e. contactsController.js.
    Replace the placeholder code with the below code and save:
({
goToRecord : function(component, event, helper){
var sObjectEvent = $A.get(“e.force:navigateToSObject”);
sObjectEvent.setParams({ “recordId”: component.get(“v.contact.Id”) })
sObjectEvent.fire();
}
})

<lightning:button name=”details” label=”Details” onclick=”{!c.goToRecord}” />
This triggers the goToRecord in the client-side.

  • Refresh the custom tab and click Details.

The force:navigateToSObject is fired which updates the view to display the contacts.

Have you got more queries? Come to our Salesforce Community and get them clarified today!

Conclusion

This brings us to the end of Salesforce Lightning tutorial. In this tutorial, we learned in detail about the overview of Salesforce Lightning. We also covered almost all the main topics of Salesforce Lightning such as why to use this, how to create components, etc.  Join Intellipaat Salesforce Lightning training course and Salesforce Certification today and let you and your organization considered be the best in selling areas through Salesforce Lightning.

Recommended Videos

2 thoughts on “Salesforce Lightning Tutorial”

  1. Hi,
    I must say that this is one of the best posts that I have read lately. I have only one word for this… Inspired! At Cloud-Integrate, we have experienced and certified teams of Salesforce Developers and Salesforce Experts specializing in a wide range of Salesforce services and capabilities. From Salesforce Communities Development to Salesforce Sales Cloud Customization, and from Salesforce Implementation Services to Salesforce Consulting Services, Cloud-Integrate is the leading Salesforce Development Company around the globe.

  2. Thank you for sharing superb informations. Your website is very cool. I’m impressed by the details that you have on this website. It reveals how nicely you perceive this subject. Bookmarked this website page, will come back for extra articles. You, my pal, ROCK! I found simply the info I already searched everywhere and simply couldn’t come across. What a great web-site.

Leave a Reply

Your email address will not be published. Required fields are marked *

Solve : *
15 + 10 =