• Articles
  • Tutorials
  • Interview Questions

Salesforce Lightning Components - A Comprehensive Guide

Table of content

Show More

Watch this video on Salesforce Training for Beginners:

Video Thumbnail

What are Salesforce Lightning Components?

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.

Get 100% Hike!

Master Most in Demand Skills Now!

Using Salesforce Lightning Components

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

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.

Considerations for Use

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.

Enroll now in Salesforce Classes in Nagpur to learn more about Salesforce concepts

Lightning Component Bundle

Lightning Component Bundle

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.

become a salesforce expert

Components in Flow

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:

Component Functionality
Advanced Navigation Button (GravityLab) There are 12 different features which also include styling and quick actions.

 

AgentScript Call Scripting This component is used for adding high visibility scripting elements.

 

Barcode Scanner Using this component, you can easily scan different types of barcodes using a flow and the Salesforce Mobile App or the Mobile Publisher, etc. for communities in Flow screens.

 

Carousel The component lets you display a set of slides in a constantly playing carousel inside a screen flow.
Confetti Used for blasting confetti on a screen.
Controllable Display Text Use this component to control the look and feel of your display text and also customize the underlying URLs

 

Copy to Clipboard Button You can copy the provided content into the system clipboard using this component. Also, it allows a user to copy and paste the provided content in a different location on their computer.
Custom Footer The component lets you easily change the labels on your footer buttons
Custom Headers, Banners, Formatting, and More for your Flows Using these components, you can make your flows look almost like a Salesforce Standard Page Layout. You also have the option to display customizable headers with icons, text, links, etc. in communities, home/record pages. Also, you can display customizable headers in flow screens.
Custom Metadata This component of Flow allows the users to create CMDT in a Flow using a CSV File. Also, you can create and/or update custom metadata type records using CSV and Flow.
Datatable Use this component to insert a table containing rows and columns into your flow screen. You have the option to select rows and then act on them.
Detect And Launch The ‘Detect and Launch’ component helps to launch a screen flow when a record is changed

Also, check out the blog on types of flows in Salesforce.

Advantages of Salesforce Lightning Components

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.

Disadvantages of Salesforce Lightning components

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.

Learn more about SalesForce Automation System in this insightful blog now!

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.

Conclusion

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.

To learn in-depth about Salesforce, sign up for an industry-based Salesforce Course.

 

Course Schedule

Name Date Details
Salesforce Certification 09 Nov 2024(Sat-Sun) Weekend Batch View Details
16 Nov 2024(Sat-Sun) Weekend Batch
23 Nov 2024(Sat-Sun) Weekend Batch