Sunday, August 11, 2019

Oracle JET - How To Reference JavaScript Module in HTML

I will explain how to reference JavaScript module function in Oracle JET HTML. In previous Oracle JET versions, we were using $root to access parent appController module. Syntax $root looks a bit like magic, it is better to reference module through a predefined variable. I will show you how.

Sample app comes with number converter, which helps to format numeric value. For convenience reasons and better reuse, number formatting function is moved to a separate module. Our goal is to call function self.convertNumericValue from converter module inside our module HTML:

Import the converter module into your target module. Make sure to define a variable for the import. Then define the local variable and assign it with the value pointing to the imported module. This will allow calling functions from the imported module, anywhere within our target module:

To demonstrate how it works, I will include a call to format number for the table column. I have defined a table column template for that reason:

Within the template, I'm calling converter (function is called by referencing local variable) to format number:

It works well, the column with salary values is formatted by function from the imported module:

A sample application is available on my GiHub repo.

No comments: