Tag Archives: JQuery

Apex Extension

Posted on by

About a month ago I saw a mail coming by where a colleague of mine had integrated the jQuery plug-in Codemirror into a text area for the end-user. I hadn’t seen this plug-in before, but I really liked the feel of it.

I’m sure all of us can recognize the fact that we miss tab indentation in  APEX, or that we would like to see key words, numbers and strings in color, or how about some line numbers? Perhaps line numbers that hold into account that the line number of an error in a PL/SQL APEX process is never quite the same as the place of the error. This last one is because APEX places BEGIN and END; automatically around PL/SQL processes. Convenient for the developer so he can develop faster, not so much when it comes down to debugging.

Since we can not change the APEX Application Builder, it would be nice to find another solution? And that solution exists: take a look at the following screenshots:

Image

Image

So how did I do it? A little “thinking outside the box” did the trick. While we might not want to mess with Apex directly, we can use browser Extensions and add-ons, to alter the looks, safely from a distance. So I created a small Chrome Extension that integrates CodeMirror into the APEX Text Areas.

Chrome Extensions are created with HTML5 and JS so once you have the basics of your Extension set up you can convert an Apex Text Area like this:
var vTextArea=document.getElementById(“F4000_P4312_PROCESS_SQL2″);

vMyEditor = CodeMirror.fromTextArea(vTextArea, {

mode: “text/x-plsql”,
tabMode: “indent”,
tabSize : 2,
lineNumbers: true,
firstLineNumber: 2,
lineWrapping: true
});

I wrapped this in a “$(document).ready(function(){});” to make sure it is executed after loading all plug-ins.

I hope I showed you all that you can do allot with a little imagination, and I welcome any questions or suggestions.

Joni Vandenberghe

Get triggering element in dynamic action

Posted on by

Last week, I ran into a problem with a dynamic action in APEX 4.0.

I have a series of 8 images of persons which I generate with PL/SQL. They are all speakers on a conference. Every image is clickable and should insert the name of the speaker in the database.

I gave a class “speaker” to every image. The ID of the image is the primary key of the person in our database. By doing this, I am able to create a dynamic action which I can bind to the JQuery selector ".speaker".

In this case, I wanted to use AJAX to perform my actions so I created an AJAX callback insert_speaker which contained the PL/SQL block with the insert command. Based on the PK of the person, the name of the speaker will be inserted into the database, together with some extra information.

In my dynamic action, I added a true action of type “Execute JavaScript code”. Here, I ran into a problem: how do I get the ID of the image the user clicked on?

On the internet, I found two solutions with JQuery to get the ID of the triggering element of an event:

$(this).attr("id");

and

event.target.id;

There is a little difference between these two, found it out here, so I tested both and concluded I needed event.target.id.

I completed the JavaScript block with the AJAX request, the ID parameter and the other lines and tested the page.
Everything worked perfectly. Well done, I tought…
…untill I tested my page with Mozilla Firefox. Firebug returned an error ‘event is not defined’.

Hmm…and it all worked fine in Google Chrome (I use this browser for application development)? Strange.
After a while of searching, I figured out there is another solution, something specific to APEX:

this.triggeringElement.id;

Sounds logical, but it isn’t when you have no idea this line can be used in APEX.

The only official documentation I could find about this, is the help text of the textarea labeled “Value” in the When block of a dynamic action.
Help text

When I changed

event.target.id;

to

this.triggeringElement.id;

in my code, the page works fine in both Google Chrome and Mozilla Firefox.

For further development with APEX 4.0: make sure you test your pages in multiple browsers!
The example above states  very well that not all browsers interpret code the same way!