LWC - Loading JS from a Static Resource
Brett M. Nelson - Wednesday, February 12, 2020
I've already traded a Lightning Web Component and built out some of the preliminary parts. I have a button that says "Build" that when I click it will call the
build method. I also have a
<canvas> because the library I'm going to use is a drawing library. So I have a canvas have a set height and width, it has the the main thing to note here is that I have the
lwc:dom="manual so that the library will be able to manipulate the DOM of this element. And I gave it a class
jsToLoad static resource I've imported the
testFiles because we're going to make use of one of the images that are in there.
Right now click Build, nothing happens. And that is expected. First thing we're going to do is import the
So we've importing
loadScript starts with a capital S. we're importing
lightning/platformResourceLoader. And we're going to make use of that in our
build method. We already have
jsPath assigned to
testFiles assigned to
loadImage down here is a helper method we need for the library to access the image will use later on.
build is called, what we're going to do is use
loadScript to load the library Legra from the static resource
jsToLoad. So, first thing we need to do is get that so we get that started.
loadScript method takes the context that it's supposed to operate in. So
this and then the path of the file. So and the path in our static resource is going to be
/legra/lib/legra.umd.js and that should be the correct path. Then, since this is since this is an asynchronous method, we will call
.then() on it. We will also call have a
.catch method in case there's an error.
Okay, so for our
catch method in case something goes wrong, we're just going to log it to the window console. In our in our
then method we will access Legra from the context of window. So once
loadScript loads that script it should be added to the window object. So we can use
window.legra to access it or we can just use
legra without the window since implied let's just see if this actually loads at first. Okay, now when we look in our local development environment, we see that we are actually logging right here if we put a breakpoint in We see Legra is a class to be used. One of the requirements of Lagra since we are using this is to get that
<canvas> element we created earlier. So let's start by getting that available.
Here we have our
buildArea defined and we're using
this.template.querySelector('canvas.build-area').getContext('2d') to get the 2d context of the
<canvas> element so now we can use this in our returned promise to access the canvas build area. And with Legra make something happen.
buildArea that we got. And that's the 2d context of our canvas element. And the second property here is how large we want the elements we're going to build with.
Next we call the builder and create a rectangle uses the start parameters of 12 and two, and the end parameters of 8 and 8. So let's go look what see what this looks like. And we have a rectangle if we change it, so we can make it a little bigger to see. Close the console, we're not going to need that anymore. So there we have it, a rectangle that uses the Library library to create what appears to be Lego blocks, tops in a rectangle.
We can make more than just rectangles. We can also use it to make the No items. So let's make some of those as well. Yeah, we've got a assortment of objects that we've created once we deploy this into Salesforce for fun, because why not, we can see that our brick design can be present in our Salesforce org, because it seems like a fun thing to do.
The other thing we can do is I mentioned an image earlier so we can get rid of all miss. We're going to use the like Legra library to draw an image. The helper method down here,
async, so we have to specify and build as
async as well. There we go. Things formatted properly. Now we have our image loading up here after we get the
buildArea with With the path to the static resource that we want to use as our image, the
loadImages method is just a helper method. So we have the image ready for Legra to use. And then we call
builder.drawImage(img, [0, 0]).
And looks a little bit hard to see. So let's change the size of the bricks to five. We're going to deploy this right now. There we have it, our Legra Library using an image to draw a little block online and it still works in Salesforce.
That’s it for now.
Remember to sign up for The Weekly Stand-Up! and you can get updated with any new information we have on WIPDeveloper.com.