SOLVED

SharePoint framework > refer to custom .js file and call function

Iron Contributor

I started this one before: https://techcommunity.microsoft.com/t5/SharePoint-Developer/Sharepoint-framework-gt-reference-to-cus...

Sorry to start a new conversation again but I cannot figure it out.

 

I still struggle with a reference to my custom javascript file. Now I created a very simple example, based on the "Hello World" example.

I added this to my config.json:

"externals": {
     "custom": "./src/webparts/helloWorld/myscript.js"

Added this to the "HelloWorldWebPart.ts":

 

import 'custom';

//call function in "myscript.js" in the "render"

testFunction()

This is my test function:

 

function testFunction() {
alert("test");
};

In my ""HelloWorldWebPart.ts"  my function is not recognised.

 

 

What is wrong in my approach?

3 Replies
best response confirmed by Mike Jansen (Iron Contributor)
Solution

Took some time but I figured it out. This is what I did:

1. No reference in the "Config.json"

2 Changed my custom script:

var CustomScript = function testFunction() {
alert("test");
};

module.exports = {
	CustomScript: CustomScript
	};

3. in my .ts file did in the render method

 

const MyCustomScript: any = require('./myscript');

MyCustomScript.CustomScript()

Now my "alert" shows up.

 

I do have an additional question.

What if I want to refer to another .js file from "myscript.js" ?

Just like:

<script src="blablabla"></script>
Managed to get is working by using:
"const myCustom = require('./myscript');"
1 best response

Accepted Solutions
best response confirmed by Mike Jansen (Iron Contributor)
Solution

Took some time but I figured it out. This is what I did:

1. No reference in the "Config.json"

2 Changed my custom script:

var CustomScript = function testFunction() {
alert("test");
};

module.exports = {
	CustomScript: CustomScript
	};

3. in my .ts file did in the render method

 

const MyCustomScript: any = require('./myscript');

MyCustomScript.CustomScript()

Now my "alert" shows up.

 

View solution in original post