In a previous article, I discussed how to import and use Javascript libraries. This has been a popular article and as such has generated a bunch of questions. In this article I am going to provide 3 tips that should address those questions and make it super easy to regularly import and use Javascript within your Visual Builder app. 

1) Place your imported Javascript in the resources folder

When you import your Javascript file, you select the folder for install at the time of import. In the previous article, I had imported the file into a flows folder and as such I had used a absolute path from the root of the instance to provide the location of the file. However, if you import into the resources folder you can now just reference your file by prepending "resources/" to the name of the JS file (you don't need the .js extension).

2) Use Code Insight to find the path the file

Even better, you can use Code Insight to help you find the file. You invoke Code Insight with the Ctrl + Space bar. If you invoke Code Insight within the "" of the define in your custom code module you will see a Select URL… option pop up.

Double click that menu option and you be presented with a empty text box to start typing the name of your file. Select the filename when it is found and hit Enter. The path will be added automatically for you and it will also remove the .js extension for you.

Don't forget to name your import in the function() of the require syntax. This is the name you will use to access your imported functions from that file. I named mine "importedjs" and as shown in the below code example I access my function using that scope – importedjs.callExternalAction

define(["resources/importedjs"], function(importedjs) {
  'use strict';

  var PageModule = function PageModule() {};
  
  PageModule.prototype.callImportedJSFunction = function(param)
  {
    return importedjs.callExternalAction(param);
  }

  return PageModule;
});

3) Export your custom code using AMD export syntax

The last tip is the most important as I have received this question numerous times. If you are using 3rd party libraries, they likely already export their functions correctly. However if you are creating your own functions file, you need to export your functions using the AMD format. In this case AMD doesn't stand for Advanced Micro Devices but rather Asynchronous Module Definition (see Feature Image for this article). There is plenty of good material that describes the ins and outs of AMD format but I will use a simple example for this article with code shown below. 

define([], function() {

var exports = {};

function callExternalAction(param)
{ 
  return 'Processed value from external js: ' + param; 
};

exports.callExternalAction = callExternalAction;

return exports;
});

The code above is setting up function(s) for export and assigning them to exported symbols. These are the names you will see when you use Code Insight on that filename as shown below. This is the basics of exporting in AMD format so if you follow this example you should be good to go. 

You can download an example project at my GitHub. 

Ran into issues? Try posting your question on our forum.