Salesforce Lightning Component Framework

The Salesforce Lightning Component Framework is a Salesforce User Interface geared towards developing custom dynamic mobile and web applications for Lightning Experience and the Salesforce mobile platform using the architecture of a single-page application. The lightning Component framework is an excellent choice for the user interface tier for the following reasons

  • Salesforce Lightning Component Framework is based on web standards of JavaScript, HTML5, CSS3, and MVC/event-driven programming techniques.
  • A wide variety of out-of-box components help speed development and minimize debugging.
  • It has built-in hooks for using Apex on the server-side. Calls to the server are made only when absolutely necessary and data is transmitted in JSON format.
  • The Salesforce Lightning Component Framework has excellent tolling (Lightning app builder, developer console) and you can use third-party JavaScript IDEs like Sublime Text and Eclipse.
  • Desktop, tablet, and phone form factors can be supported from a single codebase in responsive design that runs on a wide variety of browsers and operating systems.
  • Salesforce Lightning Components can be deployed inside a standalone Lightning App, into the Salesforce mobile app, on Lightning Records pages, in Lightning Home pages, and used to override and extend Salesforce mobile tabs and fields.

Salesforce Lightning Component is part of a namespace, which is used to group related lightning components together. In our Salesforce organization, we should use namespace to access our lightning components. Generally in Salesforce.com, Lightning components are grouped into 8 namespaces, they are

  • Aura
  • force
  • forceChatter
  • Lightning
  • ltng
  • ui
  • wave

Before getting started with Salesforce lightning development, we must enable debug mode checkbox to troubleshoot our runtime issues using the browser’s developer tools. Check the following steps to enable debug mode.

  • From Setup, choose Platform Tools | Custom code | Lightning Components.
  • Select the Enable Debug mode checkbox and click on Save.

Salesforce Lightning Components

In lightning components, a component is a bundle of code. Lightning Components bundle contains the following files

  1. Components/Application (.cmp or .amp file) : The only required resource in a bundle. It contains markup for the component or Application. Each bundle contains only one component or app resource.
  2. Controller(.js): JavaScript functions can be called from any JavaScript code in lightning component bundle.
  3. Style(.css file): This file is used for styling the components. Style classes are encapsulated with a namespace, this namespace helpful for not conflicting with other CSS definitions that have been authored for other components.
  4. Documentation(.auradoc file): It contains a description, sample code of the component.
  5. Renderer(.js file): Clident-side renderer to override the default rendering for a Salesforce lightning componet.
  6. Design(.desing): This file enables users to design a form that enables business users to set values for component attributes from within the Lightning App builder.
  7. SVG(.svg): Custom icon resource for components used in the Lightning App builder.

 Creating new Salesforce lightning Component step-by-step

Creating Salesforce Lightning Component is very easy. Follow the steps given below.

  • To create a lightning component go Developer console | File | New | Lightning component.

When creating lightning components, configuration options are automatically added attributes to our <aura:component> tag. Make sure, we must check the Lightning page check box, this enables our component available in the Lightning App Builder.

HTML tags in Lightning Component

An HTML tag is treated as a first-class component by the framework. Each HTML tag is translated into an <aura:html> component, allowing it to enjoy the same rights and privileges as any other component. The component resource contains markup and has a .cmp suffix. The markup can contain text or references to other lightning components which declares metadata about the component.

Example:

<aura:component>

<div> Hello Prasanth </div>

</aura:component>

How to invoke Lightning Components from a CMP file

We use XHTML syntax to involve lightning components from CMP files. You can invoke Lightning components from CMP files using xhtml syntax as illustrated by the following snippet:

<aura:component>
<div>Here is a chatter feed:</div>
<forceChatter:feed type= "News· />
</aura:component>

Note that your custom components and any components that you install from an unmanaged package will have a
“c”• namespace, eg.

<aura:component>
<div>l'm invoking a custom component:</div>
<c:MyCustomComponent />
</aura:component>

Tools are available for creating Lightning Application in Salesforce.

  1. Salesforce Developer Console.
  2. Force.com IDE 2.
  3. Schema Builder.
  4. Lightning App Builder.
  5. Sublime Text 3.
  6. Cloud 9.
  7. Illuminated cloud.
  8. Welkin Suite.