Learning Salesforce Lightning Application Development

Build and test Lightning Components for Salesforce Lightning Experience using Salesforce DX

Mohith Shrivastava

• Publisher: Packt Publishing
• Year: 2018
• Print ISBN: 9781787124677
• eBook ISBN: 9781787122314
• Edition: 1
• Topic: Business
• Subtopic: Business Intelligence
• Index: Business

Build, design, and style beautiful and informative applications on the Salesforce Lightning platform

Key Features

• Build and Test Lightning Components that enhance application usability and adaptability
• Apply Security Best Practices to your Custom Lightning Components
• Design Lightning Components for Salesforce UIs such as Lightning Pages, Salesforce 1 Application, Communities, and more.

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

• Understand Lightning Components architecture
• Learn Locker security best practices
• Debug and Improve performance of your Lightning Components
• Use third-party libraries along with Lightning Component Framework
• Learn how to publish Lightning Components on AppExchange
• Use Lightning Out to take your Lightning Components outside the Salesforce platform

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.

Using External JavaScript Libraries in Lightning Components

Lightning Component framework has a rich set of JavaScript APIs that you can use to build client-side logic. However, there are a lot of open source libraries and frameworks that provide rich functionalities but can take a considerable amount of effort to rewrite using Lightning Component framework's native JavaScript APIs. One example of such a situation is if you are looking to build charts with Salesforce data, then building all the CSS and client-side JavaScript from scratch can consume a lot of time. Instead, you can import libraries such as ChartJs (https://www.ChartJs.Org/), HighCharts (https://www.highcharts.com/), or D3 (https://github.com/d3/d3/wiki/Gallery) to meet charting requirements with minimal code and without having to engineer everything from scratch.

Another example is using libraries such as jQuery to make client-side HTTP callouts. Similarly, if you already have a single-page application built using frameworks such as React or Angular, you can use the Lightning:container component to securely host your single-page application. Not all open source JavaScript libraries will be compatible with Lightning Components because of the Salesforce Locker Service that is in place for Lightning Components, to provide additional security. Therefore some libraries may require some manipulations before you can get them working under Locker Service.

The aim of this chapter is to show how to integrate external third-party libraries inside Lightning Components and test to make sure they work under Locker Service. We will be taking some well known third-party libraries such as jQuery, ChartJs, MomentJs, and many more to demonstrate the approach of using external libraries inside Lightning Components.

In this chapter, we will cover the following topics:

• Using third-party JavaScript libraries in Lightning Components
• Using the ltng:require tag
• Creating a Locker Service-compliant JavaScript bundle using webpack
• Examples of building custom components using ChartJs and MomentJs
• Rendering a React application in a Lightning Component using a Lightning:container

Third-party JavaScript libraries in Lightning Components

Salesforce Lightning Component framework provides the ltng:require tag, which allows you to add one or more JavaScript files referenced from Salesforce static resources to Lightning Components. When you use the ltng:require tag, the JavaScript loaded has the ability to manipulate the DOM within the component's boundaries.

In this section, we will take a third-party JavaScript library called flipclock.js to build a Lightning Component that displays a flipclock. Note that flipclock.js is completely compatible with locker and hence we do not need any modifications to the original library source code. Later, in the Creating a Locker Service-compliant JavaScript bundle using webpack section, we will take an example where libraries are not compatible with locker and understand the general process to make them compatible with locker.

Before we deep dive into its usage, let's look at some of the attributes and events provided by the ltng:require tag.

Attributes

The following table shows the definition of each of the attributes available on the ltng:require component:

Attribute name	Attribute type	Description
body	Component[]	The body of the component. In markup, this is everything in the body of the tag.
scripts	String[]	The set of scripts that will be loaded in dependency order.
styles	String[]	The set of style sheets that will be loaded in dependency order.

Events

The following table shows the definition of each of the events available on the ltng:require component:

Event Name	Event Type	Description
afterScriptsLoaded	COMPONENT	Fired when ltng:require has loaded all scripts listed in ltng:require.scripts
beforeLoadingResources	COMPONENT	Fired before ltng:require starts loading resources

Integrating a third-party library into Lightning Components

In this section, we will take a third-party JavaScript library, flipclock.js (http://FlipClock.js.com/), and build a Lightning Component that displays a clock and can be used as a timer.

The example that we will be using to build a Lightning Component is shown in the following code snippet:

<html>
 <head>
 <link rel="stylesheet" href="../compiled/flipclock.css">

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 <script src="../compiled/flipclock.js"></script> 
 </head>
 <body>
 <div class="clock" style="margin:2em;"></div>

 <script type="text/javascript">
 var clock;

 $(document).ready(function() {
 clock = $('.clock').FlipClock({
 clockFace: 'TwentyFourHourClock'
 });
 });
 </script>

 </body>
</html>

We are going to approach this step by step, and these steps apply to integrating any third-party libraries into a Lightning Component:

1. Create a static resource hosting a third-party library: The first step is to download the library to your local machine and upload it to static resource. Note that due to the Content Security Policy, you cannot use JavaScript hosted on CDN inside Lightning Components and it is always recommended to upload to static resource. Any dependent JavaScript should be referred to from the static resource and can be loaded in order. The scripts attribute allows us to load multiple JavaScript files in order. In our case, the flipclock.js requires the jQuery library to be loaded beforehand. Also, it is recommended to use a zipped folder that can hold JavaScript and CSS assets. For this project, download the ZIP file that needs to be uploaded from static resource available at https://github.com/PacktPublishing/Learning-Salesforce- Lightning-Application-Development/blob/master/chapter7/libraries/flipclock.zip.

2. Use the ltng:require tag and...

Table of contents

• Title Page
• Copyright and Credits
• PacktPub.com
• Foreword
• Contributors
• Preface
• Introduction to the Lightning Component Framework
• Exploring Salesforce DX
• Lightning Component Building Blocks
• The Lightning JavaScript API
• Events in the Lightning Component Framework
• Lightning Data Service and Base Components
• Using External JavaScript Libraries in Lightning Components
• Debugging Lightning Components
• Performance Tuning Your Lightning Component
• Taking Lightning Components out of Salesforce Using Lightning Out
• Lightning Flows
• Making Components Available for Salesforce Mobile and Communities
• Lightning Navigation and Lightning Console APIs
• Unit Testing Lightning Components
• Publishing Lightning Components on AppExchange
• Other Books You May Enjoy