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:

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.

Use the ltng:require tag and leverage the afterScriptsLoaded event to load the JavaScript files and styles. The following component code shows the use of the ltng:require component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >

    <ltng:require styles="{!$Resource.flipClock + '/flipclock/flipclock.css'}" scripts="{!join(',', $Resource.flipClock + '/flipclock/jquery-1.8.3.js', $Resource.flipClock + '/flipclock/flipclock.js')}" afterScriptsLoaded="{!c.afterScriptsLoaded}" />

    <div class="clock" style="margin:2em;">

    </div>
</aura:component>

Use third-party JavaScript functions and code in the afterScriptsLoaded attribute. Note that the afterScriptsLoaded function ensures that the DOM is loaded and ready. You can compare this to the $document.ready(function(){}) call. The controller code is as follows:

({
afterScriptsLoaded : function(component, event, helper) {
    var clock;
    clock = $('.clock').FlipClock({
      clockFace: 'TwentyFourHourClock'
    });
  }
})

You can test the clock by creating a test app with the following code snippet:

<aura:application >
    <c:flipClock/>
</aura:application>

If you got the clock working, the URL for the test application, once previewed, should be as shown in the following screenshot:

Note that since this is a Lightning Component, you can also drag this component onto any record view.

Table of Contents for Integrating a third-party library into Lightning Components

Create new playlist

Sign In

Sign Up

Table of Contents for
Integrating a third-party library into Lightning Components