How to Add Third Party JavaScript Libraries to Salesforce Lightning

Sharing is Caring

It’s not secret that Salesforce Lightning is a huge shift away from Visualforce and Apex, I feel like I’ve had to relearn years of development and lean heavily on my javascript development experienced. If you aren’t sure what Salesforce Lightning is or aren’t sure why it’s a huge shift, you need to read my blog article called what is salesforce lightning.

What is a Third Party Library

Third party libraries allow developers to build quickly and take advantage of other people’s abstractions to avoid having to spend time working around browser issues or etc. In JavaScript, third party libraries and code reuse are all of the rage. A third party library is basically anything your team personally write and require for your project to work. Common third party libraries fall into a few different categories:

  • DOM Manipulation (jQuery, etc)
  • Data Visualization / Graphing Libraries (D3, Leaflet, etc)
  • Utility Libraries (Moment.js, Lodash, Underscore, etc.)
  • MVC / Rendering Frameworks (Moustache Angular, React, etc.)

How can I use Third Party Libraries in Lightning?

In Salesforce lightning, they don’t allow you to load external third party JavaScript libraries from a source outside of the salesforce domain. In order to load a javascript file, you need to upload it as a static resource in each salesforce.com organization or make sure it’s included in your Salesforce package if you develop apps for the Salesforce AppExchange.

Instead of uploading one file as a static resource, I recommend using a zip file so you only need one big resource to include in your package. Files are included in Lightning like so inside of the cmp or app file:

<ltng:require scripts="{!$Resource.YourAwesomeJSResource}" />

Scripts load asynchronously, so it’s really important to keep in mind that files may not be fully loaded when the init event handler is called. Salesforce has provided a way of having a callback or function that can execute when the scripts are finished loading. This can be done as such:

<ltng:require scripts="{!$Resource.YourAwesomeJSResource}" c="c.functionForAfterScriptsLoaded}" />

c.functionForAfterScriptsLoaded is a function you need to write inside of your Lightning Controller. You can literally name this function anything you want, and it really doesn’t have to be too complex.

Some third party modules will not work if the Lightning Locker Service has been turned on because they may not work in JavaScript’s strict mode or may try and use the window object.

I strongly recommend reading my post on Improving Visualforce Performance, because may of the same tips still apply. For example, make sure you use minified files within the static resources.

Sharing is Caring

Brian is a software architect and technology leader living in Niagara Falls with 13+ years of development experience. He is passionate about automation, business process re-engineering, and building a better tomorrow.

Brian is a proud father of four: two boys, and two girls and has been happily married to Crystal for more than ten years. From time to time, Brian may post about his faith, his family, and definitely about technology.