Using External JavaScript Libraries and CSS Libraries in Lightning Component

In this article you will learn, how to use javascript Libraries and CSS Libraries in Lightning component framework. You can use multiple libraries in your lightning component or lightning application like JQuery, Bootstrap, your custom CSS and custom Javascript libraries.

You can use libraries in lightning component framework after uploading these libraries in static resource. You can use a <ltng:reqire> tag in your component(.com) or application(.app) markup. The libraries must be uploaded in static resource due to framework’s content security policy. With Spring 15 release new component called <ltng:require> is added to load libraries. Below has the following feature:-

  1. Asynchronously load multiple javascript libraries or CSS
  2. Let app know when libraries loaded completely
  3. Load libraries in dependency order according to app need
  4. load only verifiable libraries for framework security

Here’s an example of <ltng:require>:-

<ltng:require styles="/resource/firstcss[,/resource/secondcss]" 
scripts='/resource/javascript1.js,[/resource/javascript2.js]' afterScriptsLoaded="
{!c.firstLoadFunction}" />

Explanation of above example:
1. style – access multiple CSS files with comma separated. Load files from left to right.
2. script – access multiple javascript files with comma separated. Load files from left to right.
3. afterScriptsLoaded – to provide javascript function to notify when all javascript files are loaded.

Assumption on loading script:

  1. Loading sets of scripts :- specify comma separated javascript libraries in the script attributes to load set of libraries.
  2. Load Order :- The scripts order of loading will be left to right.
  3. One Time loading :- scripts will load only once in they are specified in multiple <ltng:require> tags in the same component or across different components.
  4. 4. Parallel Loading :- if you have multiple sets of scripts, it will load simultaneously. they are not depending on each other. :-

<ltng:require styles="/resource/firstcss[,/resource/secondcss]"
 afterScriptsLoaded="{!c.firstLoadFunction}" />
    <div class="tabDropdown">
        <div id="tLabel" type="button" class='btn btn-success'
 data-toggle="tabDropdown" aria-haspopup="true" aria-expanded="false">
            Some Menu
            <span class="caret"></span>
        <ul class="tabDropdown-menu" role="menu" aria-labelledby="tLabel">
            <li role="presentation"><a role="menuitem" href="#">dropdown1</a></li>
            <li role="presentation"><a role="menuitem" href="#">dropdown2</a></li>

tabdropdowncontroller.js :-

    firstLoadFunction: function(component, event, helper) {
        alert('Do Something');

Usage or :-

    <c:mycomponent />


Leave a Reply


We're not around right now. But you can send us an email and we'll get back to you, asap.


About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2020 Forcetalks. All Right Reserved.

Log in with your credentials


Forgot your details?