Salesforce Lightning Tutorial: Lightning Design And Components

This Salesforce Lightning tutorial covers various aspects of the platform such as Salesforce Lightning Design Systems, Login, Component Framework:

Salesforce is the World’s #1 CRM and has clear advantages over other CRMs.

This tutorial is about Salesforce Lightning and to understand it better, we will cover some topics like Lightning Experience, Lightning Component Framework, Lightning Design System, Lightning Connect, etc.

To begin with, let us first understand what is Salesforce Lightning.

What Is Salesforce Lightning

Salesforce Lightning is a component-based app development platform from Salesforce.com. The design simplifies the processes of business users that act conveniently for all those with no prior knowledge of the programming language. It has a collection of tools and technologies behind Salesforce’s mobile app development platform called App Cloud. It helps to boost productivity, build apps faster, and optimize operations.

Here is a video on Salesforce Lightning:

Salesforce Lightning performs the following activities:

• Boost the productivity of your business with increased efficiency of your sales and service functions.
• Run your business in a better manner by optimizing operations with the Lightning Experience.
• Enable to build apps in an easy, fast, and fun way.
• Make decisions based on insights.

>> Please refer to the link to gather further details.

From the below images, you can get a glimpse of the activities performed by Lightning.

Enhance Productivity

Optimize Operations

Build Apps Fast

Work Smart with AI

How To Login In Salesforce Lightning

Salesforce Lightning Login helps users with convenience, enhanced speed, and security of password-free logins. It requires enabling Lighting Login, assigning the required permissions to the users, and encouraging the users in the individual enrollment of the Salesforce Lightning Login.

This requires the installation of the Salesforce Authenticator app from the App Store or Google Play. Salesforce Lightning Login works not just for Salesforce Lightning but for Salesforce Classic as well. By default, all internal users are eligible for Lightning Login, but it is possible to make it accessible for all users, including the community users.

Lightning Login User permission can be used for determining the user’s eligibility. The user must navigate the following path for accessing Lightning Login:

1. Setup->Quick Find box->Enter Session Settings->Select Session Settings

2. Review Default Settings of Lightning Login

• Enable Lightning Login (Disabling the Lightning Login will take back the user to the login with password option)
• Confirm the standard session security level

Lightning Login establishes a standard security level for the user’s session–the security level or the user password method.

• Assign Lightning Login User Permissions to the user profile of the users or the permission set.

>> Please refer to Lightning Login for any further details.

Finally, the user needs to get enrolled in Lightning Login by using a mobile device for the approval of the enrollment notification.

View the notification from a Salesforce Authenticator (Version 2 or later) app, which is a two-factor authentication app to approve Lightning Login enrolment. Next, the user checks the details on the notification and then tap Approve. The app enables to scan the fingerprint and enter the print.

On completion of the enrolment, the user gets back to Salesforce. The username gets saved for future Lightning Logins by just clicking on Remember Me. However, the Authenticator allows approving/denying the Lightning login.

>>Refer Enrolment for Lightning Login for any further detail.

Salesforce Lightning Experience

Salesforce worked with another interface, immediately before the Lightning experience, and that was named as Salesforce Classic. 

Moving your business to Salesforce’s Lightning Experience creates a user experience that helps to transform your business by improving productivity and workflow and makes your jobs – easier and intuitive.

Salesforce allows the user to make the transition to the Lightning Experience while allowing to use Salesforce Classic at the same time. It makes a compelling case for decision-makers and leadership and sets your business into a transition in a well-thought way. It eliminates the older problems with a re-evaluation of existing customizations.

Here are the key benefits for the users of Salesforce Lightning Experience:

• Switch between custom-branded Apps along with efficient navigation.
• New Record Layouts that focus on what you can do.
• Visualize your data with turbocharged list views that enable the user to filter easily.
• Provide unique dashboards with components spanning across both columns and rows.
• View important data with quick-to-filter report views.
• Quickly access productivity like Notes and Recent Items in the Utility Bar.

Here is a figure that displays Salesforce Lightning Experience:

Some areas in which Salesforce Experience works well are:

#1) Opportunity Workspace

