Advanced JavaScript in Oracle Application (APEX)

Advanced JavaScript in Oracle APEX

Advanced JavaScript in Oracle APEXWith 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ʼs 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 would miss one item, you would have a business users complain that the list of values

you have tied to that region would not refresh the regions data.

Use JavaScript Instead of refreshing using “Actions” use this quick line to refresh items based off 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 of incorporating 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’, {

});

// 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 that utilizie 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 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 itterate through items, reference mutliple 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

Share This
5 1 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments