Get triggering element in dynamic action

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.

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!

Oracle Forms 11g and Google maps integration

In last years blog post about Forms 11g Javascript integration I explained how you could call the Google Maps API from forms using JavaScript.

I captured that testcase using screentoaster.
It seems that this tool has disappeared and all the recorded sessions with it.

So, here’s a new video on youtube of this Google Map Integration, now in a demo application.
The Form is embedded in a HTML page witch contains a Google Map.

Oracle Forms 11g and Apex using external events

I remembered an old post of Roel Hartman where he integrated a form into apex.
He used a part of OraFormsFaces by Wilfred van der Deijl: the CommunicatorBean.
Using this CommunicatorBean forms could react on “external messages”.
Now with Forms 11g reacting on external events, this CommunicatorBean isn’t necessary any more(sorry Wilfred).

This is how I did it using external events…
First things first: set up the advanced queueing mechanism.
Check this tutorial which includes setting up advanced queueing.
I created a little form based on emp(nothing fancy)…

The new feature in forms:

With the following properties:

What should forms execute when this event happens?
This has to be specified in the When-event-raised trigger.

In this case we retrieve the payload and extract the empno from it.
The empno is used to set the default where clause on the block.
When there’s an empno on the queue, forms will query that employee.
That’s all for the forms part…
Now I created a little Apex page with two regions:

The Employee details will be our form.
So I put our form in the HTML using an iframe:

Using a “select list” it’s possible to select an employee.

This is the result:

Now the purpose of the select list is to choose an employee and show the detail information in our form.
In order to do this, the select list calls a javascript function.

This javascript function is created in the HTML header

The code behind this:

<script language=”JavaScript” type=”text/javascript”>
function getEmployee (){
var emp = $x(‘P2_EMPNO’);
// send request
var ajaxRequest = new
htmldb_Get(null,&APP_ID.,’APPLICATION_PROCESS=get_emp’,0);
ajaxRequest.add(‘P2_EMPNO’,emp.value);

// get response
ajaxResult = ajaxRequest.get();
ajaxRequest = null;
}
</script>

This javascript function calls an application process and uses the empno as parameter.
The application process put the empno on the queue.

When changing the select list, the form is queried

This is a solution to integrate forms into another application whether it’s Apex, ADF or another web applicaton.
When it can put something on the queue, forms can react on it.
And yes, I could do it using the javascript feature in Forms 11g. I know…
And for Apex it’s probably a better solution, as we can skip the AQ part and make calls to and from forms in Javascript.

Forms 11g javascript integration: Call others

Forms 11g holds a lot of interesting new features focused on event-driven architecture, one of these is javascript integration. There are two ways of using javascript with Forms 11g: “call others” and “let others call you”.

Javascript can call code in Forms(“Let others call you”) using the new forms trigger “when-custom-javacript-event”.

This post is going to show you the first one: “call others”, in other words call javascript from your Oracle Forms application.

During the Forms Modernization Seminar I showed a google map that could be manipulated from an Oracle Form. It’s an easy implementation with only a few lines of code(most of the javascript is taken from the api examples on the google code site: http://code.google.com/apis/maps/).

• Build a little form with one (control) block, one text field(to enter an address) and one button(to call the javascript code).
• Next step is to create an HTML-page to display the form.

This code puts the form(in an iframe) and the map side by side:
(Click to enlarge)

And it will look like this:

• The javascript that will be called is put in another file google.js:

• The only thing to do is creating a “when-button-pressed” trigger in forms to call the javascript function showAddress.
  This is done by a new built-in procedure web.javascript_eval_expr:
  

• Copy the HTML and javascript file to the following directory:
  <middleware_home>\user_projects\domains\<domain>\servers\WLS_FORMS\tmp\_WL_user\formsapp_11.1.1\e18uoi\war\
• Create a new configuration using Enterprise Manager:

• Make sure the parameter EnableJavascriptEvent is set to “true’ in your configuration!

And the working demo…