It enables your sales reps to work smarter and faster with the deals. Enabling your sales process to work well in an action-optimized workspace and customizing the coaching scripts in every step of the sales process will close the deals at a faster rate by creating records at a faster rate but with fewer clicks.

Here is an image for the opportunity workspace:

#2) Accounts and Contacts

Optimizing the layouts for accounts and contacts and organizing the content as per use case reference will help the sales reps to gather insights at a glance.

Here is an image that displays the accounts and contacts workspace:

#3) Reports and Dashboards

The users can create filters while viewing a report. The updated dashboard editor helps the users to use components for both columns and rows.

The below image displays the reports and dashboards:

>>Please refer to Salesforce Experience for further details.

Lightning Component Framework

Salesforce Lightning component framework is an open-source UI framework for web development to create single-page web apps for mobile devices and desktop devices.

There are two programming models for building Lightning components–Lightning web components and the Aura components. Lightning components comprise various resources as listed in the below chart:

Lightning web components use HTML and JavaScript for the creation of custom HTML elements. It uses JavaScript on the client-side and Apex on the server-side for the creation of single-page, dynamic web applications. The users use Salesforce CLI and the chosen code editor. On the other hand, the Aura Components use the Developer Console. The Lightning component acts as a subset of the Aura component.

First, let us delve into how to create Lightning Components.

How To Create A Lightning Component

Create a Lightning Component by navigating to the Developer Console and following the path mentioned below:

File ->New-> Lightning Component

[image source]

It comprises HTML and Aura Components supported by Salesforce. Specify ContactList as the bundle name and click submit.

The user follows the requisite steps mentioned below:

1. Create ContactList Controller Class
2. Create QuickContacts Lightning Component
3. Create ContactList Lightning Component

Create a Lightning component for displaying the list of contacts and then add the component to the QuickContacts component. The ContactList Component gets implemented as follows:

<aura:component controller="ContactListController">

<aura:attribute name="contacts" type="Contact[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<ul>
<aura:iteration items="{!v.contacts}" var="contact">
<li>
<a href="{! '#/sObject/' + contact.Id + '/view'}">
<p>{!contact.Name}</p>
<p>{!contact.Phone}</p>
</a>
</li>
</aura:iteration>
</ul>

</aura:component>

>> For further details please refer to creating a Lightning component as explained above. 

Benefits Of Lightning Web Components

Some benefits of Lightning Web Component are enlisted below:

#1) Business-ready Component Ecosystem

It creates business-ready components and makes them useful for the Lightning experience, Salesforce app, and Communities. The navigation menu allows the app users to access the components. Make use of the drag-and-drop components in the Lightning page with the Experience Builder or the Lightning App Builder, serving the purpose of customizing Lightning experience or Communities.

Moreover, AppExchange has additional components for your organization. Finally, it becomes possible to share and publish the components with other users.

#2) Out-of-the-box Components

There is no need to optimize your apps for multiple devices because the components take care of everything with no need to waste your time.

#3) Faster Development

Enable your team to work faster, with the out-of-the-box components that function well with both -mobile and desktop devices. Overall Development efficiency increases by building apps with a component for a parallel-design. Consumers view the public shape of the components as the components get encapsulated and the internal stay private.

#4) Cross-browser Compatibility

The Apps developed supports the latest in browser technologies of the likes of CSS3, HTML5, and touch events while using responsive design.

>> Please read this for further details on creating a Lightning Component.

Lightning Aura Components

Aura Components act as a programming model for Lightning Components. These components are a bundle of components.

The key benefits of Aura component are:

• Out-of-the-box components
• Fast development
• Rich component ecosystem

Sample code snippet for Aura components:

<aura:component>
<aura:attribute name="expense" type="Expense__c"/>
<aura:registerEvent name="updateExpense" 
type="c:expensesItemUpdate"/>
<!-- Color the item green if the expense is reimbursed -->
<lightning:card title="{!v.expense.Name}" 
iconName="standard:scan_card"
             class="{!v.expense.Reimbursed__c ?
                     'slds-theme--success' : ''}">
