How to use external js file for common functions

[Ivan Wilson]

I have a number of functions I need to reuse across different forms. I have created a separate file and reference it at the top of the Custom JS page. However, DFFS throws an error when I try to call these functions, telling me that they are not defined.

A colleague showed how I can define my functions in the global scope. This works, but I’m wondering if there is a better way to make these functions reusable across forms?

[Keith Hudson]

One way to make use of an external js file would be to edit the default New, Disp or Edit form on which you want the file to be available, and add a CEWP to the page that references the external js file. It will then be available to DFFS.

Hopefully we will hear from Alex, as I there used to be a DFFS way to refer to external js files but I haven’t needed to use that capability recently so I don’t remember exactly how it worked or whether it still works the same in recent versions.

[Alexander Bautz]

Hi,
The recommended method would be to use the textarea at the top of the page in custom js. This would require that you put the link in all the forms. Alternatively you can edit the “DFFS_loader.html” file and put a reference to your custom file here to ensure it loads in all forms.

Regarding the loading problems you had when you tried to load the file: It may be an issue with how you have wrapped the functions in this file – the functions must be available in the global scope and not inside a function. Also, you may have the wrong path to the file?

Do you see any error messages in the console (hit F12 > Console)?

Alexander

[Ivan Wilson]

I’m using the textarea at the top of the custom js page to reference my file. However, I have to declare the functions in the external JS file using:

window.myFunctionName = function(myParams) {}

This adds them to the global scope. Is this the approach you’d recommend? It’s working fine, so just wondering if there is a better way.

[Alexander Bautz]

This is correct, but you may want to ensure your function names are unique and doesn’t interfere with other built in SP functions.

You may want to use a name-space to ensure uniqueness – something like this:

// Define name-space
var wilson = wilson || {};
// Define a function
wilson.firstFunc = function(){
   // your code
};
// Define another function
wilson.anotherFunc = function(){
   // your code
};

Call this function like this:

wilson.firstFunc();

Alexander

[Author]

Posts