Salesforce Lightning Components - A Comprehensive Guide

Watch this video on Salesforce Training for Beginners:

The Salesforce Lightning Components are nothing but user interface (UI) frameworks that can be used by salesforce developers for building interactive desktop applications and mobile technologies. The Salesforce Lightning components can be reused and are self-contained too. Basically, the lightning framework was created by Salesforce to develop endless applications and technologies. A few of the common features of Salesforce Lightning components are as below:

• These lightning components have ‘.cmp’ as their extensions.
• The Salesforce Lightning component framework uses the concept of ‘web components’.
• The languages used for building the Salesforce lightning apps are Apex, Html, CSS, and JavaScript.

Salesforce Lightning Components can be used to build stand-alone applications which can also be hosted on Salesforce. The lightning framework is also being used by the Salesforce CRM for handling high demand and streamlining processes between businesses, clients, and IT. This has been possible only because lightning components can be used to customize the Salesforce environment in many different ways.

Now, let us learn how to create Salesforce Lightning Components.

The below steps can be used for creating Salesforce Lightning Components:

• First, you need to log into your Salesforce developer account.
• After logging in, move the cursor to Developer Console and select.
• After navigating to the Developer Console, go to File—> New —> Lightning Component.
• Enter a desired name for the lightning component.
• Enter a description of the component and click on the Save option.
• Once saved, add the configurations to the saved component. Please note that you have the liberty to select multiple options in the Component Configuration section.
• Finally, click on ‘Submit’ to create the lightning component.

Salesforce Lightning experience is a new age, prompt, and intelligent user interface to build modern enterprise-grade solutions. It has been built by using the Salesforce1 Mobile App technology and combines both Lightning Designing System (LDS), Lightning app builder, and Lightning Components. Salesforce Lightning experience has also proved to be a  productive user interface for Sales and Support teams across Salesforce.com.

The sales teams have been benefited in a whole new way as they can aim at more deal closures. The lightning experience has helped them close deals faster and sell quicker through salesforce lightning components. Also, Salesforce has now synced the desktop Salesforce Lightning Experience with mobile Salesforce1 to help the sales representatives search for potential clients.

Now let us look at some of the features of the Salesforce Lightning experience:

• As already discussed, the Salesforce Lightning experience is a new age and intelligent UI.
• It helps the sales representatives complete their routine tasks in time.
• Lightning Experience is built with the Salesforce1 Mobile App technology.

If you have been working with Visualforce, it will be a major decision for you to make a switch to Salesforce Lightning. Yes, it is indeed true that performing tasks like rendering PDFs from a page, etc., is possible with Visualforce. But not to forget, Salesforce Lightning, being a modern user interface, has a lot of potential. In this section, we have jotted down some of the considerations for using Salesforce Lightning that might help you in your decision for the switch:

• In your decision, you should consider using Lightning Experience. In fact, looking at the combined advantages of both Lightning experience and Lightning components, we recommend you to use both together.
• As for mobile development, we only recommend using Lightning components. Now, why so? While using a mobile device, it is possible that you end up calling the server each time a user presses a button. To avoid and handle this situation, it is advisable to use Lightning components.
• While you were using Salesforce Classic, you must have had the chance to build at least one stand-alone Lightning App. We also recommend including the Lightning App Builder to create apps with standard components. As an alternative, you can also use the Developer Console to create apps with both standard as well as custom components.
• You must definitely try Screen Flows to guide your users through the business processes. By using Screen Flows, you can easily customize the display, feels, and functionalities of your flow’s screens. Also, for further enhancement, add Aura components to the flows.

A Lightning Component Bundle is a set of all the necessary resources related to a component such as javascript controller, javascript helper, renderer, CSS styles, etc. Following explained are the various resources of the Lightning Component Bundle:

• Helper
• Component
• Controller
• Renderer
• SVG
• Style
• Design

Helper

Helper consists of the javascript code for the component and its function is to segregate the calls to the server. Helper is reusable as its defined methods can be called from the controller and the renderer. These methods are written in the helper and can be called multiple times.

Component

Component consists of both Html codes and some lightning tags.

Controller

The Controller contains the javascript code for the component. It is required for calling the action events which are declared in the lightning component. The dolnit method is called before the Html content is loaded, though dolnit is not always required.

Renderer

The Renderer carries the code that you need to execute before or after your component elements are rendered. The renderer also allows you to make calls to the Helper methods. There are four types of rendering behavior. They are-  Render, AfterRender, Rerender, and Unrender.

SVG

SVG ( Scalable Vector Graphics), is a resource used in Lightning App Builder or Community Builder.

Style

The ‘Style’ resource consists of the custom style classes which you will be using in your component.

Design

For creating attributes to be used at the design time, you have to use the ‘Design’ resource. These attributes are used while you are working on the Lightning App builder tool.

Flows in Salesforce are effective Salesforce tools used in the automation of many business processes. Also, no custom code usage is required while working with Flows. Flows in Salesforce are also known as Visual Workflows. The various components in Flow are discussed below along with their functionalities:

The advantages of Salesforce Lightning components are as follows:

• It lets developers use a standardized JavaScript framework. Infact, the limitations of Visualforce do not affect the usage of JavaScript framework if Salesforce Lightning components are used.
• It also permits users to create customized pages and functions without the interference of any third-party framework or vendors.
• One of the biggest advantages of Salesforce Lightning Components is the ‘Responsiveness’ , i.e. it can fit any device.
• Allows reusability of resources.
• The results are faster while responding to user activities, messages, and other events. This is why it is also referred to as highly event driven.

The limitations of Salesforce Lightning Components are as below :

• Salesforce Lightning components take a lot of time when it comes to learning. It actually has a higher learning curve when compared to Visualforce ( the traditional framework)
• Working with Salesforce Lightning Components can be complex and difficult sometimes.
• As Salesforce Lightning Components is absolutely a new concept, there are still more new features yet to be supported by it. It does not support all the features yet.
• The number of out-of-the-box components is still very low, the reason being maybe it is new.

Salesforce components

• TAB Menu – In this all the tabs are arranged in a row.
• All TAB Menu – In this we can find all the tabs available in salesforce.com.
• More TAB Menu – In this, we can find more tabs available on salesforce.com.
• User Menu – This is available at the top with a username. By using this component we can change our profile setting or my settings.
• Sidebar Menu – In this, we have different sections like build, monitor, jobs, logs.
• Application Menu – It allows shuffling between the applications.
• Search Menu – It helps to search in Salesforce.

In this blog, we talked about Salesforce Lightning components, what they mean, Salesforce Lightning experience, considerations for use, and more. Lightning Components may be new to you. But they have helped the Salesforce platform become more accessible, flexible, and easier to utilize. This is the importance of the Salesforce platform and the Lightning components. Hence, if you are looking to optimize the user experience and build a faster web page, Salesforce Lightning Web Components should definitely be the first thing to cross your mind.