<aura:set attribute="footer"> 
<p>Date: <lightning:formattedDateTime 
value="{!v.formatdate}"/></p>
<p class="slds-text-title"><lightning:relativeDateTime 
value="{!v.formatdate}"/></p>
</aura:set>
<p class="slds-text-heading--medium slds-p-horizontal--small">
           Amount: <lightning:formattedNumber
 value="{!v.expense.Amount__c}" style="currency"/>
</p>
<p class="slds-p-horizontal--small">
           Client: {!v.expense.Client__c}
</p>
<p>
<lightning:input type="toggle" 
              label="Reimbursed?"
              name="reimbursed"
              class="slds-p-around--small"
              checked="{!v.expense.Reimbursed__c}"
messageToggleActive="Yes"
messageToggleInactive="No"
onchange="{!c.clickReimbursed}"/>
</p>
</lightning:card>
</aura:component>

Make a note of some points on Aura Component:

• Use XML mark up, using static HTML tags and Aura components.
• Use components like Visualforce developer <lightning:input> and <lightning:formattedNumber>
• The client-side controller of the component is written in JavaScript, which is clickReimbursed function in the above sample.

Lightning Design System

Salesforce Lightning Design System (SLDS) allows the Salesforce teams to use case-specific patterns for faster iteration and efficient creation of cohesive solutions. This includes all the resources to create User Interfaces that act consistently with the Salesforce Lightning principles and best practices and design languages adopted.

It enables the designers to stay focussed on user experiences, interactions, and flows and help the developers to focus on application logic, rather than focussing on the pixels.

Unlike other design systems supportive of fully functional code, SLDS supports various codebases such as React and Lightning web components.

Some features of the Lightning Design System are:

#1) Design Guidelines

Lightning Design System acts as a key resource for Salesforce partners and clients. Enhancing comprehensive design guidelines help everyone in the community with a better understanding of the system. Principle driven guidelines help to complement the existing documentation that is developer focussed.

SDLC offers the patterns and components of the Salesforce product. You can design apps and products residing within the Salesforce Ecosystem with the help of these patterns and components to provide a unified language as well as a consistent user experience.

The below image shows the core design principles followed while designing in Salesforce:

#2) Accessibility Guidelines

The foundation of your application relies on the accessible mark-up provided by SLDS. You need to follow the accessibility guidelines for the interactive components for creating accessible components. Management of ARIA roles and properties and keyboard behavior forms part of the guidelines.

The design system enables accessible components with the help of semantically correct components, which come with ARIA mark-up for correct identification. You can build accessible components starting from this mark-up. ARIA roles and semantic mark-up get based on best practices and W3C standards.

#3) Component Blueprints

Components get created with these component frameworks which are framework agnostic, accessible CSS, and HTML elements. The designers and others in the Salesforce Community build unique functional components for a range of application frameworks with the help of these frameworks.

Please navigate the following Video for further details on Lightning Design System:

>>Refer SLDS for further details.

Salesforce Lightning App Builder

Lightning App Builder is a point-and-click tool that enables the user to easily create custom pages for not only the Salesforce mobile app but also for the Lightning Experience. It also acts as a one-stop-shop for the configuration of Lightning apps.

Access the Lightning App Builder with the following step:

Quick Find Box->Lightning App Builder->Setup->Lightning App Builder.

Perform the following activities with Lightning App Builder:

• Analyze standard pages with single-page apps.
• Build dashboard-style apps that track key quarterly leads or topmost sales prospects.
• Analyze standard pages with single-page apps.
• Build dashboard-style apps that track key quarterly leads or topmost sales prospects.
• Solve a specific problem with point apps such as expense apps that enter expenses and monitor them as well.
• Create custom pages for the objects as per the user requirements.
• Create custom Home Pages, most frequently used by the users.

The Lightning App Builder helps in updating the navigation, app option, and managing the Lightning pages assigned to the app.

Salesforce provides the user with a tool like Lightning App Builder for creating a Lightning page. This is possible by the drag and drop of the Lightning components and Visualforce page into the page.

Here is an image of the Lightning App Builder:

Create App Home Page With Lightning App Builder

A home page for an app gets created with the Lightning App Builder for addition to a Salesforce mobile app or a Lightning app.

Setup->Quick Find Box->App Builder->Lightning App Builder->New->App Page->Next->Create a Label for the App Page up to 80 characters->Select Page Template->Finish

>> For further details, please refer to the link.

Lightning App Builder:

How to Add or Customize tabs on Lightning pages using Lightning App Builder?

Lightning App Builder enables the users to create, update, delete, and change the order of the tabs/tabsets for the Home pages and record in the Lightning Experience. Moreover, it allows the user to configure the tabs that appear, name them, and add components to these tabs.

>> Please refer to the details on how to add/customize tabs.

Here is a video on Lightning App Builder that provides further details:

Lightning Connect

Salesforce Connect enables the Salesforce org to access data from the external system. It acts as a framework that allows you to search, view, or modify data, located external to the Salesforce org.

There is no need for copying the data into the org, instead of that external objects come in handy for accessing real-time data, with the help of web service call-outs.

Previously, using an Extract, Transform and Lead Tools (ETL) was the only means of integrating Salesforce with external data. But this is time-consuming. On the contrary, Salesforce Connect allows the user to map the data tables residing in the external sources with the Salesforce organization’s external objects.

Salesforce Connect makes it possible to integrate tables from external sources in real-time such as Microsoft Dynamics NAV and SAP NetWeaver gateway. And all this is made possible with no need to write a single line of code. Moreover, it provides a live connection to external data rather than a copy that requires storage space and regular syncing.

Consider the Salesforce Connect in the following situations:

• Consider small chunks of data at a given point in time.
• Access data in real-time.
• You have a large amount of data, not to be copied to Salesforce org.
• While migrating your system standards and requires unnecessary data in the Salesforce org.

How Does Lightning Connect Work

Lightning Connect allows the user with real-time data access from a wide range of external data sources.

Here are the steps for creating external data sources that establish a connection with content and data, lying outside your Salesforce org:

#1) Set Up->Quick Find Box->Type External Data Sources

#2) Click on External Data Sources

Or

Click Edit (for modifying an external data source)

• Fill up the details
• Save authentication protocol
• Click Save
• Check on ‘Validate and Sync’ for the completion of the connection

Alternately,

Click on Sync after selection of tables and perform the following actions:

• Automatically create Salesforce external objects.
• Automatically create a custom field for each of the table columns with compatibility with the Salesforce metadata field type.

Here is a figure that explains the details page of external data sources:

The user can map the tables in an external system to the external objects inside Salesforce. It combines the content and data for your Salesforce org.

OData Concept In Lightning Connect

Lightning Connect uses one of the specially designed adapters for connecting to data that resides on an external system. Open Data Protocol (OData) Standard. OData is a modern REST-based protocol that helps in data integration. It defines the best practices of using RESTFUL APIs.

It not only allows you to build on business logic but creates RESTFUL APIs. Technology giants of the likes of SAP and Microsoft have already implemented OData Support, making products such as SharePoint directly accessible.

AppExchange For Components

AppExchange for Salesforce is equivalent to a leading enterprise cloud marketplace. It is a one-stop-shop that enables to extend Salesforce into any department or industry through 50,000 solutions. It drives business transformations through the in-depth expertise of 1000 consultants.

Each of the solutions is customized for Salesforce, as per your business needs. AppExchange helps you to solve any business challenges:

• Apps
• Components
• Bolt Solutions
• Lightning Data
• Flow Solutions
• Consultants

Here is a diagram of Salesforce AppExchange:

[image source]

Please refer Salesforce AppExchange for further details.

Lightning Vs Classic

>>Please refer to the link if you want further details on the comparison for some other Salesforce features.

Conclusion

Salesforce Lightning tutorial highlights the various aspects of Salesforce such as what is Salesforce Lightning, Salesforce Lightning Component, and many others. It also helps to highlight the comparison between Salesforce Lightning versus Salesforce Classic.

Salesforce Lightning is made up of the following:

• Salesforce Experience
• Lightning Component framework
• Lightning Design System
• Salesforce Lightning App Builder
• AppExchange for Components
• Lightning Connect

Further reading =>> Salesforce Lightning Interview Questions and Answers