Using jQuery in Salesforce Lightning

Salesforce Logo
Sharing is Caring

Up until recently, if you were building websites you pretty much always used jQuery. jQuery really simplified working with the browser document object model (DOM) and doing really custom animations. And, of course jQuery gives us a ton of ready-made solutions that don’t require a lot of effort to implement.

Salesforce Lightning has changed a lot of this. 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.

Salesforce recently turned on the Lightning Locker Service which makes it a bit more difficult to use external libraries like jQuery. As you’re probably aware, we can’t use an externally hosted library due to the Lightning Locker Service. To get around this we need to download the library and enable it as a Static Resource.

Step 1: Download jQuery

As mentioned above, we can’t use the CDN or hosted version of jQuery because of the Lightning Locker Service. So we’ll need to head over to jQuery.com and click the download button or use this link: https://jquery.com/download/

Make sure that you download the compressed production version of jQuery. You probably want the full version instead of the slim version (missing ajax, effects and maybe some other things.)

After we click the link, we’ll see the JavaScript load up. We need to right click anywhere and choose “Save As” or “Save to File”.

Download it to somewhere you can easily access it to upload (ie Your Desktop, Downloads, etc). I recommend that you rename it to simply be “jquery.min.js” as it will be easier to update in the future.

Step 2: Uploading jQuery as a Static Resource

  1. Sign into Salesforce (likely https://login.salesforce.com OR https://test.salesforce.com/)
  2. Make sure that you are an Administrator.
  3. Navigate to the static resources (Home -> Custom Code -> Static Resources)
  4. Press the “New” button. A new form will load.
  5. I highly recommend giving it a meaningful name (like “jquery”) and then a useful description.
  6. Choose the javascript file from your desktop or downloads folder.
  7. The Cache Control should be set to Public. Caching allows resources to load faster because the browser won’t necessarily need to download it again if the file hasn’t changed.
  8. Press Save.

Step 4: Create A Lightning Component

  1. Create a fairly basic lightning component that doesn’t really do too much. For example, I’ve created a simple “Lightning Bundle” that doesn’t have any Component Configuration that I’ve called jQueryTest.
  2. Next I’ve added the require’s tag into the aura:component pointing at my resource which I called “jquery”.
  3. I’ve then added a bit of that simply says “The component has loaded”.
  4. In my controller, I’ve added a doInit event that simply calls jQuery(‘document’).ready and has a console.log.

I’ve then implemented flexipage:availableForAllPageTypes so I can easily test it really anywhere within Salesforce. For my ease of testing I’m going to drop it on the Service’s Home Page.

My controller has very simple code, so far. We’ll get more complex as we go though!

Here’s what it looks like so far:

As you can see, it’s super bland and doesn’t actually do anything. Let’s update the code so it’s a little more visually appealing and now works with a button.

As you can see there’s quite a few changes. For the most part we can focus on really three things highlighted in red:

hiddenTillLoad – now hides until the script is done loading.

theSecondParagraph – now shows up only when the button has been clicked. An animation also happens over 50,000 miliseconds which slowly makes it get larger and become harder to see. 🙂

Wrapping it up

In this blog post, we’ve learned how to include jQuery in an Salesforce Lightning Aura component and how to do basic events using the document.ready method and onClickHandler.

Sharing is Caring