07 February 2014

Triggering and Handling a Custom Event in APEX

On one of the pages there was a need to refresh a report region when a node in an APEX Tree was clicked. As far as I know there is no built-in method to create a Dynamic Action to a node in an APEX Tree, so this might call for a Custom Event.
If there is a built-in method, please leave a comment :)

Trigger Custom Event

To trigger a Custom Event, change the "link" column in the APEX Tree Query to something like the following:

select ...
      ,'javascript:apex.event.trigger(document, "nodeClicked", "'
        ||value_from_table||'"); void(0);' as link
from ...
This will include a little bit of javascript in the anchor when the APEX Tree is generated which triggers the "nodeClicked" event passing the "value_from_table" that you want to pass in.
The "value_from_table" will be available in the Custom Event as the Data object.

Handling the Custom Event

To handle the Custom Event, follow the "Create Dynamic Action" wizard and fill in the following:

  • Event: Custom
  • Custom Event: nodeClicked
  • Selection Type: Dom Object
  • Dom Object: document
When you want to get the "value_from_table", you will need to reference
this.data;

In my case I needed the "value_from_table" and use "Set Value" as a TRUE action, and refresh a report.

Links

APEX Javascript documentation

4 comments:

  1. Excellent. On my first try, I missed the void(0); and it didn't work at all. It opened a new page with one word, either true or false depending on the return value of the apex.event.trigger.

    In the end I did it slightly differently:
    SELECT id, null link, ...
    Then chose the column type as link, giving '#' as the link target and for attributes I added onclick="apex.event.trigger(document, 'nodeClicked', '#ID#')"

    This allows reference to any of the columns for the row.

    ReplyDelete