With APEX 20.2 or later, there are quite a few updates that have taken place. That however should not stop the average Oracle PL/SQL APEX Developer from getting involved with JavaScript. Using JavaScript will take you from a novice APEX developer to an expert APEX developer. Learning the intricacies of the DOM and writing non-proprietary Oracle code will take you to a whole new level.
It is time to get more advanced. Here are some great tips for moving from novice to advanced:
Dynamic Actions
In the past, you spent your time probably working with dynamic actions where you focused on refreshing multiple regions on a page, and for each item you had to manually make an Action of True to refresh everything. When you miss one item, you would have business users complain that the list of values you have tied to that region would not refresh the region’s data.
Use JavaScript Instead of refreshing using “Actions” use this quick line to refresh items based on their static ID (which should have a naming standard in your application):
Affordable APEX Shared Hosting
apex.event.trigger( “#myRegionStaticID”, “apexrefresh” );
Taking that a step further now you can “codify” and program your page refreshes for these resources using a simple for loop like in the example below:
const object = { a: 1, b: 2, c: 3 };
for (const property in object) {
console.log(`${property}: ${object[property]}`);
}
// expected output:
// “a: 1”
/ “b: 2”
// “c: 3”
Group/Reference your JavaScript
Now that you have seen that you can put inline code statements for your javascript statements, take it up a notch, and put your .js file in the page template. The great part of doing this is that you then cache the .js file on the login page to your application. This keeps the code on the local system ready to rock and roll. Here is an example of referencing your js file that can live separately from your APEX instance:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>#TITLE#</title>
#HEAD#
<script src=”http://myserver.myport/my_images/mycode.js” type=”text/javascript”></script>
JavaScript Server-Side
With newer releases of APEX 20.2 or later you can now choose “Execute Server-side Code”. Oracle has gone above and beyond to incorporate other languages within the Oracle database and guess what…. JavaScript made the list.
You can now interact with page item values using the apex.env construct and also execute DML & PL/SQL with the apex.conn.execute construct. This is a huge improvement as you can now focus on using native functions/libraries within javascript to write your code, versus using a PL/SQL “workaround” that may not be as simple. In fact, you can use both
Reference the page items
const ice_cream = apex.env.P1_ICECREAM;
const color = apex.env.P1_COLOR;
// Executing DML operations
apex.conn.execute(‘update flavors set color = :color where ice_cream = :ice_cream’, {
color: color,
ice_cream: ice_cream
});
// Executing PL/SQL
apex.conn.execute(‘begin apex_debug.message(:1); end;’, [‘Updated ice cream color to ‘ + color]);
// Messages passed to console.log will also end up in the debug logs
console.log(‘Updated color for ‘ + ice_cream + ‘ using console.log for printing’);
// Setting page item values
apex.env.P1_RESPONSE = ‘Success!’;
JavaScript Developers
The greatest reason to switch over to using JavaScript in your applications is how many people in the world utilize JavaScript. While Oracle is a native language, javascript is more widely adopted
function checkColor(color) {
if (color !== “Yellow”) {
return true;
} else {
return false;
}
}
for (var row of apex.conn.execute(“select id, color, flavor from ice_cream”)) {
if (checkColor(row.color)) {
apex.conn.execute(“update ice_cream set popular = ‘Yes'”);
console.log(“The flavor: ” + row.flavor + ” is popular”);
}
}
Summary
Advanced JavaScript will continue to take you and your applications to the next level. You will be able to quickly iterate through items, reference multiple regions or rows at a time, as well as focus on more of the web development. JavaScript gives you the ability to create highly responsive interfaces that improve the user experience and provide dynamic functionality.
