32,36 €
Build, design, and style beautiful and informative applications on the Salesforce Lightning platform
Key Features
Book Description
Built on the Salesforce App Cloud, the new Salesforce Lightning Experience combines three major components: Lightning Design System, Lightning App Builder, and Lightning Components, to provide an enhanced user experience. This book will enable you to quickly create modern, enterprise apps with Lightning Component Framework.
You will start by building simple Lightning Components and understanding the Lightning Components architecture. The chapters cover the basics of Lightning Component Framework semantics and syntax, the security features provided by Locker Service, and use of third-party libraries inside Lightning Components. The later chapters focus on debugging, performance tuning, testing using Lightning Testing Services, and how to publish Lightning Components on Salesforce AppExchange.
What you will learn
Who this book is for
This book is for Salesforce developers or developers from other platforms who are familiar with HTML, CSS, and JavaScript and want to build and test Salesforce Lightning components. No knowledge of Salesforce Lightning is required.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 320
Veröffentlichungsjahr: 2018
Copyright © 2018 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Commissioning Editor: Aaron LazarAcquisition Editor: Siddharth MandalContent Development Editor: Arun NadarTechnical Editor: Surabhi KulkarniCopy Editor: Safis EditingProject Coordinator: Sheejal ShahProofreader: Safis EditingIndexer: Pratik ShirodkarGraphics: Jason MonteiroProduction Coordinator: Shantanu Zagade
First published: July 2018
Production reference: 1300718
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-78712-467-7
www.packtpub.com
Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.
Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Mapt is fully searchable
Copy and paste, print, and bookmark content
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.
In the last decade, web technologies have changed beyond anybody's prediction. There was a time when people across industries were talking about moving away from JavaScript. However, it worked the other way around. Frameworks like Angular and React became the backbone of many enterprise applications and emerged as favorite technologies to build an application.
In a nutshell, it is the JavaScript that won and established itself as a winner of this decade. It is not only used for desktop based applications, but also in mobile and server-side programming such as Node.js.
It isn't really about JavaScript, but rather the impact it has created on technology industry and workforce. Salesforce has been awarded as the most innovative company multiple times in the past several years and it wouldn't come as a surprise if we see Salesforce already ahead in the race of adopting cutting-edge technology.
One of many success mantras for Salesforce is to keep developer and admin happy. It offers powerful tools to a developer to create top-notch features and customizations, at the same time it enables Administrators to use, configure, and suggest improvements for those components.
How can we leverage the JavaScript workforce, give developers the tool they want, and how to make administrators superheroes of implementations?
Welcome to the world of Lightning Experience! Did you noticed, how many targets this innovative company shot with a single arrow?
Lightning Experience is the future of Salesforce implementations and there is no doubt in saying, Lightning Component is its soul. If you have JavaScript developers, let them work on client controller, if you have Apex developer, let them work on Server controller. Reusable Components built by developers can be used creatively by Salesforce Administrators in Record Page, Home Page, Community, Wave Dashboard and so on.
If you are new to Salesforce development or been a developer for many years working on Visualforce, you would need to skill up in Lightning Component development. Lightning Component is a blend of JavaScript, HTML, CSS, Apex, and Salesforce Platform features, and you need to make sure you got your blend right to build a delicious Lightning recipe.
I believe this book written by Mohith, would give you the right proportion of knowledge about JavaScript and Salesforce platform features to build mind-blowing components and impress your team and clients. This book contains so many tips and pointers which will open up your imagination and would get you excited!
Jitendra Zaa
Salesforce MVP and Sr. Technical Architect at IBM
Mohith Shrivastava has been building and architecting Salesforce applications since 2011, when he graduated from the National Institute of Engineering, Mysore.
He is currently a Salesforce MVP and holds multiple Salesforce certifications. He is an active contributor on Salesforce Stack Exchange Community. Mohith has authored Learning Salesforce Einstein and Salesforce Essentials for Administrators for Packt publishing. In his leisure time, he loves exploring the latest technologies and spending time with his family.
Abhishek Raj is a Salesforce consultant working at one of the Big Four consulting firms. He started his career in ISV product development. He has experience with Apex, Visualforce, Lightning, Einstein, predictive analytics, Wave, Java, and the Spring Hibernate frameworks. He has worked on multiple projects in various sectors, such as manufacturing, healthcare, consumer, Insurance, and credit services. He currently holds six certifications from Salesforce. He is a keen and active member of the Bangalore Salesforce Developer group. He is also Meritorious Alumnus of NMIMS University, Mumbai. He has reviewed Learning Salesforce Einstein by Packt Publishing.
In his free time, he loves to watch movies and explore the upcoming and the latest trends in technology.
Jitendra Zaa is a Salesforce MVP and possesses 21 Salesforce certifications. He has worked on the Salesforce platform for more than a decade now. He is also the author of Apex Design Pattern, published by Packt Publishing. You can read more about Salesforce-related topics on his blog at JitendraZaa [dot] com.
If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.
Title Page
Copyright and Credits
Learning Salesforce Lightning Application Development
PacktPub.com
Why subscribe?
PacktPub.com
Foreword
Contributors
About the author
About the reviewers
Packt is searching for authors like you
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Reviews
Introduction to the Lightning Component Framework
Lightning Experience
Lightning Application
Creating a Lightning Application
Creating tabs in Lightning Experience
Lightning Component Tabs
Lightning Page Tabs
Lightning App Builder
Lightning Utility Bar
List views in the Lightning UI
The ability to calendar data in the Date and Datetime fields
Global Actions
Publisher actions
Lightning Component architecture
The concept of web components
Lightning Component Bundle
Lightning Component lifecycle
MVC concepts in the Lightning Component framework
Setting up a Salesforce developer organization to enable the building of Lightning Components
Creating a simple hello world Lightning Component
The Lightning Design system
Creating a simple card component using SLDS 
Summary
Exploring Salesforce DX
Enabling the developer hub in your Salesforce organization
Enabling the developer hub
Installing the Salesforce DX CLI
Salesforce DX commands
auth commands
Setting a default Dev Hub for scratch Org creation
Creating a new Salesforce DX project
Configuring a scratch Org definition JSON
Configuring project definition JSON
Creating a scratch Org
Opening the scratch Org
Pulling source from a scratch Org
Push source code to a scratch Org
Conflict resolution
Ignoring files
Lightning commands
Creating a Lightning app and components
Metadata API commands
mdapi:convert and mdapi:retrieve
Converting existing managed/unmanaged package code to DX Format
Deploy command
Data import and export commands in Salesforce DX
Data export Salesforce DX command
Data import Salesforce DX command
Bulk data upsert Salesforce DX command
Limitations of bulk upsert commands
Installing the Visual Studio extension pack for DX
Developer workflow for building a Salesforce application 
Summary
Lightning Component Building Blocks
Component markup and using Lightning base components for layouts
Component definition aura:component
Access modifier
Providing a description to component
Implementing interfaces in Lightning Components
Lightning base components for layout and layout items
Lightning card base component
Example layouts using the Lightning layout and card components
Horizontal alignment using the Lightning layout base component
Vertical alignment using the Lightning layout base component 
Stretching a LayoutItem using the flexibility attribute
Creating multiple rows and controlling the size of the row in Lightning layout
Lightning layout to handle multiple devices
Nested page layout using Lightning Layouts
Understanding attributes
Using Expression syntax
JavaScript controller and helper
Wiring the client-side to the server using Apex controllers
Summary
The Lightning JavaScript API
Technical requirements
Using component get and set methods
Using the find function to locate the DOM
Introducing Locker Service
Strict mode enforcement in Locker Service
Understanding the DOM access containment hierarchy in Lightning Components 
The proxy object in Locker Service
APIs available in $A top-level functions
Exploring the $A.Util APIs
Format date/DateTime using the Aura Localization Service
Find your organization's time zone
Find your organization's local currency
Formatting dates 
Dynamically creating components using $A.createComponent()
Destroying components using the destory() function
Modifying the DOM in the RENDERER JavaScript file of the component bundle
Understanding the rendering life cycle of a component
Understanding re-rendering the life cycle of a component
Using custom labels in Lightning Components
Dynamically populating label parameters
ES6 support in Lightning Components
An introduction to Promises
Promise support in Lightning Components
Summary
Events in the Lightning Component Framework
Browser events
Capturing browser events
Event handling in Lightning base components
Application events
Creating application events
Registering application events
Firing an application event
Handling application events
Getting event attributes from a handled event
Handling capturing and bubbling events
Component events
Creating a component event
Registering a component event
Firing the component event
Handling component events
Alternate syntax to handle events raised by child components
Getting event attributes from handled events
Creating a sales LeaderBoard Lightning Application using events
Communicating between components
Passing data down the component hierarchy
Using aura:method to call child methods from parent methods
Using the aura method asynchronously
Optimal event architecture design pattern
Adding custom events to components dynamically
Summary
Lightning Data Service and Base Components
Lightning Data Service
Loading Salesforce record context data using force:recordData 
Functions available for CRUD records
Saving existing records
Creating a new record
Deleting records
Using SaveRecordResult 
Example components using Lightning Data Service
Lightning base components
An introduction to Lightning input field components
Creating an input form using the RecordEdit and Lightning input field components
Introducing events and attributes in Lightning record edit form and input field
Creating a contact edit form using the Lightning input field and RecordEditForm components
Using the Lightning output field component
The list view component 
Creating a tree view using the tree and tree grid components
Formatting output data using Lightning base components
Using the datatable component
Using Lightning input components
Using the carousel component
Summary
Using External JavaScript Libraries in Lightning Components
Third-party JavaScript libraries in Lightning Components
Attributes
Events
Integrating a third-party library into Lightning Components
Integrating the Select2 JavaScript library into Lightning Components
Integrating the MomentJs library into Lightning Components
Creating a Locker Service-compliant JavaScript bundle using webpack
Introduction to webpack
Entry
Output
Loaders
Plugins
Integrating choices.js into Lightning Components
Structuring a JS-heavy project in Salesforce DX
Creating a Locker Service-compatible bundle with webpack
ChartJs in Lightning Components
Making client-side calls to external sites using JavaScript
Communication between the Lightning main frame and iframe
Communication from the Visualforce page to the Lightning Component
Communication from the Lightning Component to the Visualforce page
Rendering a React application in a Lightning Component using Lightning:container
Rendering  reactApp using the LCC npm module in a Lightning Component
Limitations of Lightning:container
Summary
Debugging Lightning Components
Enabling Debug Mode
Salesforce Lightning Inspector 
Lightning Salesforce Inspector tabs
Component Tree
$auraTemp
Transactions tab
Performance tab
Event Log tab
Actions tab
Storage tab
Salesforce community page optimizer
Using the Chrome developer Console
Setting breakpoints in the Chrome developer Console
Pause on caught exceptions
Apex debugging
Using the Salesforce CLI to stream logs
Advanced debugging with the Replay Debugger
Summary
Performance Tuning Your Lightning Component
Storable actions
When to use storable actions?
Avoiding nested aura:if in aura:iteration
$A.createComponent() for lazy loading
Using plain old JavaScript to gain maximum performance
Events strategy for performance and ease of code maintenance
Event anti-patters that can cause a performance bottleneck
<aura:iteration> – multiple items set
Optimizing JavaScript in Lightning Components
Unbound expression bindings
Using the Lightning data service
Leveraging Lightning base components
Creating a record form, using Lightning:recordForm
Optimizing Apex code
Limiting data rows for lists
Reducing server response time, using the platform cache
Avoiding sending responses from Apex as wrapper objects
Disabling Debug Mode for production
Summary
Taking Lightning Components out of Salesforce Using Lightning Out
Lightning Out in Visualforce
Creating a Lightning dependency application
Adding Lightning Components for the Visualforce JavaScript library
Adding JavaScript to create a component on a Visualforce page
Lightning Out in a Node.js application
Creating a connected application 
Setting up a Node.js application
Creating a Lightning Out application 
Deploying Node.js application on Heroku
Lightning Out for unauthenticated users
Lightning Out limitations and considerations
Summary
Lightning Flows
Introducing Flows
Creating the Lead Finder app using the Flow builder
Running Flows in Lightning Experience
Debugging Flows
Adding custom components in Flow builder
Using asynchronous XHR calls in customized Lightning Components
Using Lightning Components as local Flow actions
Embedding Flows into a Lightning Component
Summary
Making Components Available for Salesforce Mobile and Communities
Using Lightning Components in a Salesforce mobile application
Setting up the Chrome browser to simulate the Salesforce mobile app experience
Adding a Lightning Component to the Salesforce mobile navigation
Adding Lightning Components as global and object-specific actions
Lightning Components in Community Cloud
Creating communities in Salesforce
Creating a theme layout
Creating custom content layouts
Overriding search, profile menu, and navigation in communities using customized Lightning Components
Overriding a standard search interface
Overriding a profile menu
Adding custom navigation
Summary
Lightning Navigation and Lightning Console APIs
Adding navigation support using Lightning :navigation
Introducing the Lightning Console
Utility Bar component
Page context in the Utility Bar API
Workspace API
Standard Lightning tab events in the console
Summary
Unit Testing Lightning Components
Introduction to Jasmine
Jasmine syntax and terminology
Suite
Spec
Setup and teardown
Spies
Quickstart example
LTS
Writing tests for a YouTubeSearchApp
Installing LTS
Creating a Lightning Component test via CLI
Testing for search terms rendered via two-way binding
Verifying the response by mocking the server response using Jasmine spy
Testing application events
Summary
Publishing Lightning Components on AppExchange
Namespacing Salesforce developer instances for managed package generation
The impact of namespacing Salesforce instances on the component bundle
Creating scratch Orgs with namespaces
Creating a managed package
Documenting your components using the auradoc file
Using the design file to allow admins to configure attributes
Publishing components on AppExchange
Summary
Other Books You May Enjoy
Leave a review - let other readers know what you think
The Salesforce Lightning platform is widely used today in a number of Fortune 500 companies for building applications that are used in sales, services, marketing, collaboration, and various other business areas. Salesforce provides the most popular Customer Relationship Management (CRM) system, and the demand for Salesforce developers and consultants is increasing every year. Applications built on top of the Lighting platform are cloud based, secure, and require no on-premises software installation.
Salesforce Lightning Experience is a redesigned user interface that allows users to be more productive and innovative. Lightning Experience comprises pages and layouts that can be customized using Lightning Application Builder (a drag-and-drop interface that allows administrators to build pages by dropping various components) and Lightning Components. Salesforce provides out-of-the-box Lightning components that administrators can leverage for most business needs. However, not all user interface challenges can be solved with these out-of-box components. The Lightning Components Framework allows Salesforce developers to build custom Lightning components. A Lightning component is made up of HTML (markup) and JavaScript (secured using Salesforce Locker Service) and forms a component bundle that can be placed in Salesforce Lightning Experience, Salesforce Communities, Salesforce Mobile App, Salesforce for Outlook, Chatter Publisher, and other Salesforce interfaces.
Salesforce DX allows developers to adopt source-driven development techniques. Salesforce DX simplifies developer workflows on the platform and helps to build and iterate Salesforce applications faster. Salesforce DX provides a command line interface (CLI) tool that simplifies setting up the developer environment for development, debugging, unit testing, and deploying Salesforce applications.
This book will teach you how to build custom Lightning components by using the Lightning Components Framework and leveraging Salesforce DX CLI commands. In this book, we cover the fundamentals and capabilities of the framework. The end goal of this book is to provide Salesforce developers with enough information so that they can start designing and building components on their own to meet their custom component needs.
The target audience for this book includes beginner, intermediate, and advanced Salesforce developers and architects who want to fully understand the capabilities of the Lightning Components Framework and learn about application development on the Salesforce platform.
This book can also be used by JavaScript frontend developers who are familiar with JavaScript and want to understand the capabilities and boundaries of the Lightning Components Framework. The book also covers the integration capabilities of the framework with other open source JavaScript libraries and how to take Lightning components built on the platform to outside world.
Chapter 1, Introduction to the Lightning Component Framework, introduces you to the basics of the Lightning Components architecture and tells you why you should learn about the Lightning Components Framework. The chapter also covers Lightning Experience UI capabilities and where in the Lightning Experience you can leverage custom Lightning components to customize.
Chapter 2, Exploring Salesforce DX, covers basics of the Salesforce DX CLI capabilities and commands. The chapter focuses on how to leverage Salesforce DX to create a source-driven development workflow on the platform. You will learn how to use Salesforce DX to create Salesforce applications.
Chapter 3, Lightning Component Building Blocks, teaches you how to build a custom Lightning component. This chapter covers how to write component markup, JavaScript client-side controllers and helper functions, server-side Apex code that client-side helper functions can talk to, and Lightning Base components to create layouts.
Chapter 4, The Lightning JavaScript API, covers the native APIs that are provided by the framework and the Locker Service security model for the components. This chapter also talks about differences between the native JavaScript APIs and the APIs available under Locker Service.
Chapter 5, Events in the Lightning Component Framework, teaches you the syntax for creating and firing application and component events. The chapter also covers various intercommunication patterns available in the framework for passing data between components.
Chapter 6, Lightning Data Service and Base Components, covers the syntax and capabilities of Lightning Data Service and how it simplifies fetching context data, as well as how it enables you to create, read, edit, and delete records when it comes to contextual data. You will also explore how the Lightning Data Service can make custom components react to data changes in the UI. This chapter also teaches you how to work with Salesforce-provided base components.
Chapter 7, Using External JavaScript Libraries in Lightning Components, covers how you can integrate third-party libraries, such as Chart.js, Moment.js, and ReactJS with the Lightning Components Framework. You will also learn about the debugging procedure in the case of a library not working under Locker Service, and you'll discover how to use open source JavaScript bundlers, such as webpack, to make them Locker Service compatible.
Chapter 8, Debugging Lightning Components, teaches you about the debugging techniques for client-side JavaScript controllers and helpers using Chrome Developer Tools, and debugging techniques for Apex using the new Apex Replay Debugger.
Chapter 9, Performance Tuning Your Lightning Components, covers how you can improve the performance of your Lightning components with techniques such as using storable actions, platform caching, and paginating data rows that are returned from the server. You will learn about the Chrome extensions and plugins available for figuring performance bottlenecks.
Chapter 10, Taking Lightning Components out of Salesforce Using Lightning Out, teaches you how to work with the Lightning Out technology. You will learn about the steps and processes required to take your Lightning components outside the Salesforce platform.
Chapter 11, Lightning Flows, teaches you how to use Lightning components with the Salesforce Flow builder. You will learn about how components can pass data to flows and how you can embed flows inside Lightning components.
Chapter 12, Making Components Available for Salesforce Mobile and Communities, teaches how to use Lightning components in Salesforce mobile applications (Salesforce1), and Salesforce Community Builder. We will learn how to customize communities using custom theme layouts and custom navigation. You will also learn how to override profile menus and create your own templates.
Chapter 13, Lightning Navigation and Lightning Console APIs, covers how to work with the Navigation API, the Workspace API, and the Messaging API for the Utility Bar component. The chapter also teaches you about the options available for customizing components in Salesforce Console.
Chapter 14, Unit Testing Lightning Components, teaches you how to write unit tests for Lightning components using the Lightning Testing Service. You will learn about Jasmine and how to leverage Jasmine with the Lightning Testing Service to write unit tests for the custom Lightning components.
Chapter 15, Publishing Lightning Components on AppExchange, teaches you how to publish components on Salesforce AppExchange so that components can be installed in multiple Salesforce instances.
The book assumes that the reader has had some exposure to programming. The book also assumes that you are familiar with the Salesforce Apex programming language, JavaScript fundamentals (especially the concepts of variables, callbacks, and promises), HTML, and CSS. The book expects that you are familiar with Salesforce administration capabilities, such as creating objects and fields, and navigating through Salesforce.
To get most out of the book, sign up for a promotional Salesforce Org with Salesforce DX enabled at https://developer.Salesforce.com/promotions/Orgs/dx-signup, and a developer Org at https://developer.Salesforce.com/signup, and try all the code snippets discussed in the book by creating scratch Orgs for every chapter. Instructions for creating scratch Orgs, with the accompanying code, can be found in the following GitHub repository: https://github.com/PacktPublishing/Learning-Salesforce-Lightning-Application-Development.
The book uses the following software, all of which is freely available:
Salesforce DX CLI (
https://developer.Salesforce.com/tools/sfdxcli
)
Visual Studio Code editor (
https://code.visualstudio.com/
)
Salesforce DX plugin for Visual Studio from the Visual Studio marketplace
(
https://marketplace.visualstudio.com/items?itemName=Salesforce.Salesforcedx-vscode
)
You can download the example code files for this book from your account at www.packtpub.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
Log in or register at
www.packtpub.com
.
Select the
SUPPORT
tab.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box and follow the onscreen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR/7-Zip for Windows
Zipeg/iZip/UnRarX for Mac
7-Zip/PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Learning-Salesforce-Lightning-Application-Development. In case there's an update to the code, it will be updated on the existing GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://www.packtpub.com/sites/default/files/downloads/LearningSalesforceLightningApplicationDevelopment_ColorImages.pdf.
Feedback from our readers is always welcome.
General feedback: Email [email protected] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packtpub.com.
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.
At the heart of Lightning Experience are unified design systems across various Salesforce offerings. The Lightning Design System used by Salesforce for all its product offerings is an open source CSS framework and a set of design patterns. The Lightning Component framework is a Salesforce UI framework that is based on the concept of web components and glues the client and server together. The framework is built on the open source Aura framework. The Lightning Component framework uses HTML, CSS, and JavaScript on the frontend and connects to Salesforce objects and business logic on the server via a strongly typed object-oriented language (similar to Java) known as Apex. Lightning Components are the building blocks that power the Lightning Experience application. A 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:
Lightning Experience, like Salesforce Classic, consists of applications (Apps), Tabs, 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.
The App Launcher allows you to switch between different Salesforce applications.
The following screenshot shows the App Launcher. All of the applications are represented by cards:
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 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 App button, and if the application is Classic, you can upgrade it to a Lightning Application.
To create a Lightning Application, follow the steps from the App Launcher:
Click on the
New Lightning App
button.
Follow the prompt and enter the name of the application (note that the developer name gets auto-populated once you click on the
Developer Name
field), description, and configure
App Branding
:
Choose between a console app and a standard app.
Optionally, select
Utility Bar
items. 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
Navigation
tab:
Select the profiles that the application will have access to:
The creation of a Lightning tab can be achieved by searching for Tabs in the Setup menu. The navigation path for the creation of a tab is Setup | User Interface | Tabs.
The following screenshot shows the tab creation screen:
A custom Lightning Component can be assigned as a Lightning Component tab. The component must implement a force:appHostable interface for it to appear as a Lightning Component tab.
Lightning page tabs are created from a Lightning page using the App Builder.
From the 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
Description
App Page
Used to create an app's navigation for Lightning Experience and Salesforce 1
Home Page
Used to customize the
Home Page
of Lightning Experience
Record Page
Used to customize the
Record Page
of Lightning Experience
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:
Lightning App Builder allows administrators to drag and drop various standard and custom components to create a Lightning page.
The following screenshot shows the Lightning App Builder screen that administrators use to create a Lightning page:
Once a Lightning page is saved, the activation screen provides options to configure the profile for the page.
On the 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
