Aug 09, 2019 
1k
01
MarThe topics that we are going to cover in this blog will help you understand the new approach of Salesforce, Salesforce Lightning Component using which you can built easy and interactive CRM applications. Before getting started to the tutorial, let us understand-
Salesforce Lightning includes Lightning component framework, which includes really exciting tools for the Salesforce developers. It makes it easier to build responsive applications for any device within fewer amounts of time and effort. Also, it provides a client-server framework that speeds up the development and improvise the application performance. On the other hand, the Salesforce Lightning App Builder gives you the power to build visual applications without using code, which is quicker than ever before using custom-built Lightning components. Lightning components can be used in Lightning App Builder so that admin can build custom user interface without using code.
Now, you must be wondering why Salesforce Lightning component is so popular and why everyone is talking about it? Well, here is your answer-
Salesforce Lightning is-
Salesforce Lightning is the upgraded version of Salesforce classic. It combines Lightning Design System (LDS), Lightning Tap Builder, and Lightning Components to create modern enterprise applications. It can be very useful in the generation of leads, improving sales, closure of deals, marketing domain, customer service analysis, etc.
Salesforce Lightning Layout in Salesforce is given below: -
Salesforce Lightning has three main types. Salesforce 1 was introduced for mobile application and two-user interface for the desktop version, whereas, Salesforce Classic and Salesforce Lightning Experience has been introduced by Salesforce dot com.
Actually, Salesforce Lightning Classic is an older UI of Lightning. Here, SF developer can get customized dashboards and landing page components.
Salesforce Lightning Experience or LEX, in short, brings an entirely new client-side architecture which departs from server-side rendering for its predecessor (that is Salesforce Classic) and Visualforce. It is for the first time, Salesforce developers can now use the same technology, and theme Salesforce has used to build their LEX based applications, known as the Lightning Framework. Salesforce has also chosen to open source their styling framework used by Lightning, which is known as the Lightning Design System (LDS).
Components are said to be self-contained and reusable units of an application. Any lighting application built using these small Salesforce Lightning Components and these components is reusable. But remember-
Lightning in Salesforce is a component-based framework for application development using SFDC that is used to design processes for business users who do not have any prior programming experience. Lightning contains a collection of tools and technologies afterward upgrade to the Salesforce1 platform.
Salesforce Lightning Component is a User Interface (UI) based framework developed to create dynamic Salesforce web applications for mobile and desktop devices. Lightning components are built by a Salesforce Developer, and those components are then assembled by Salesforce administrator to form a Salesforce Lightning page. The Salesforce Lightning Framework is most popular because of the following reasons: -
Let me clear here that Salesforce Lightning Component Framework is build using open source Aura framework. Open Source means something that has free availability. Whilst building Salesforce Lightning application, Aura keyword is used many times. See example below:-
Read: How to Become Certified Salesforce Developer?
Salesforce Lightning page is a custom layout that lets you design pages for the use in the Salesforce mobile app or Salesforce Lightning Experience.
Salesforce Lightning pages occupy a middle ground between page layouts and Visualforce pages. Like a page layout, Lightning pages allow you to add custom items to a page. However, these items, instead of being fields or Visualforce components, are Lightning components, which allow much more flexibility.
The structure of a Lightning page revamps for the device on which it is viewed. The Lightning page’s template divides the page into various regions-
Lightning pages are built using Lightning components—compact, configurable, and reusable elements that you can drag and drop into regions of the page in the Lightning App Builder.
You can use Salesforce Lightning page to create an application page which you can add to the Salesforce mobile application navigation list or a Lightning application’s navigation bar. An application page gives quick access to the objects and items that are most important in the Salesforce application.
You can also use a Salesforce Lightning page to create a customized record or homepage for Salesforce Lightning Experience. If you have integrated Salesforce with Microsoft Outlook or Gmail, you can create a customized email application pane.
If you have a console app, you can create a Lightning page with pinned regions to let your users view and work with records while navigating between subtabs.
Lightning pages support the following components:
Standard components are Lightning components built by Salesforce.
Available in: Group, Professional, Enterprise, Performance, Unlimited, and Developer Editions
Custom components are Lightning components that you or someone else has created. With some configuration, custom Lightning components can work in the Lightning App Builder.
Read: What is Inbound Email Service in Salesforce?
Required Editions-
Available in: Group, Professional, Enterprise, Performance, Unlimited, and Developer Editions
Third-Party Components on AppExchange
The AppExchange provides a marketplace for Lightning components. You can find packages containing components already configured and ready to use in the Lightning App Builder.
It represents a responsive grid system for the arrangement of containers on a page. A lightning:layout is a flexible grid system for arranging containers within a page or inside another container. The default layout is mobile-first and it can be easily configured to work on different devices.
Sample Code:
<aura:component implements="flexipage:availableForAllPageTypes" >
<div class="c-container">
<lightning:layout horizontalAlign="center">
<lightning:layoutItem flexibility="auto" padding="around-small">
<ui:inputSelect multiple="false">
<ui:inputSelectOption label="All Types" text="" value="true"/>
</ui:inputSelect>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<button class="slds-button slds-button_brand">Search</button>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<ui:button label="New"/>
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>
Output:
AccountList.cmp:
<aura:component controller="AccountListController"
implements="flexipage:availableForAllPageTypes,lightning:actionOverride,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:appHostable" >
<aura:attribute type="Account[]" name="acctList"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:handler name="init" value="{!this}" action="{!c.fetchAccounts}"/>
<lightning:datatable data="{! v.acctList }"
columns="{! v.mycolumns }"
keyField="id"
hideCheckboxColumn="true"/>
</aura:component>
AccountListController.js
({
fetchAccounts : function(component, event, helper) {
component.set('v.mycolumns', [
{label: 'Account Name', fieldName: 'Name', type: 'text'},
{label: 'Industry', fieldName: 'Industry', type: 'text'},
{label: 'Type', fieldName: 'Type', type: 'Text'}
]);
var action = component.get("c.fetchAccts");
action.setParams({
});
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
component.set("v.acctList", response.getReturnValue());
}
});
$A.enqueueAction(action);
}
})
AccountListController Apex Class:
public class AccountListController {
@AuraEnabled
public static List < Account > fetchAccts() {
return [ SELECT Id, Name, Industry, Type FROM Account LIMIT 10 ];
}
}
Output:
AccountList.cmp
Read: What Are The Differences Between Sugarcrm & Salesforce?
<aura:component controller="AccountListController"
implements="flexipage:availableForAllPageTypes,lightning:actionOverride,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:appHostable" >
<aura:attribute type="Account[]" name="acctList"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:attribute name="sortedBy" type="String" default="Name"/>
<aura:attribute name="sortedDirection" type="String" default="asc"/>
<aura:handler name="init" value="{!this}" action="{!c.fetchAccounts}"/>
<lightning:datatable data="{!v.acctList}"
columns="{!v.mycolumns}"
keyField="id"
hideCheckboxColumn="true"
onsort="{!c.updateColumnSorting}"
sortedBy="{!v.sortedBy}"
sortedDirection="{!v.sortedDirection}"/>
</aura:component>
AccountListController.js
({
fetchAccounts : function(component, event, helper) {
component.set('v.mycolumns', [
{label: 'Account Name', fieldName: 'Name', type: 'text', sortable: true},
{label: 'Industry', fieldName: 'Industry', type: 'text'},
{label: 'Type', fieldName: 'Type', type: 'Text'}
]);
var action = component.get("c.fetchAccts");
action.setParams({
});
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
component.set("v.acctList", response.getReturnValue());
helper.sortData(component, component.get("v.sortedBy"), component.get("v.sortedDirection"));
}
});
$A.enqueueAction(action);
},
updateColumnSorting: function (cmp, event, helper) {
var fieldName = event.getParam('fieldName');
var sortDirection = event.getParam('sortDirection');
cmp.set("v.sortedBy", fieldName);
cmp.set("v.sortedDirection", sortDirection);
helper.sortData(cmp, fieldName, sortDirection);
}
})
AccountListHelper.js:
({
sortData: function (cmp, fieldName, sortDirection) {
var data = cmp.get("v.acctList");
var reverse = sortDirection !== 'asc';
data.sort(this.sortBy(fieldName, reverse))
cmp.set("v.acctList", data);
},
sortBy: function (field, reverse, primer) {
var key = primer ?
function(x) {return primer(x[field])} :
function(x) {return x[field]};
reverse = !reverse ? 1 : -1;
return function (a, b) {
return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
}
}
})
public class AccountListController {
@AuraEnabled
public static List < Account > fetchAccts() {
return [ SELECT Id, Name, Industry, Type FROM Account LIMIT 10 ];
}
}
Output:
The aura:valueChange event is used to handle attribute value change in lightning components in Salesforce.
Component:
<aura:component implements="force:appHostable">
<aura:handler name="change" value="{!v.strText}" action="{!c.handleValueChange}"/>
<aura:attribute name="strText" type="string" default="Sample"/>
<div class="slds-box slds-theme_default">
<lightning:input value="{!v.strText}" type="text" label="Text"/><br/>
<lightning:button variant="brand" label="Update" onclick="{!c.clickIt}"/>
</div>
</aura:component>
Controller:
({
clickIt : function(component, event, helper) {
component.set("v.strText", "Changing");
},
handleValueChange : function (component, event, helper) {
alert("Changed strText " + component.get("v.strText"));
}
})
Output:
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" controller="DPLightningHandler" >
<aura:attribute name="listVehicles" type="WrapperClass.VehicleWrapper[]" />
<ui:inputSelect aura:Id="makeId" multiple="false" label="Select Make">
<ui:inputSelectOption label="Acura" text="acura"/>
<ui:inputSelectOption label="Audi" text="Audi"/>
<ui:inputSelectOption label="BMW" text="bmw"/>
<ui:inputSelectOption label="Honda" text="honda"/>
<ui:inputSelectOption label="Hyundai" text="hyundai"/>
<ui:inputSelectOption label="Mercedes Benz" text="merc"/>
<ui:inputSelectOption label="Nissan" text="nissan"/>
</ui:inputSelect><br/><br/>
<ui:button label="Find Vehicles" press="{!c.findVehicles}"/><br/><br/>
<aura:renderIf isTrue="{!v.listVehicles.length > 0}">
<aura:if isTrue="{!v.listVehicles.length > 0}">
<table class="slds-table slds-table--bordered slds-table--cell-buffer slds-max-medium-table--stacked">
<thead>
<tr>
<th><h2>Vehicle Name</h2></th>
<th><h2>Vehicle Type</h2></th>
<th><h2>Make Id</h2></th>
<th><h2>Make Name</h2></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.listVehicles}" var="veh">
<tr>
<td class="slds-truncate" data-label="Vehicle Name">{!veh.VehicleTypeName} </td>
<td class="slds-truncate" data-label="Vehicle Type">{!veh.VehicleTypeId}</td>
<td class="slds-truncate" data-label="Make Id">{!veh.MakeId}</td>
<td class="slds-truncate" data-label="Make Name">{!veh.MakeName}</td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:if>
</aura:renderIf>
</aura:component>
({
findVehicles : function(component, event, helper) {
var action = component.get("c.fetchInventory");
action.setParams({
vehicleMake : component.find("makeId").get("v.value")
});
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
component.set("v.listVehicles", response.getReturnValue());
}
});
$A.enqueueAction(action);
}
})
public with sharing class DPLightningHandler {
@AuraEnabled
public static List < WrapperClass.VehicleWrapper > fetchInventory(String vehicleMake) {
List < WrapperClass.VehicleWrapper > listVehicles = new List < WrapperClass.VehicleWrapper >();
HTTPRequest req = new HTTPRequest();
req.setEndPoint('https://vpic.nhtsa.dot.gov/api/vehicles/GetVehicleTypesForMake/' + vehicleMake + '?format=json');
req.setMethod('GET');
HTTP objHTTP = new HTTP();
HTTPResponse res = objHTTP.send(req);
system.debug('Response is ' + res.getBody());
JSONParser parser = JSON.createParser(res.getBody());
System.JSONToken token;
String text;
parser.nextToken(); // Eat first START_OBJECT {
parser.nextToken(); // Eat token = FIELD_NAME; text = postalcodes
parser.nextToken(); // Eat first START_ARRAY [
parser.nextToken(); // Eat the first object's START_OBJECT {
WrapperClass.VehicleWrapper obj;
while ( ( token = parser.nextToken()) != null ) {
if ( ( token = parser.getCurrentToken() ) != JSONToken.END_OBJECT ) {
text = parser.getText();
if ( token == JSONToken.FIELD_Name && text == 'MakeId' ) {
token = parser.nextToken();
obj = new WrapperClass.VehicleWrapper();
obj.MakeId = parser.getText();
} else if (token == JSONToken.FIELD_Name && text == 'MakeName' ) {
token = parser.nextToken();
obj.MakeName = parser.getText();
} else if ( token == JSONToken.FIELD_Name && text == 'VehicleTypeId' ) {
token = parser.nextToken();
obj.VehicleTypeId = parser.getText();
} else if ( token == JSONToken.FIELD_Name && text == 'VehicleTypeName' ) {
token = parser.nextToken();
obj.VehicleTypeName = parser.getText();
listVehicles.add(obj);
}
}
}
system.debug('listVehicles are ' + listVehicles);
return listVehicles;
}
}
public class WrapperClass {
public class VehicleWrapper {
@AuraEnabled
public String MakeId {get;set;}
@AuraEnabled
public String MakeName {get;set;}
@AuraEnabled
public String VehicleTypeId {get;set;}
@AuraEnabled
public String VehicleTypeName {get;set;}
}
}
Output:
Salesforce is the dynamic provider of CRM applications in the world. The applications developed using Salesforce Lighting are easy to interact and are screen friendly as they can be used on desktop, mobile, or in tablets. It provides out-of-the-box components, event-driven architecture, architecture-driven framework, and better optimization option as compared to the older versions of Salesforce.
A dynamic, highly professional, and a global online training course provider committed to propelling the next generation of technology learners with a whole new way of training experience.
AWS
DevOps
Data Science
Hadoop
Salesforce
QA
Business Analyst
SQL Server
Search Posts
Trending Posts
Related Posts
Receive Latest Materials and Offers on Salesforce Course
Interviews
.png)
Aug 30, 2017
773k
