How to call JavaScript function/method from Static Resource in LWC?

Question

I am able to load the script from Static Resource using loadScript().

How to call the function in the JS from onclick event of a lighting button.

Answer 1

I am assuming you want to load a third-party library from the static resources.

Here is a sample code :

import { LightningElement } from 'lwc';
import { loadScript } from "lightning/platformResourceLoader";
import jsResource from "@salesforce/resourceUrl/jsResource";

export default class SampleComponent extends LightningElement {

   buttonClickHandler() {
        loadScript(this, jsResource)
            .then(() => {
                // Do the magic!
            })
            .catch((error) => {
                // Handle error
            });
    }
}

Answer 2

You may need to bind in the callback in the renderedCallback hook, since you button may not exist yet.

    import { loadScript } from "lightning/platformResourceLoader";
    import someJsLib from "@salesforce/resourceUrl/someJsLib";

    export default class SampleComponent extends LightningElement {

       renderedCallback() {
            loadScript(this, someJsLib)
                .then(() => {
                    this.template
                        .querySelector('lightning-button')
                        .addEventListener('click', someFunction.bind(this)));
                })
                .catch((error) => {

                });
        }
    }

Answer 3

Here's how I accomplished it using ltng:require instead of loadScript().

Component:

    <ltng:require scripts="{!$Resource.LZString}" afterScriptsLoaded="{!c.handleLZStringLoaded}" />
    <aura:attribute name="LZStringLoaded" type="Boolean" default="false" description="Populated automatically, is set to true when the LZString compression library is ready for use." />

Controller:

    handleLZStringLoaded : function handleLZStringLoaded(cmp, event, helper) {
        cmp.set('v.LZStringLoaded', true);
    },

    handleOppReload : function handleOppReload(cmp, event, helper) {
        var runReload = $A.getCallback(function runReload() {
            if (!cmp.get('v.LZStringLoaded')) { // resources still need to be loaded
                return setTimeout(runReload, 50);
            }

            var config = cmp.get('v.Opp.Config__c');
            var data   = JSON.parse(LZString.decompressFromEncodedURIComponent(config));
        }
    }

My use case was to store a large JSON blob which could exceed the maximum size of a Salesforce long text area field. So I brought in a client-side compression library to reduce the size.

The main thing I found was that I needed to make sure that the library was loaded before I tried to use it. After it's available, anything the library stores in the global "window" object (or lightning locker service's proxy of it) should be available for use.

In my case, the global value was an object called "LZString", which I could then reference to access various compression functions.

Hope that helps