When building Lightning Components, using the HTML script markup is not supported. However, there’s an alternative that is easy to implement. Follow these step-by-step instructions to learn how to use external JavaScript or jQuery libraries within Salesforce Lightning Components.
Upload a Static Resource
Before you can use the jQuery library within your Lightning Component, you need to create a static resource for the JavaScript files.
Static resources can be uploaded as a single file or a group of files in a ZIP folder. To upload a static resource go to Setup > Custom Code > Static Resources.
Loading a Single JS File
When building Lightning Components, using the HTML script markup is not supported and will result in this error message: “script tags only allowed in templates”. The alternative way is to use ltng:require which enables you to load external JavaScript libraries.
|
1 2 3 |
<aura:component> <ltng:require scripts="{!$Resource.yourResourceName + '/yourFileName.js'}" /> </aura:component> |
Static resources can be included using the standard syntax: {!$Resource.yourResourceName + ‘/yourFileName.js’}.
Loading Multiple JS Files
If you have more than one JavaScript file the syntax is a bit different due to a quirk in the way $Resource is parsed in expressions.
|
1 2 3 4 5 |
<aura:component> <ltng:require scripts="{!join(',', $Resource.yourResourceName + '/yourFileName1.js', $Resource.yourResourceName + '/yourFileName2.js')}" /> </aura:component> |
Use the jQuery library within a component
Once the jQuery libraries are loaded on the page, to utilize the library include the afterScriptsLoaded event and place the method within your client-side controller.
Component markup
|
1 2 3 |
<aura:component> <ltng:require scripts="{!$Resource.yourResourceName + '/yourFileName.js'}" afterScriptsLoaded="{!c.doInit}" /> </aura:component> |
Client-side controller markup
|
1 2 3 4 5 6 7 8 9 10 11 |
({ doInit : function(component, event, helper) { jQuery("document").ready(function(){ console.log('loaded'); }); } }) |
Example
Here’s a example of using jQuery One Page Nav within a Lightning Component:
Component
|
1 2 3 4 5 |
<aura:component> <ltng:require scripts="{!join(',', $Resource.myLightingComponent + '/jquery-3.3.1.min.js', $Resource.myLightingComponent+ '/jquery.nav.js')}" afterScriptsLoaded="{!c.doInit}"/> </aura:component> |
Client-side controller
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
({ doInit : function(component, event, helper) { jQuery("document").ready(function(){ $('#cmp-nav').onePageNav({ scrollSpeed: 750, scrollThreshold: 0.5, filter: '', easing: 'swing', }); }); } }) |
Questions?
Send them to me via email, send me a tweet @jennamolby, or leave a comment
Leave A Comment