Salesforce Classic, also known as Aloha, has been around for a few years. Reimagining the user experience was essential to making the Salesforce application modern, efficient, and more user-friendly. Lightning Experience provides Salesforce users with a much better user experience than Aloha. It's more flexible and easy to customize the UI and the entire UI has been re-imagined to make sales and support representatives more efficient and productive.
Lightning Application page consists of one or more Lightning Components, which are arranged by Salesforce system administrators to provide end users with a 360-degree view of their Salesforce application data and enable them to be more efficient by providing easy mechanisms to take necessary actions on data.
If you have a background in either the old-school Salesforce way of building applications (using Visualforce for the frontend and Apex for the backend) or you are new to development on the platform, this book aims to cover both the depth and breadth of the Lightning Component framework. The end goal is to make you a fearless Salesforce Lightning developer.
The aim of this chapter is to answer why and how important it is to be familiar with the Lightning Component framework and start learning how to build Lightning Components and Lightning Applications.
In this chapter, we will be covering the following topics:
- Lightning Experience
- Lightning Component framework architecture
- Setting up a Salesforce developer organization to enable the building of Lightning Components
- The Lightning Design system
Lightning Experience is new Salesforce user interface. As a developer, to explore Lightning Experience, all you need is a free Salesforce developer instance. You can sign up for a developer instance at https://developer.Salesforce.com/signup.
If you already have one of these instances, you can switch to Lightning Experience. To see how to switch to Lightning Experience from Classic, please check out the following screenshot:
The above shows how one can switch to Lightning Experience From Classic Salesforce
In some instances, one would need to enable Lightning Experience. Once Lightning Experience is enabled, you will notice the
Switch To Lightning Experience link.
Lightning Experience, like Salesforce Classic, consists of applications (
List views, and
Detail Record View pages. Additionally, beyond all these, the Lightning UI provides the following additions:
- App Builder for Salesforce administrators to drag and drop Lightning Components
- Lightning Utility Bar (located at the footer)
- The ability to create Kanban views
- The ability to calendar custom objects
Let's examine each of these views with some screenshots and further explore the various ways a Salesforce administrator can customize them with Lightning Components.
Custom Lightning Components can also be installed by administrators from the Salesforce application store, known as AppExchange. To explore the components available on Salesforce AppExchange, visit https://appexchange.Salesforce.com/components.
App Launcher helps to switch between apps
The setup link for Lightning Experience takes you to the standard
Setup page for Salesforce administrators to execute admin-related tasks. The following screenshot shows the
The above shows how one can navigate to Setup Screen from the Setup Menu
Once in the
Setup menu, find
App Manager from the search box. A new Lightning app can be created using the
New Lightning Appbutton, and if the application is Classic, you can upgrade it to a Lightning Application.
- Click on the
New Lightning Appbutton.
- Follow the prompt and enter the name of the application (note that the developer name gets auto-populated once you click on the
Developer Namefield), description, and configure
- Choose between a console app and a standard app.
- Optionally, select
Utility Baritems. Utility bars are used to carry quick functionalities that need to be accessed quickly, such as taking notes during sales calls, or quickly finding contact details when a service representative is on a call with a customer.
- Select the
- Select the profiles that the application will have access to:
The following screenshot shows the tab creation screen:
The above screenshot shows Custom Tab Creation Screen In Set Up Menu
The creation of
Web Tabs, and
Tabs is very similar to in Salesforce Classic, and they appear as navigation based on the profile and application assigned.
Setup menu, navigate to
User Interface |
Lightning App Builder. The screenshot that follows shortly shows the navigation path for finding the
Lightning App Builder.
There are three different types of Lightning pages, explained in the following table:
Lightning Page Type
Used to create an app's navigation for Lightning Experience and Salesforce 1
Used to customize the
Used to customize the
The following screenshot shows the selection options when choosing the type of Lightning page:
A Lightning page comprises multiple Lightning Components. You can use a combination of standard Lightning Components, custom-built
Lightning Components, and components installed from Salesforce AppExchange.
There are also multiple options to choose the type of layout for a Lightning page. The following screenshot shows the various options:
The following screenshot shows the Lightning App Builder screen that administrators use to create a Lightning page:
The above screenshot shows Lightning App Builder Screen
Once a Lightning page is saved, the activation screen provides options to configure the profile for the page.
Record Page, the assignment configuration can be understood with the help of the following screenshot:
Clearly, one overrides the other.
ORG DEFAULT is the top level, followed by
APP DEFAULT, and then by
APP, RECORD TYPE, AND PROFILE.
In a Lightning Application, you can add Lightning Components to the horizontal footer. This can be very useful for adding productive tools such as a simple calculator, reports, recent items, a Computer Telephony Interface (CTI) softphone, and any other quick access tools that your sales or support representatives might find useful.
To make a Lightning Components available as a utility, the component must implement the
The following screenshot shows how you can edit a Lightning Application from the
App Manager and add a
Utility Bar to a
The horizontal footer is where Components added to the Utility Bars are displayed. You can control the height and width of utility components, and their ability to load in the background.
The following screenshot shows a utility Component added to a sales application:
List views in Lightning Components are similar to those in Salesforce Classic, but with some additional capabilities, such as creating a Kanban view, using quick charts to display data in graph format, inline editing, adding filters, sorting, and the ability to take mass actions.
In List views, currently, there is no way to overwrite an object List view with a custom Lightning Components.
The following screenshot shows functionalities present on the List view that can help end users to visualize data and perform actions on it:
The above Screenshot shows the All Opportunities List View
Note that the
View buttons can also be overridden with a custom Lightning Component. To override these standard buttons and views, the navigation path is
Object Manager | <select object> |
Button, Links, and Actions. The following screenshot shows how you can override the
(a similar screen appears for other overrides):
The above screenshot shows how you can override New button on Account with a Custom Lightning Component
Lightning Experience provides end users with the ability to calendar any object. The following screenshot shows how you can use the
Calendar tab to calendar data across objects. The user can follow the prompts and select
Field for Start and
to Display to create a calendar:
You can also create a new custom global action by using a custom Lightning Component. The navigation path from set up manager page is
The following screenshot shows how you can add a custom
Global Action using a Lightning Component:
To create a publisher action, you can use the
Object Manager tab from the
Setup menu. The navigation path is
Object Manager | <select object>|
Buttons, Links, and Actions.
The following screenshot shows how you can create a publisher action for an
Account object using a custom Lightning Component:
The Publisher Action also needs to be configured based on the page layout. This can be achieved via
Object Manager. The following screenshot shows how you can configure a custom publisher action:
The Screenshot shows Page Layout Editor In Lightning Experience
In a traditional Classic Salesforce UI, every time a user clicks a link, an HTML page is loaded from the server. Even for small interactions, the whole web page or tab needs to be reloaded.
Lightning Experience is based on the concept of a Single-Page Application (SPA). In SPAs, once the page is loaded, for any other subsequent request of data from the server, an Ajax callout is made and the page is re-rendered with new data. The aim is to avoid the whole page refreshing.
The following diagram helps to visualize the difference between a single-page architecture and a traditional web page rendering mechanism:
To understand how web components work, let's consider the following image. This shows how a page can have multiple components. It's also important to note that, since each of the components can consist of data from a third party, and if components from different namespaces can scrap data, it can diminish data security. Hence, Salesforce has a security mechanism known as Locker service to prevent data from being accessed.
A Lightning page can have multiple components. They can be as small as a button component or can consist of components from different namespaces and different vendors. A component is a reusable unit and can be reused in Lightning Experience and Salesforce 1. To make these components interact with each other, the framework provides events. We will explore Lightning events in later chapters.
helperand controller (
helperfile is used to keep all the reusable code for the component.
- Apex controller (
.cls): This is not a part of the bundle, but every component that uses Salesforce data uses a server-side controller to fetch and post data to the Salesforce servers.
In the last section of this chapter, we will create a Lightning Component using the Salesforce
Developer Console. In Chapter 3, Working with Lightning Component Building Blocks, we will dig deeper into each of these files and explore how to build a functional component for Lightning Experience.
A basic understanding of the sequence of steps that takes place when a Lightning Component communicates with a client and a server will help a great deal before we dive deep into how to build a Lightning Component.
The following diagram shows how a Lightning Component works between the client and server:
The key things to note from the previous diagram are as follows:
- A user action instantiates the component and an init event is raised
helperfunction to perform any server-side action
- The Apex controller method is invoked from the
callbackfunctions are invoked
The Lightning Components framework follows the Model, View, Controller (MVC) paradigm. The component file provides the view layer, the JS controller and
helper files provide the controller part, and the controller interacts with Salesforce server via Apex. Apex connects to the Salesforce database, which acts as the Model.
The following diagram illustrates how the Lightning Component framework is based on the MVC paradigm:
If you have not signed up for a Developer organization yet, you can get one for free at https://developer.Salesforce.com/signup
My domainis a necessary step, and if you have not enabled it, then it's not possible to test your Lightning Component. To enable
My domain, the navigation path is
My Domainis enabled:
The above screen is for deploying My Domain to users
- Disabling caching for development purposes is very important. Lightning Experience performs caching to improve performance, and this may interfere with the testing of Lightning Components because your code changes might not immediately reflect upon page reload.
- The navigation path to disable caching is
This is how you can disable persistent cache in salesforce environment for Lightning Component development Purpose
The simplest way to create a Lightning Component is to use the Salesforce
Developer Console. In later chapters, we will get familiar with source-driven development and the use of an Integrated Development Editor (IDE). For now, let's use the Salesforce
- Open the Salesforce
- Use the
Filemenu to create a new
- Name the component. Let's name it
- Enter the following code in the component markup and save it (command + S):
<aura:component > HelloWorld </aura:component>
- Let's test this on the browser. To test this, we will need to create a
Lightning Application. Go to the
Filemenu, as we did in step 2, to create a
Lightning Application. Let's name the application
HelloWorldApp, enter the following code, and save it (command + S). Notice we have used the
HelloWorldcomponent in the
aura:applicationtag to reference the component.
<aura:application > <c:HelloWorld/> </aura:application>
- Click on
Previewin the application and make sure the browser renders
- You will see that there was a unique URL generated as
Salesforce_domain/c/HelloWorldApp.app. Notice that
cis the default namespace. For a managed package application, your organization may have a namespace and then the namespace is used in the URL generated instead of
c. Also, note that
Salesforce_domainis the domain name of your Salesforce instance. The following screenshot shows how the component markup is rendered on the browser:
A real-world application involves UI widgets such as lists, tables, cards, modal, and many more. For its Lightning Experience UI, Salesforce uses a common design pattern, which is an open source project known as the Lightning Design System. You can read more about the Lightning Design System, and the patterns and components provided from the official documentation located at https://www.Lightningdesignsystem.com.
Lightning Components can use the styles provided by the Lightning Design System. Let's modify our
HelloWorld component to display
HelloWorld in a card format, using the card components provided by the Salesforce Lightning Design System (SLDS).
- To open the existing Lightning Component, in
Developer Console, use
Open Lightning Resource, search for the
HelloWorldcomponent, and select
- Copy the code that is in the SLDS card component from SLDS (https://www.Lightningdesignsystem.com/components/cards/).
- Paste the markup as it is on the
HelloWorldcomponent file. You will get an error, as shown in the following screenshot:
Error when you try using SVG tags in component markup
- The error is because of the
SVGtag (we will see how to use
SVGtags in later chapters). Let's remove the highlighted portion for now to allow the save operation. The complete code for the component is as follows:
- Also, to make sure SLDS is imported into the shell application for testing, we will need to extend the application to use the
force:sldsbase component. Let's modify our
<aura:application extends="force:slds"> <c:HelloWorld /> </aura:application>
- Let's preview the application and see the SLDS card in the browser. The following screenshot shows the results rendered on the browser:
If you drag these components into the Lightning App Builder, the SLDS will be automatically imported by Salesforce, but for the application created using
The preceding is a simple demonstration of how to use the Salesforce SLDS in Lightning Component Framework. The Lightning Component framework is pretty powerful and provides many components and patterns. As a designer, you can build a complete application using the component set provided. Through this book, as we move ahead, we will use the SLDS extensively to build the UI for our components.
Now that we are familiar with Lightning Experience, the Lightning Component framework architecture, and the Lightning Design System, we are ready to dive deep and explore the Lightning Component framework further.
Let's also address the question of why we should invest time in learning this framework. The primary reason for learning this framework is that to customize Lightning Experience or Lightning pages, we will need to build custom Lightning Components. Also, as we will see later, the Lightning Component framework can be used to build Salesforce communities. It can also be used to build chatter extensions, Salesforce extensions for Outlook, and extensions in other Salesforce products.
In the next chapter, we will explore how to use Salesforce DX and an IDE to set up our development workflow for source-driven development.