3 Tips For Using Imported Javascript With Visual Builder

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
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
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
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
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
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
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
8 of 8 9/2/2019, 6:46 PM

3 Tips For Using Imported Javascript With Visual Builder

Uploaded by

Copyright:

Available Formats

3 Tips For Using Imported Javascript With Visual Builder

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

3 Tips For Using Imported Javascript With Visual Builder

Uploaded by

Copyright:

Available Formats

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

Oracle Visual Builder Cloud Service Blog

Try Oracle Cloud Platform

ORACLE VISUAL BUILDER CLOUD SERVICE

December 15, 2018

3 Tips for Using Imported

In a previous article, I discussed how to import and

1) Place your imported

2) Use Code Insight to find the

Double click that menu option and you be presented

Don't forget to name your import in the function() of

var PageModule = function PageModule() {};

3) Export your custom code

var exports = {};

return 'Processed value from external js: '

The code above is setting up function(s) for export

You can download an example project at my GitHub.

Join the discussion

ORACLE VISUAL BUILDER CLOUD ORACLE VISUAL BUILDER CLOUD

You might also like