Toggle Side Panel
Close search

Activity › Forums › Salesforce® Discussions › How to include external javascript file in Salesforce Lightning Component?

Tagged: , , ,

  • Suyash

    Member
    April 30, 2016 at 3:03 PM

    this link will be helpful:

    https://developer.salesforce.com/blogs/developer-relations/2015/05/loading-external-js-css-libraries-lightning-components.html

    Thanks

  • Piyush

    Member
    May 26, 2016 at 11:21 AM

    Hello Abhinav,

    The Lightning component framework’s only allow those external JavaScript libraries which was upload in Salesforce static resources. In Spring'15 release Salesforce created a new component called <ltng:require> to load libraries while being secure.
    Here is the sample for using external file in Lightning Component:-

    <ltng:require
    styles="/resource/path/to/css1[,/resource/path/to/css2]"
    scripts='/resource//path/to/js1.js,[/resource//path/to/js2.js]'
    afterScriptsLoaded="{!c.controllerFunction}"
    />

    Notes:-

    • Files paths must always start from /resource. i.e they must be a static resource to enforce security.
    • CDNs are not allowed at this point because they are outside of Salesforce data centers and can’t be controlled. In the future, we may allow admins to whitelist CDNs for their orgs.
    • If you upload a JS or CSS directly into Static resource, then you should reference them by resource name without .css or .js suffix. For example: /resource/myjsfile or /resource/mycssfile
    • If your resource is inside a zip file, then you should use .css or .js suffix. For example: /resource/<resourcename>/path/to/myjsfile.js

     

  • Avnish Yadav

    Member
    August 6, 2018 at 4:34 AM

    Hello,

    To reference a JavaScript library that you’ve uploaded as a static resource, use a <ltng:require> tag in your .cmp or .app markup.

    <ltng:require scripts="{!$Resource.***resourceName***}"
    afterScriptsLoaded="{!c.afterScriptsLoaded}" />

    Thanks.

  • Parul

    Member
    September 23, 2018 at 8:44 AM

    The Lightning component framework’s only allow those external JavaScript libraries which was upload in Salesforce static resources. In Spring’15 release Salesforce created a new component called <ltng:require> to load libraries while being secure.
    Here is the sample for using external file in Lightning Component:-

    <ltng:require
    styles=”/resource/path/to/css1[,/resource/path/to/css2]”
    scripts=’/resource//path/to/js1.js,[/resource//path/to/js2.js]’
    afterScriptsLoaded=”{!c.controllerFunction}”
    />

  • shariq

    Member
    September 24, 2018 at 4:49 AM

    Try this -

    <ltng:require scripts=”{!$Resource.nameOfResource}”
    afterScriptsLoaded=”{!c.afterScriptsLoaded}” />

    Hope this helps.

Log In to reply.

Popular Salesforce Blogs