X

The Visual Builder Cloud Service Blog

3 Tips for Using Imported Javascript with Visual Builder

JT Thomas
Director of Product Management

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. 

Join the discussion

Comments ( 2 )
  • Hong Ling Sunday, March 10, 2019
    Hi, I am new to requireJS. For your “Don't forget to name your import in the function() of the require syntax”, may I know where is this require syntax at, as I could not find in your project. Because I’m facing the problem of not being able to retrieve the function in my imported javascript libraries successfully.
  • JT Monday, April 22, 2019
    The third section demonstrates, with example source code, how a function should be exported. If you continue to have issues, please post more details on the Visual Builder customer connect forum. https://cloudcustomerconnect.oracle.com/resources/e610f4723c/summary
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.