Lightning components are used as new Salesforce user interface framework for developing dynamic web applications for desktop and mobile devices.
In this component JavaScript at the client-side and at the server-side is used in Apex to provide the data and business logic. In this new kind of app-centric model, JavaScript is used to modify, create, transform, and animate the user interface instead of completely replacing it in a tedious way of one page at a time. This model is fluid, exciting and interactive.
This is a CSS based framework for applying Lightning UI which helps custom components using this framework to work well with the standard Lightning experience that Salesforce is coming up with. Using this framework will ensure the custom UI looks like standard Salesforce UI when lightning experience is turned on in Salesforce.
Advantages of Lightning Components/Design System
Where Can you Use Lighting Components
We can customize and extend Lightning Experience and Salesforce1 with Lightning components.Also these components can be used in Visualforce Pages. We can add Lightning components to existing Visualforce pages and Implement new functionality using both Lightning components and Visualforce pages.
We can use Lightning Out to run Lightning components applications outside of Salesforce servers. It can be a department server inside the firewall, or even SharePoint, Node.js app running on Heroku, build your custom app with Force.com and run it wherever your users are. You can also launch lightning components from tabs, apps, and actions.
Custom Lightning components don’t work in the Lightning App Builder right out of the box or on Lightning Pages. To use a custom Lightning component in either of these places, configure the Lightning component and its component bundle so that it becomes compatible.
You can configure the component to use a custom Lightning component in Community Builder.
Before adding Lightning components to the application, first check the out-of-the-box components that come with the framework.
ResourceResource NameUsageSee AlsoComponent or Applicationsample.cmp or sample.appThe only required resource in a bundle. Contains markup for the component or app. Each bundle contains only one component or app resource.Creating Componentsaura:applicationCSS Stylessample.cssStyles for the component.CSS in ComponentsControllersampleController.jsClient-side controller methods to handle events in the component.Handling Events with Client-Side ControllersDesignsample.designRequired for components used in the Lightning App Builder, Lightning Pages, or Community Builder.Configure Components for Lightning Pages and the Lightning App BuilderDocumentationsample.auradocA description, sample code, and one or multiple references to example componentsProviding Component DocumentationRenderersampleRenderer.jsClient-side renderer to override default rendering for a component.Client-Side Rendering to the DOMHelpersampleHelper.jsJavaScript functions that can be called from any JavaScript code in a component’s bundleSharing JavaScript Code in a Component BundleSVG Filesample.svgCustom icon resource for components used in the Lightning App Builder or Community Builder.Configure Components for Lightning Pages and the Lightning App Builder
How to Create Lightning App using Lighting Component ?
Create Apex Class
In the Developer Console, click File > New > Apex Class. Specify ContactController as the class name and click OK.
-------------------------------------Apex Controller---------------------------
public with sharing class ContactController {
@AuraEnabled
public static List<Contact> findAll() {
return [SELECT id, name, phone FROM Contact LIMIT 50];
}
@AuraEnabled
public static List<Contact> findByName(String searchKey) {
String name = '%' + searchKey + '%';
return [SELECT id, name, phone FROM Contact WHERE name LIKE :name LIMIT 50];
}
@AuraEnabled
public static Contact findById(String contactId) {
return [SELECT id, name, title, phone, mobilephone, Account.Name
FROM Contact WHERE Id = :contactId];
}
}
---------------------------------------------------------------------------------------------------
Above Code Highlights:
ContactController is a controller class with methods to receive contacts (findAll), or to search contacts by name (findByName) or by id (findById).
@AuraEnabled method annotation makes a method available to Lightning applications.
A. Create the ContactList Lightning component as below:
-----------------------------Lighting Component---------------------
<aura:component controller="ContactController">
<aura:attribute name="contacts" type="Contact[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<ul class="list-group">
<aura:iteration items="{!v.contacts}" var="contact">
<li class="list-group-item">
<a href="{! '#contact/' + contact.Id }">
<p>{!contact.Name}</p>
<p>{!contact.Phone}</p>
</a>
</li>
</aura:iteration>
</ul>
</aura:component>
-------------------------------------------------------------------------
Above Code Highlights:
The controller assigned to the component refers to the server-side controller (ContactController).
The contacts attribute is created to hold the list of Contact objects returned from the server.
The Init handler is used to execute code when the component is initialized. That code (doInit) is defined in the component's client-side controller .
<aura:iteration> is used to iterate through the list of the contacts and to create an <li> for each contact in component
In component use <a href="{! '#contact/' + contact.Id }"> anchor tag to set the page hashtag to #contact/ followed by the contact id. ContactDetails component will use that hashtag to display details information every time user clicks a new contact.
B. Create the ContactList Lightning component Javascript Controller as below:
---------------------JSController---------------------
({
doInit : function(component, event) {
var action = component.get("c.findAll");
action.setCallback(this, function(a) {
component.set("v.contacts", a.getReturnValue());
});
$A.enqueueAction(action);
}
})
-------------------------------------------------------
Above Code Highlights:
This controller has a single function called doInit. This function calls the component when it is initialized.
First get a reference to the findAll() method in the component server-side controller (ContactController), and should store it in the action variable.
Call to the server's findAll() method is asynchronous, and we can then register a callback function that is executed when the call returns back.
In the callback function, we can simply assign the list of contacts to the component's contacts attribute.
$A.enqueueAction(action) sends the request the server. Also, it adds the call to the queue of asynchronous server calls.
C. Style the ContactList Lightning component
Click STYLE. Implement the following style:
------------------------CSS----------------------
.THIS p {
margin: 0;
}
------------------------------------------------------------------------------------------------------------------------------
Create QuickContacts Lightning Application and use Bootstrap to define a basic layout for the application. We Use can use any CSS like Salesforce Lightning Design System CSS, Bootstrap
1. In the Developer Console, click File > New > Lightning Application. Mention QuickContacts as the bundle name and click Submit
2. Implement the application by using the code below:
-----------------------------Lighting Application-------------------
<aura:application>
<ltng:require styles={!$Resource. bootstrap}
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Lightning Contacts</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<c:ContactList/>
</div>
</div>
</div>
</aura:application>
------------------------------------------------------------------------------------
Above Code Highlights:
The application uses Bootstrap to implement basic layout for the application
Lightning applications can use Lightning components and regular HTML markup
The link tag refers to the bootstrap stylesheet which is uploaded as a static resource
Click on Preview:
Your application is now ready and will look like this: