4

Let's say I have a really basic script as a static resource in my org:

helloWorld.js

function helloWorld() {
    alert("Hello World!");
}

and I import it to my component as per below:

myComponent.js

import helloWorld from '@salesforce/resourceUrl/helloWorld';
import { loadScript } from 'lightning/platformResourceLoader';

export default class TechDocSelfServe extends LightningElement {

    connectedCallback() {
        loadScript(this,helloWorld)
            .then(() => {
                alert('loaded!');
            })
            .catch((error) => {
                console.log('error -> ' + error);
            });
    }
}

How would I actually call the imported method? I can't see anything in the documentation that explains this.

2 Answers 2

8

In order to use a script function, it needs to be exported. For static resources, this means using the window global object. Note that because of how LWC works, the methods won't leak to other components (each component gets its own window object).

window.helloWorld = function() {
    alert("Hello World!");
}

And to call it:

import { LightningElement } from "lwc";
import { loadScript } from "lightning/platformResourceLoader";
import HELLOWORLD from "@salesforce/resourceUrl/helloworld";

export default class Q317576 extends LightningElement {
  connectedCallback() {
    loadScript(this, HELLOWORLD).then(() => {
      helloWorld();
    });
  }
}
4
  • thanks @sfdcfox
    – Luke Bray
    Aug 23, 2020 at 11:50
  • @altius_rup I just checked, and window is working for me. Do you have any documentation that demonstrates this? Or was it a problem you ran in to?
    – sfdcfox
    Mar 9, 2022 at 13:35
  • @sfdcfox I'm working with D3js on platform. Here is an example of d3-context-menu 2.1.0 which adds itself as 'd3.contextMenu' (line 17) : github.com/patorjk/d3-context-menu/blob/…. I've just realized that 'root' is a local variable here : duh ! Sorry about the mistake, I will delete my previous comment. I will let you delete yours.
    – altius_rup
    Mar 10, 2022 at 17:46
  • @altius_rup no worries, it happens to the best of us.
    – sfdcfox
    Mar 10, 2022 at 18:50
-2

You can have a look at this, you should get the js into this using loadscript and then use it

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.js_third_party_library

3
  • I have managed to load the script. In the documentation they seem to just use d3.functionHere; but it is never instantiated so I am wondering how to do this. How would I actually call my function helloWorld()?
    – Luke Bray
    Aug 23, 2020 at 10:19
  • Promise.all([ loadScript(this, helloWorld + '/helloWorld.js') ]) .then(() => { alert('yes it is working'); }); Can you try this?
    – Uday
    Aug 23, 2020 at 10:30
  • I think you are misunderstanding. The script itself loads successfully. In my original question I am asking how to call the functions within the script. How do I call the helloWorld() function within helloWorld.js. I can load the script fine into my component.
    – Luke Bray
    Aug 23, 2020 at 10:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .