3 Tips for Using Imported Javascript with Visual Builder | Oracle Visual... https://blogs.oracle.com/vbcs/3-tips-for-using-imported-javascript-with-v...

Oracle Visual Builder Cloud Service Blog

MENU

Oracle Visual Builder Cloud Service Blog

Try Oracle Cloud Platform

For Free

ORACLE VISUAL BUILDER CLOUD SERVICE

December 15, 2018

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

1 of 8 9/2/2019, 6:46 PM
3 Tips for Using Imported Javascript with Visual Builder | Oracle Visual... https://blogs.oracle.com/vbcs/3-tips-for-using-imported-javascript-with-v...

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 of 8 9/2/2019, 6:46 PM
3 Tips for Using Imported Javascript with Visual Builder | Oracle Visual... https://blogs.oracle.com/vbcs/3-tips-for-using-imported-javascript-with-v...

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.

3 of 8 9/2/2019, 6:46 PM
3 Tips for Using Imported Javascript with Visual Builder | Oracle Visual... https://blogs.oracle.com/vbcs/3-tips-for-using-imported-javascript-with-v...

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() {};

4 of 8 9/2/2019, 6:46 PM
3 Tips for Using Imported Javascript with Visual Builder | Oracle Visual... https://blogs.oracle.com/vbcs/3-tips-for-using-imported-javascript-with-v...

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() {

5 of 8 9/2/2019, 6:46 PM
3 Tips for Using Imported Javascript with Visual Builder | Oracle Visual... https://blogs.oracle.com/vbcs/3-tips-for-using-imported-javascript-with-v...

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.

6 of 8 9/2/2019, 6:46 PM
3 Tips for Using Imported Javascript with Visual Builder | Oracle Visual... https://blogs.oracle.com/vbcs/3-tips-for-using-imported-javascript-with-v...

Join the discussion

Comments ( 2 )

Recent Content

ORACLE VISUAL BUILDER CLOUD ORACLE VISUAL BUILDER CLOUD

SERVICE SERVICE
Complex Queries in Visual Builder Adventures in Mutation - Adding
Rows to a Table or ListView in Oracle
Often, you have to filter a data set
Visual Builder
based on multiple search criteria
like in the above image. In this
case, you want to only create...

7 of 8 9/2/2019, 6:46 PM
3 Tips for Using Imported Javascript with Visual Builder | Oracle Visual... https://blogs.oracle.com/vbcs/3-tips-for-using-imported-javascript-with-v...

8 of 8 9/2/2019, 6:46 PM